An overview and case studies on using Web 3D (specifically WebGL) with the open source Drupal content management framework.

1. Drupal 3D
Intro to Using Web 3D
with Drupal
Brian Hay
brian@virtualrealms.com.au

2. 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

3. Virtual Realms Pty Ltd
www.OrbitOwl.com www.Construct3D.com
www.DrupalEnso.org

4. General application
● This presentation is about Web 3D
● But techniques apply to integrating Drupal
with any external app or service

5. 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 …

6. 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

7. 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

8. 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

9. THREE.js
Example:
Spinning
Cube

10. x3dom Example: Spinning Cube

11. 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

12. Marketing missteps can’t stop VR :)

13. Case Studies - Drupal with Web 3D
1. LifeTec Virtual Smart Home
2. TJM Vehicle Builder (not my work)

14. LifeTec Virtual
Smart 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

15. 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

16. 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!

17. TJM Vehicle Builder
● By Chris Brown (2pha) and iFactory Brisbane
● Drupal Commerce + THREE.js
Vehicle builder frontend THREE.js material creation & preview

18. 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)

19. 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)

20. 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

21. 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 ...

22. ~ END ~
Thanks!