22
Drupal 3D Intro to Using Web 3D with Drupal Brian Hay [email protected]

Drupal 3D - Intro to Using Web 3D with Drupal

Embed Size (px)

Citation preview

Page 1: Drupal 3D - Intro to Using Web 3D with Drupal

Drupal 3DIntro to Using Web 3D

with Drupal

Brian [email protected]

Page 2: Drupal 3D - Intro to Using Web 3D with Drupal

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

Virtual Realms Pty Ltd

www.OrbitOwl.com www.Construct3D.com

www.DrupalEnso.org

Page 4: Drupal 3D - Intro to Using Web 3D with Drupal

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

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

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

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

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

THREE.jsExample:

SpinningCube

Page 10: Drupal 3D - Intro to Using Web 3D with Drupal

x3dom Example: Spinning Cube

Page 11: Drupal 3D - Intro to Using Web 3D with Drupal

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

Marketing missteps can’t stop VR :)

Page 13: Drupal 3D - Intro to Using Web 3D with Drupal

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

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

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

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

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

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 20: Drupal 3D - Intro to Using Web 3D with Drupal

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

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

~ END ~

Thanks!