Skip to main content

VR, AR, & Data Visualization: Making with WebGL

Making with WebGL

WebGL is a web friendly graphics library of code used to create 3D interfaces, objects, and worlds in Javascript. Because of JavaScript, it runs in compliant web browsers across all operating systems and most platforms. It can run on a mobile phone, a highend VR headset, and PC or Mac desktops. It can be embedded into a webpage or used to create standalone VR worlds.

To view, the Google Chrome web browser is the most compliant. In most cases it will simply just work. No plugin or any extra installation of software is needed. To develop in, it's relativity easy to make simple elements and spaces in JavaScript. As these elements or spaces grow more complex, stronger programming skill becomes necessary. In developer circles, they say that "if you want to make a desk in WebGL, you have to cut down your own tree for wood and make your own nails." Steps are being taken to make it easier, but they are works in progress. The preferred 3D model format is GLB or gtLB (GLB is a compressed folder that contains the gtLB model and all the textures used by the model). GLB files can be exported from 3D software, often with a Babylon plugin or converted from FBX on one of many online converter websites. Unity and Unreal game engines export their own flavors of WebGL, with limitations and exceptional large files.

 

Useful Links
 

Three.js is the most popular flavor of WebGL https://threejs.org/

A-Frame is a set of three.js framework meant tp make three.js and VR work easier https://aframe.io/
Mozilla Hubs is a multi-user platform based on A-Frame https://hubs.mozilla.com/#/

 

Three.js Resources

 

ThreeJS Org (main site)

ThreeJS Editor (online editor)

ThreeJS Fundamentals (tutorials)

Codepen Beginning WebGL (tutorials​)

Udacity Interactive 3D  (free online class)

Babylon JS

Babylon JS Docs & Resources

 

Online Converter FBX - GLB

Aspose FBX-to-GLB

GLB-Packer Glitch

 

A Frame Resources
 

Classes

Learn Frame VR

AFrame School

 

Tools

Glitch AFrame
 

Selected Tutorials

AFrame Developing Three JS Overview

AFrame Animation Simple Animation - Light, 5 Boxes

Glitch Basic Guide Animation, Simple Trigger - Floating Box

A-Frame Components:

Aframe Registry

NPM JS

Unpkg.com  

Github Don McCurdy

 

Mozilla Hubs

Hubs is a free multi-user platform based on A-Frame & Three.js. It some has powerful features and yet is also simple and toy-like. Users can draw 3D, add 3D models, interact with objects, share screens, and share webcams. Because its essentially JavaScript, the rendering power is less than that of native Unreal or Unity apps. Models, textures, and effects tend to be simpler. Despite being based in A-Frame & Three.js, no custom coding is possible without the purchase of hosted domain and a branch on GitHub. Custom coding in Hubs is then largely out of reach for novices and intermediate level users.

Hubs Mozilla Welcome