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
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)
• After Workshop Drinkies @ The Slaughtered Lamb
• 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
Slides and stuff at
Raw WebGL
• Basic format
• Defining
• Simple "loading"
Break for pizza yay
Will Eastcott
Three.js
• Load
• Geometry definition
Needed for anything other than the simplest of scenes
Points / vertices
Edges / faces
Colours
Texture co-ordinates
Normals
{R,G,B,A}
{u,v}
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: [],
};
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);
});
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);
});
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');
});