webvr

Project files for 3D + WebVR workshop Sept 2017

View on GitHub

Coding in Three Dimensions

Welcome..

Introduction to 3d, WebGL & WebVR.

3D with Javascript :

WebGL ?

WebGL - Web Graphics Library - is a JavaScript API for rendering 3D graphics in the browser, without plugins, allowing GPU accelerated usage of physics and image processing and effects. It is a Shader-based API using GLSL.

What is Three.js ?

A javascript 3d library, that abstracts away the complexities of coding 3d & the WebGL API - by Mr. Doob

How to get it :

Or :

The basic HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>webvr workshop</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<style>
			body {
				background-color: #101010;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>

	<body>

		<script src="./js/three.min.js"></script>
		<script src="./js/WebVR.js"></script>

		<script src="./js/workshop.js"></script>

	</body>

Create the 3D basics

var scene, camera, renderer;

init();
animate();

function init() {

	setTheScene();
	
	//createMesh();
	//createLights();
	//loadModel();
	
	//createPanorama();
	//enableVR();
	
}

function setTheScene(){

	//set up scene
	scene = new THREE.Scene();

	//create camera
	camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 1000 );

	//create renderer
	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
	
	window.addEventListener( 'resize', onWindowResize, false );

}


function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

	renderer.animate( render );

}

function render() {

	renderer.render( scene, camera );

}

Create an 3D object

Make a cube :

function createMesh(){
	var geometry, material;

	geometry = new THREE.BoxGeometry( 20, 20, 20 );
	material =  new THREE.MeshBasicMaterial({ color: 0x9988ff, wireframe: true});

	mesh = new THREE.Mesh( geometry, material );
	mesh.position.set( 0, 10, -50 );
	scene.add( mesh );
}

A Note on 3D Space

3D Cartesian Coordinates

Explore Materials

material = new THREE.MeshStandardMaterial({ color: 0x9988ff  });

Turn on the Ligths

function createLights() {

	var directionalLight = new THREE.DirectionalLight( 0xffeedd, 1 );
	directionalLight.position.set( -100, 100, 50 );
	scene.add( directionalLight );
	
}

Create a Disco Ball

More Complex 3D Models & Maps

Run a localhost

Establish secure connection - serve over HTTPS (optional):

This step is optional, but you will get a warning in Chrome later on if accessing the WebVR API over an insecure connection.

Import the model

function loadModel(){

	// loading model
	var loader = new THREE.ObjectLoader();

	loader.load(
		// resource URL
		"models/cirno.json",

		// pass the loaded data to the onLoad function.
		function ( obj ) {
			// add the loaded object to the scene
			obj.position.set( 120, -100, -170 );
			obj.scale.set( 0.1, 0.1, 0.1 );

			scene.add( obj );

			girl = obj;
		},

		// Function called when download progresses
		function ( xhr ) {
			console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
		},

		// Function called when download errors
		function ( xhr ) {
			console.error( 'An error happened' );
		}
	);

}

Create Panorama

function createPanorama() {
	
	var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
	geometry.scale( - 1, 1, 1 );

	var material = new THREE.MeshBasicMaterial( {
		map: new THREE.TextureLoader().load( 'textures/south_bank_skate_park_small.jpg' )
	} );

	panorama = new THREE.Mesh( geometry, material );
	panorama.matrixAutoUpdate = false;
	scene.add( panorama );
}

Panoramic image by Jon Davey

WebVR ?

WebVR is a JavaScript API for creating immersive 3D, Virtual Reality experiences in virtual reality devices or browsers.

Still an experimental feature in Chrome(59+), enable by switching on flag

chrome://flags#enable-webvr

or for live projects, request a Origin Token to enable by default on your domain.

function enableVR(){

	//enable the renderer
	renderer.vr.enabled = true;

  	// check if WebVR API is available
	WEBVR.checkAvailability().catch( function( message ) {

		document.body.appendChild( WEBVR.getMessageContainer( message ) );

	} );

	//check if there is a VR Display connected/enabled..
	WEBVR.getVRDisplay( function ( display ) {

		renderer.vr.setDevice( display );

		document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );

	} );
}

Get your device ready

About Interaction

WebVR:

WebGL: