=^.^=
var width = window.innerWidth,
height = window.innerHeight;
!
var scene = new THREE.Scene();
!
var camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
camera.position.set( 0, 0, 3 );
!
var renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );
!
Slide 42
Slide 42 text
=^.^=
var width = window.innerWidth,
height = window.innerHeight;
!
var scene = new THREE.Scene();
!
var camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
camera.position.set( 0, 0, 3 );
!
var renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );
!
load pixi.js
Slide 43
Slide 43 text
var width = window.innerWidth,
height = window.innerHeight;
!
var scene = new THREE.Scene();
!
var camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
camera.position.set( 0, 0, 3 );
!
var renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );
!
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1, 1 ).normalize();
scene.add( directionalLight );
!
var box = new THREE.Mesh(
new THREE.BoxGeometry( 1, 1, 1 ),
new THREE.MeshPhongMaterial( { color: 0xff0000 } )
);
make a scene
Slide 44
Slide 44 text
var width = window.innerWidth,
height = window.innerHeight;
!
var scene = new THREE.Scene();
!
var camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
camera.position.set( 0, 0, 3 );
!
var renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );
!
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1, 1 ).normalize();
scene.add( directionalLight );
!
var box = new THREE.Mesh(
new THREE.BoxGeometry( 1, 1, 1 ),
new THREE.MeshPhongMaterial( { color: 0xff0000 } )
);
make a camera
Slide 45
Slide 45 text
var scene = new THREE.Scene();
!
var camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
camera.position.set( 0, 0, 3 );
!
var renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );
!
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1, 1 ).normalize();
scene.add( directionalLight );
!
var box = new THREE.Mesh(
new THREE.BoxGeometry( 1, 1, 1 ),
new THREE.MeshPhongMaterial( { color: 0xff0000 } )
);
scene.add( box );
!
( function renderLoop () {
!
make a renderer
Slide 46
Slide 46 text
!
var renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );
!
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1, 1 ).normalize();
scene.add( directionalLight );
!
var box = new THREE.Mesh(
new THREE.BoxGeometry( 1, 1, 1 ),
new THREE.MeshPhongMaterial( { color: 0xff0000 } )
);
scene.add( box );
!
( function renderLoop () {
!
requestAnimationFrame( renderLoop );
box.rotation.y += 0.01;
renderer.render( scene, camera );
!
make a light
Slide 47
Slide 47 text
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1, 1 ).normalize();
scene.add( directionalLight );
!
var box = new THREE.Mesh(
new THREE.BoxGeometry( 1, 1, 1 ),
new THREE.MeshPhongMaterial( { color: 0xff0000 } )
);
scene.add( box );
!
( function renderLoop () {
!
requestAnimationFrame( renderLoop );
box.rotation.y += 0.01;
renderer.render( scene, camera );
!
} )();
!
Slide 48
Slide 48 text
scene.add( directionalLight );
!
var box = new THREE.Mesh(
new THREE.BoxGeometry( 1, 1, 1 ),
new THREE.MeshPhongMaterial( { color: 0xff0000 } )
);
scene.add( box );
!
( function renderLoop () {
!
requestAnimationFrame( renderLoop );
box.rotation.y += 0.01;
renderer.render( scene, camera );
!
} )();
!
• Sprite and spine animations
• Mouse and touch events
• Pixel manipulation with WebGL
• Custom shaders
and more
Slide 77
Slide 77 text
• Stage has been deprecated, now container
• Name spaces has been changed
• EventListener has been supported
• Color matrix has been changed to 5x4 from 4x4
and many changes
%JGGFSFODFTCFUXFFO7BOE7
• Less verbose initialization
• Math functions
That’s it!
Slide 97
Slide 97 text
WebGL is not PS4
Slide 98
Slide 98 text
• WebUI for 3D contents
Still not exist a lot
• Multiple devices
High-End Gaming PC, Laptop, Mobile and others
• Internet Connection
8IBUXFOFFEUPUIJOLBCPVU
Slide 99
Slide 99 text
• Number of polygons
esp. file size
• Texture size
• Resolution
• Number of Draw-calls
8IBUXFOFFEUPDBSFBCPVU
Slide 100
Slide 100 text
Like 3DS, PSP, PSVita
FYI: Playable characters in FINAL FANTASY TYPE-0 consist of
about 1000 tris and 76KB textures
http://hexadrive.jp/lab/case/1573/
Slide 101
Slide 101 text
Video games could be
great knowledge
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
WebVR
Slide 105
Slide 105 text
d = navigator.
getVRDevices()
Slide 106
Slide 106 text
d = navigator.
getVRDevices()
•d[ i ].VRDevice (Type of the device)
•d[ i ].VREyeParameters
•FOV
•eyeTranslation
•d[ i ].VRPositionState
•position
•velocity
•orientation
•angularVelocity
othres...