Low level APIs
using three.js
Presented by Akihiro Oyamada (@yomotsu)
Jul 6, 2015
Slide 2
Slide 2 text
Frontend Engineer
at PixelGrid, Inc.
@yomotsu
recent works
• http://yomotsu.github.io/walkthrough/
• http://yomotsu.github.io/xmas2014/
Akihiro Oyamada
Slide 3
Slide 3 text
three.js makes
WebGL easier
Slide 4
Slide 4 text
• Too lengthy initialization of WebGL
• Shaders in GLSL
• Math: Linear algebra, physics, etc
and others.
*USFEVDFT
Slide 5
Slide 5 text
You may think
that’s all?
Slide 6
Slide 6 text
You can also use
low level APIs,
like pure WebGL.
Slide 7
Slide 7 text
THREE.BufferGeometry
for attributes
Slide 8
Slide 8 text
THREE.ShaderMaterial and
THREE.RawShaderMaterial
for uniforms
and shaders in GLSL
Slide 9
Slide 9 text
sorry for a CHEAP figure, ive been having a cold…
Slide 10
Slide 10 text
var width = window.innerWidth;
var height = window.innerHeight;
var clock = new THREE.Clock();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 60, width / height, .1, 100 );
camera.position.set( 0, 0, 2 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );
!
!
var indices = new Uint16Array( [
0, 1, 2,
3, 4, 5
] );
!
var vertices = new Float32Array( [
-1, -1, 0,
1, -1, 0,
-1, 1, 0,
!
Slide 11
Slide 11 text
!
!
var indices = new Uint16Array( [
0, 1, 2,
3, 4, 5
] );
!
var vertices = new Float32Array( [
-1, -1, 0,
1, -1, 0,
-1, 1, 0,
!
-1, 1, 0,
1, -1, 0,
1, 1, 0
] );
!
var uvs = new Float32Array( [
0, 1,
1, 1,
0, 0,
!
0, 0,
Slide 12
Slide 12 text
!
!
var indexBuffer = new THREE.BufferAttribute( indices, 1 );
var vertexBuffer = new THREE.BufferAttribute( vertices, 3 );
var uvBuffer = new THREE.BufferAttribute( uvs, 2 );
!
!
var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'index', indexBuffer );
geometry.addAttribute( 'position', vertexBuffer );
geometry.addAttribute( 'uv', uvBuffer );
!
!
//
// You don't need to put following uniforms.
// modelMatrix is automatically linked to `mesh.matrixWorld`
// viewMatrix is automatically linked to `camera.matrixWorldInverse`
// projectionMatrix is automatically linked to `camera.projectionMatrix`
//
var uniforms = {
// modelMatrix : { type: 'm4', value: new THREE.Matrix4() },
// viewMatrix : { type: 'm4', value: new THREE.Matrix4() },
// projectionMatrix : { type: 'm4', value: new THREE.Matrix4() },
Slide 13
Slide 13 text
!
//
// You don't need to put following uniforms.
// modelMatrix is automatically linked to `mesh.matrixWorld`
// viewMatrix is automatically linked to `camera.matrixWorldInverse`
// projectionMatrix is automatically linked to `camera.projectionMatrix`
//
var uniforms = {
// modelMatrix : { type: 'm4', value: new THREE.Matrix4() },
// viewMatrix : { type: 'm4', value: new THREE.Matrix4() },
// projectionMatrix : { type: 'm4', value: new THREE.Matrix4() },
diffuse : { type: "t", value: THREE.ImageUtils.loadTexture( 'uv.png' ) }
};
!
var vertexShader = [
!
'attribute vec3 position;',
'attribute vec2 uv;',
!
'uniform mat4 projectionMatrix;',
'uniform mat4 viewMatrix;',
'uniform mat4 modelMatrix;',
!
!
!
var material = new THREE.RawShaderMaterial( {
vertexShader : vertexShader,
fragmentShader : fragmentShader,
attributes : {
// if you put custom attributes except
// positions, indices, normals, colors and UVs
// you need to declare those like
//
// vertexOpacity: { type: 'f', value: [] }
},
uniforms : uniforms,
defines : {}
} );
!
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
!
!
( function animate () {
!
requestAnimationFrame( animate );
!
Slide 17
Slide 17 text
!
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
!
!
( function animate () {
!
requestAnimationFrame( animate );
!
var theta = clock.getElapsedTime();
mesh.rotation.set( 0, theta, 0 );
!
renderer.render( scene, camera );
!
} )();
Slide 18
Slide 18 text
18
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
A gas-ish fluid object
in a MMO game
Slide 21
Slide 21 text
21
https://github.com/yomotsu/VolumetricFire
Fire in three.js using
THREE.BufferGeometry and
THREE.RawShaderMaterial
Slide 22
Slide 22 text
Extended build-in shades
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
In a MMO game what I play…
Similar to THREE.MeshPhongMaterial,
but edge of the model is different.
It seems, normal directions make it…