Individual Member - Drupal Association
DrupalCon Los Angeles 12-14 May 2015

Drupal in 3D:
Leveraging WebGL and X3DOM for
Interactive 3D Content Visualization

Leonard Daly
President, Daly Realism
Meghan Coakley McCarthy, PhD
National Institutes of Health
 

Overview

  1. What is X3D
  2. X3D + HTML5 + JS = X3DOM
  3. Cross-Origin Resource Sharing
  4. Simple Drupal Integration
  5. Partial Drupal Integration
  6. Mobile Users (stereo/cardboard)
  7. Full Drupal integration
  8. 3D Print Exchange
  9. Lightning Talks on 3D
  10. Resources

What is X3D

 

Images and models used by permission from Fraunhofer IGD

What is X3D

 

 

Images and models used by permission from Fraunhofer IGD

Web3D Consortium

X3D + HTML5 + JS = X3DOM

Use X3DOM in HTML5

<!doctype html>
<html>
<head>
  <title>Simplest X3DOM</title>
  <meta encoding="utf-8">
  <script src="http://x3dom.org/release/x3dom.js"></script>
  <link rel="stylesheet" href="http://x3dom.org/release/x3dom.css">
</head>
<body>
  <x3d id='model' showStat='true' showLog='false' x='0px' y='0px' width='512px' height='420px'>
    <Scene>
      <Shape>
        <Appearance>
          <Material diffuseColor='.7 0 1'></Material>
        </Appearance>
        <Box></Box>
      </Shape>
    </Scene>
  </x3d>
</body>
</html>

Live Example

Cross-Origin Resource Sharing

CORS Client-Side

CORS Server-Side

Simple Integration in Drupal

Simple Example

http://www.web3d.org

Partial Integration

Mobile Users (stereo/cardboard)

Partial Integration Example

http://realism.com/models

Full integration (X3D module)

3D Print Exchange

3D Lightning Talks

Resources

/