drupal 3d - intro to using web 3d with drupal
TRANSCRIPT
![Page 2: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/2.jpg)
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
![Page 3: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/3.jpg)
Virtual Realms Pty Ltd
www.OrbitOwl.com www.Construct3D.com
www.DrupalEnso.org
![Page 4: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/4.jpg)
General application
● This presentation is about Web 3D● But techniques apply to integrating Drupal
with any external app or service
![Page 5: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/5.jpg)
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 …
![Page 6: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/6.jpg)
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
![Page 7: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/7.jpg)
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
![Page 8: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/8.jpg)
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
![Page 9: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/9.jpg)
THREE.jsExample:
SpinningCube
![Page 10: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/10.jpg)
x3dom Example: Spinning Cube
![Page 11: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/11.jpg)
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
![Page 12: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/12.jpg)
Marketing missteps can’t stop VR :)
![Page 13: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/13.jpg)
Case Studies - Drupal with Web 3D
1. LifeTec Virtual Smart Home2. TJM Vehicle Builder (not my work)
![Page 14: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/14.jpg)
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
![Page 15: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/15.jpg)
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
![Page 16: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/16.jpg)
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!
![Page 17: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/17.jpg)
TJM Vehicle Builder● By Chris Brown (2pha) and iFactory Brisbane● Drupal Commerce + THREE.js
Vehicle builder frontend THREE.js material creation & preview
![Page 18: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/18.jpg)
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)
![Page 19: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/19.jpg)
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)
![Page 20: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/20.jpg)
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
![Page 21: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/21.jpg)
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 ...
![Page 22: Drupal 3D - Intro to Using Web 3D with Drupal](https://reader033.vdocuments.site/reader033/viewer/2022051404/5a6d01977f8b9af8418b497f/html5/thumbnails/22.jpg)
~ END ~
Thanks!