Workshop

Models

Thursday, 30th October 2014 6:15pm
Skills Matter, 116-120 Goswell Road, London

Next: TBD

Carl Bateman

By day

• Software Engineer (desktop)

• C#, C++, VB, MySQL, .NET, Linq, blah, blah, blah...

By night

• Software Engineer (desktop)

• OpenGL, Unity, JavaScript, PHP, CSS, HTML and, of course, WebGL


Big fan of 3d and game jams

Thanks to...



Khronos.org

•For the pizza & beer
• With whom I am affiliated



Skills Matter (venue)

• With whom I am in no way affiliated



Pearson

• eBook 45% discount (check out the MeetUp page)

WebGL Workshop

• After Workshop Drinkies @ The Slaughtered Lamb

WebGL Workshop


• Not a lecture

• A resumé of my WebGL experience for the last month

• Question? Ask!

• A few books – many, many, many web pages

• Frankencode

• A lot to cover

WebGL Workshop


Slides and stuff at

webglworkshop.com/11

Overview


Raw WebGL

• Basic format

• Defining

• Simple "loading"


Break for pizza yay


Will Eastcott


Three.js

• Load

• Geometry definition

Models

Needed for anything other than the simplest of scenes


Points / vertices

Edges / faces

Colours

Texture co-ordinates

Normals

Points

  1. (-1,-1,0)
  2. ( 1,-1,0)
  3. (-1, 1,0)
  4. ( 1, 1,0)
loading...

Edges

  1. {0,1,2}
  2. {0,2,3}
loading...

Colours

{R,G,B,A}

  1. {1,0,0,1}
  2. {1,1,0,1}
  3. {0,1,0,1}
  4. {0,0,1,1}
loading...

Texture co-ordinates

{u,v}

  1. {0,0}
  2. {0,1}
  3. {1,0}
  4. {1,1}
 

loading...

Raw WebGL
Geometry Format

Exercise

Enter appropriate values for vertexPositions, indices, vertexNormals and colors.
Edit - webgl/tetrahedronGeometry.js
View - 01.Tetrahedron.html

var tetrahedronGeometry = {
  vertexPositions: [ ],
  indices: [ ],
  vertexTextureCoords: (function () {
    var vtc = [];
    var n = 3;
    var m = 4;
    for (var i = 0; i < n; i++) {
      for (var j = 0; j < m; j++) {
        vtc.push(i / n);
        vtc.push(j / m);
      }
    }
    return vtc;
  }()),
  vertexNormals: [],
  colors: [],
};



Pizza time

Three.js
Load js/json

var jsonLoader = new THREE.JSONLoader();
jsonLoader.load("Three/android.js", function (geometry, materials) {
	var material = new THREE.MeshFaceMaterial(materials);
	var android = new THREE.Mesh(geometry, material);
	android.rotateY(10);
	android.position.x = 10;
	android.castShadow = true;
	scene.add(android);
});

jsonLoader.load("Three/treehouse.logo.js", function (geometry, materials) {
	var material = new THREE.MeshFaceMaterial(materials);
	var android = new THREE.Mesh(geometry, material);
	android.position.set(-25, 0, -25);
	android.scale.set(5, 5, 5);
	android.castShadow = true;
	scene.add(android);
});

Three.js
Load obj

var manager = new THREE.LoadingManager();
manager.onProgress = function (item, loaded, total) {
	console.log(item, loaded, total);
};

var texture = new THREE.Texture();

var loader = new THREE.ImageLoader(manager);
loader.load('Three/companion_cube.jpg', function (image) {
	//loader.load('UV_Grid_Sm.jpg', function (image) {
	texture.image = image;
	texture.needsUpdate = true;
});

var loader = new THREE.OBJLoader(manager);
loader.load('Three/companion_cube.obj', function (object) {
	object.traverse(function (child) {
		if (child instanceof THREE.Mesh) {
			child.material.map = texture;
			child.castShadow = true;
			child.receiveShadow = true;
		}
	});

	object.position.set(-20, 0, -20);
	object.scale.set(0.05, 0.05, 0.05);
	scene.add(object);
});

Three.js
Load stl

var manager = new THREE.LoadingManager();
var texture1 = new THREE.Texture();
var loader = new THREE.ImageLoader(manager);

loader.load('Three/UV_Grid_Sm.jpg', function (image) {
	texture1.image = image;
	texture1.needsUpdate = true;
	var material = new THREE.MeshLambertMaterial({ ambient: 0x555555, color: 0xAAAAAA, specular: 0x111111, shininess: 200, map: texture1 });
	var loader = new THREE.STLLoader();
	loader.addEventListener('load', function (event) {
		var geometry = event.content;
		geometry.computeTangents();
		var mesh = new THREE.Mesh(geometry, material);
		mesh.position.set(5, 9, -30);
		mesh.castShadow = true;
		mesh.receiveShadow = true;

		scene.add(mesh);
	});
	loader.load('Three/companion_dodecahedron.stl');
});