NOVIE - Workshop

Fun with javascript 3D technologies in HTML5

Myself - ten years XP as a Web Developer -
ActionScript fanatic back in the day - Javascript, HTML5 enthusiast - in a complicated relationship with 3D - doing my first workshop - vladgoran.ro

What about yourself?

OKAPI Studio - proud sponsors of IT Fest - a
fun bunch of really talented people - a great place to work - internationally renown clients - challenging projects

My other 3D experiments UNIT1 SKULL SOUND

NOVIE (nov 13, get it? ha?)

NOVIE - very simple 3d game w. multiplayer - focus
on fast results, cut corners

NOVIE https://github.com/oportocala/novie http://vladgoran.ro/games/novie

Tools - git - bower - WebGL (trough canvas) -
Three.js / ThreeX.js - Cannon.js - Sound API (through Howler) - sockets if there’s time :)

Let’s do it!

<!DOCTYPE html> <html> <head lang="en"> </head> <body> <div class="scene-wrapper"></div> </body>
</html> HTML

CSS <style> body { margin: 0; padding: 0; overflow: hidden;
} canvas { width: 100%; height: 100% } </style>

Get the javascript via bower > bower install threex.cannonjs >
bower install threex.keyboardstate > bower install howler.js

Add them to your page <script src="bower_components/threex.cannonjs/examples/vendor/three.js/build/three.min.js"></script> <script src="bower_components/threex.cannonjs/vendor/cannon.js/build/cannon.js"></script> <script
src="bower_components/threex.cannonjs/threex.cannonbody.js"></script> <script src="bower_components/threex.cannonjs/threex.cannonworld.js"></script> <script src="bower_components/threex.keyboardstate/threex.keyboardstate.js"></script> <script src="bower_components/howler.js/howler.js"></script>

Commit git commit -m “initial setup” git push origin master

OR jsfiddle http://jsfiddle.net/ypL0q33a/1/

SETUP: Scene, Renderer var scene = new THREE.Scene(); var renderer
= new THREE.WebGLRenderer();

SETUP: Hooking into the DOM renderer.setSize(window.innerWidth, window.innerHeight); document.getElementsByClassName('scene-wrapper').item(0).appendChild(renderer.domElement);

SETUP: Camera var camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1,
1000 ); camera.position.x = 60; camera.position.y = 80; camera.position.z = 0; camera.lookAt(scene.position);

SETUP: Render loop function render() { requestAnimationFrame( render ); renderer.render(
scene, camera ); } render();

Objects: Plane, Spheres - material - geometry - mesh -
add it to the scene

Objects: Plane var plane = function generatePlane () { var
planeSize = 50; var geometry = new THREE.CubeGeometry(planeSize, 1, planeSize, 1, 1, 1); var material = new THREE.MeshBasicMaterial({color: 0xffffff}); var mesh = new THREE.Mesh(geometry, material); mesh.position.y = -.5; scene.add(mesh); return mesh; } ();

Objects: Spheres var generateSphere = function (color, y, name) {
var geometry = new THREE.SphereGeometry(1, 10, 10); var material = new THREE.MeshBasicMaterial({color: color || 0x00000, wireframe: true}); var mesh = new THREE.Mesh(geometry, material); mesh.position.y = y; mesh.isSphere = true; scene.add(mesh); mesh.name = name; return mesh; };

Objects: Spheres (2) redSphere = generateSphere(0xff0000, 5, 'red'); blueSphere =
generateSphere(0x0000ff, 2, 'blue');

BORING! lets make some thing spin plane.rotation.y += 0.1;

Still boring: Add physics - create a physical world -
create a contact material - var updateFcts = []; - wrap objects in physics Bodies - update the render loop - place them high up and let them fall

Add physics: World var worldX = new THREEx.CannonWorld().start();

Add physics: Contact Material var stoneMaterial = new CANNON.Material('stone'); worldX.world.addContactMaterial(new
CANNON.ContactMaterial( stoneMaterial, stoneMaterial, 0.1, // Friction 0.1 // Restitution ));

Add physics: Update functions var updateFcts = [];

Add physics: Update functions (2) updateFcts.push( function () { renderer.render(scene,
camera); } );

Add physics: Physics Bodies var physicsBody = new THREEx.CannonBody({ mesh:
mesh, material: stoneMaterial, mass: 100 }).addTo(worldX);

Add physics: Physics Bodies (2) updateFcts.push( function (delta, now) {
physicsBody.update(delta, now) } );

Add physics: New render loop var animate = function animate(nowMs)
{ requestAnimationFrame(animate); // measure time lastTimeMs = lastTimeMs || nowMs - 1000 / 60; var deltaMs = Math.min(200, nowMs - lastTimeMs); lastTimeMs = nowMs; // call each update function updateFcts.forEach( function (updateFn) { updateFn(deltaMs / 1000, nowMs / 1000); } ); }; var lastTimeMs = null; requestAnimationFrame(animate);

Add physics: The Drop mesh.position.y = y;

Controls - game loop keyboard.pressed - adding angularVelocity - less
boring

Controls: Setup var keyboard = new THREEx.KeyboardState(renderer.domElement); renderer.domElement.setAttribute("tabIndex", "0"); renderer.domElement.focus();

Controls: Pressed state updateFcts.push(function () { if (keyboard.pressed(‘left’)) { ...
} });

Controls: angularVelocity var speed = 20; if (keyboard.pressed(keys.left)) { target.body.angularVelocity.x
= speed; } else if (keyboard.pressed(keys.right)) { target.body.angularVelocity.x = -speed; } else { target.body.angularVelocity.x = 0; } if (keyboard.pressed(keys.up)) { target.body.angularVelocity.z = speed; } else if (keyboard.pressed(keys.down)) { target.body.angularVelocity.z = -speed; } else { target.body.angularVelocity.z = 0; }

Controls: angularVelocity var generateControls = function (target, keys) { return
function () { var speed = 20; if (keyboard.pressed(keys.left)) { … } ... }; updateFcts.push(generateControls(redSphere, {left: 'left', right: 'right', up: 'up', down: 'down'})); updateFcts.push(generateControls(blueSphere, {left: 'a', right: 'd', up: 'w', down: 's'}));

Add events - Collision - Death

Add events: Death var deathY = -30; updateFcts.push(function () {
if (blueSphere.body.position.y < deathY && !blueSphere.isDead) { sphereDied(blueSphere); } if (redSphere.body.position.y < deathY && !redSphere.isDead) { sphereDied(redSphere); } });

Add events: Death (2) var sphereDied = function (target) {
target.isDead = true; console.log(target.name, 'died'); //sound.play('death'); //resetScene(); };

Add events: Collision physicsBody.body.addEventListener("collide", function (e) { if (e.with.userData.object3d.isSphere) {
console.log(e.with.userData.object3d.name, 'collided with', name); //sound.play('impact'); } });

Add Sound var sound = function () { var base
= 'http://vladgoran. ro/games/novie/'; var sounds = { impact: new Howl({ urls: [base + 'sounds/impact.mp3'], volume: 0.5 }), death: new Howl({ urls: [base + 'sounds/death.mp3'], volume: 0.5 }) ... ... return { play: function (id) { if (sounds[id]) { return sounds[id].play(); } return false; } }; }();

Play the sound physicsBody.body.addEventListener("collide", function (e) { if (e.with.userData.object3d.isSphere) {
console.log(e.with.userData.object3d.name, 'collided with', name); sound.play('impact'); } });

Refactoring - initScene - resetScene - resetSphere

Refactoring: initScene var initScene = function () { redSphere =
generateSphere(0xff0000, 5, 'red'); blueSphere = generateSphere(0x0000ff, 2, 'blue'); updateFcts.push(generateControls(redSphere, {left: 'left', right: 'right', up: 'up', down: 'down'})); updateFcts.push(generateControls(blueSphere, {left: 'a', right: 'd', up: 'w', down: 's'})); worldX.start(); }; initScene(); remove worldX.start

Refactoring: resetScene var resetScene = function () { resetSphere(redSphere); resetSphere(blueSphere);
};

Refactoring: resetSphere var resetSphere = function (target) { target.body.position.x =
target.body.initPosition.x; target.body.position.y = target.body.initPosition.y; target.body.position.z = target.body.initPosition.z; target.body.velocity.x = 0; target.body.velocity.y = 0; target.body.velocity.z = 0; };

Play it Find a friend nearby

Commit

Experiment

Moving forward https://stemkoski.github.io/Three.js/ http://www.threejsgames.com/extensions/

Moving with grace http://cujojs.com/ https://github.com/cujojs/wire https://github.com/umdjs/umd http://gulpjs.com/

Moving with grace (2)

THANK YOU!

NOVIE - Workshop

NOVIE - Workshop

More Decks by Vlad Goran

Other Decks in Programming

Featured

Transcript