drupal 3d - intro to using web 3d with drupal
TRANSCRIPT
Brief Bio
● IT Generalist - GFX design & technical● Mid-late 90s
○ Self-taught web, 3D & VR (VRML)○ Taught web, multimedia & VRML at Qantm & QUT
● 2000-2005 - ran own business doing VR● 2006 - discovered Drupal● Recently getting back into 3D & VR
○ Unity, Blender, THREE.js, WebGL
Virtual Realms Pty Ltd
www.OrbitOwl.com www.Construct3D.com
www.DrupalEnso.org
General application
● This presentation is about Web 3D● But techniques apply to integrating Drupal
with any external app or service
What is Web 3D?● Web 3D = any technology that enables interactive 3D
graphics in a web browser● Historically: VRML, X3D, Papervision3D (Flash) and
many, many others over the last 2 decades● Until recently, all required proprietary 3D browser
plugins or Flash or Java● But that’s all changed with WebGL …
WebGL is a game changer
● Plug-in free 3D in the browser with HTML5, javascript and WebGL
● Modern browsers natively support WebGL○ Yes, even Microsoft IE (11) and upcoming “Edge”!
● Cross-platform and mobile support● It just works! TM
○ … on modern hardware and web browsers
What is WebGL?“WebGL (Web Graphics Library) is a JavaScript API for
rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the
use of plug-ins” ~ Wikipedia
● A web standard, started by Mozilla, maintained by Khronos Group, supported by all major browsers
● Based on OpenGL ES standard● Uses HTML5 canvas element and DOM
What is WebGL?● WebGL is a low level API = heavy going for newbies● But … there are higher level libraries like THREE.js and
x3dom that make it a lot easier to work with WebGL● Also, visual creation tools like Unity allow export to
WebGL, so you don’t necessarily need to understand WebGL or THREE.js code
THREE.jsExample:
SpinningCube
x3dom Example: Spinning Cube
Related ...● VR = Virtual Reality, AR = Augmented Reality● VR Headsets - Oculus Rift (Facebook), Samsung Galaxy Gear VR, Google
Cardboard, HTC Vive, Microsoft HoloLens● Magic Leap - virtual retinal display● Leap Motion - hand gesture recognition with a small USB sensor● Microsoft Kinect● Mobiles - multitouch and tracking via GPS, accelerometers, cameras● Mature content creation software: Unity, Unreal, CryEngine, Blender,
3dsmax, Maya, Photoshop, The Gimp, Krita etc● After a few decades and many false starts VR is finally hitting the
mainstream and attracting big $$ investment
Marketing missteps can’t stop VR :)
Case Studies - Drupal with Web 3D
1. LifeTec Virtual Smart Home2. TJM Vehicle Builder (not my work)
LifeTec VirtualSmart Home (VSH)● Stage 1 of 3 - WIP● Walk or drive a wheelchair through
a traditional Queensland home to experience before and after accessible home modifications.
● Simple Drupal site to allow client editing of some VR content - points of interest text
● Site outputs JSON● JSON loaded & parsed by VSH● VR points of interest created
LifeTec VSH - DEMO● Content type:
○ VR Point of Interest (POI)● Views:
○ List, create and edit VR POIs○ Output POIs as JSON
● Made with:○ Drupal 7, adminimal admin theme, admin menu, admin
menu source, views, views json, field permissions, field readonly, maxlength, node save redirect, login destination, simplify
Future Possibilities● Use Drupal to manage, browse and customise all scene assets
(a curated library of assets)○ 3D models○ Textures○ Materials○ Audio○ Video○ Text (& translations!)○ Metadata
● Better integration between 3D scene & Drupal○ 2-way using Drupal feeds, services, views JSON etc
● Drupal 8 complete WebGL frontend theme!
TJM Vehicle Builder● By Chris Brown (2pha) and iFactory Brisbane● Drupal Commerce + THREE.js
Vehicle builder frontend THREE.js material creation & preview
TJM Vehicle Builder - DEMO
● Select vehicle make, model, series● Customise colours & add accessories● Add chosen options to Drupal Commerce
cart● Submit enquiry● Session persistence (return to same vehicle)
Web 3D Resources● WebGL on Wikipedia● WebGL browser compatibility table● Official Khronos Group WebGL specs and docs● JS libs to simplify working with WebGL:
○ THREE.js - by far the most popular!○ Scene.js○ x3dom (pronounced x-freedom)
● Web3D Consortium (ISO standards for 3D on the web)
Drupal + Web 3D Resources
● TJM website with WebGL vehicle builder○ Drupal Commerce + THREE.js○ By Chris Brown (2pha) and iFactory, Brisbane
● CAM3D Three sandbox module● X3DOM sandbox module
THREE.js Examples (Non-Drupal)These are non-Drupal … but they could be!● Clara.io - full 3D modelling and animation app in the
browser● Planner5D - 3D home interior design app● Hero Forge Custom Miniatures - design and 3D print
your own board game miniatures● Games: GoreScript, HelloRun & Racer-S● Data viz: globe● And many more ...
~ END ~
Thanks!