Drupal 3D - Intro to Using Web 3D with Drupal
3 likes2,181 views
The document discusses the integration of Web 3D technology with Drupal, focusing on the capabilities of WebGL for rendering 3D graphics without plugins. It highlights various applications and tools used in developing interactive environments, including case studies on virtual smart homes and vehicle customization. Additionally, it provides resources for further exploration of WebGL and its integration with Drupal.
Drupal 3D - Intro to Using Web 3D with Drupal
- 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
- 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!