An introduction to 3D graphics on the web using WebGL.
View Slide
3D is hard
We’re building avideogame
(You are being a smartass)
WHAT?
WebGL isA JavaScript APIto render graphicsaccessing directly theGPU
WebGL is notAn API for 3Dgraphics
WebGL is notAn OpenGLWrapper
angleangleOpenGL ES 2.0to DirectX 9translation
WHERE?
DIV
CANVASDIV
WebGLcontextCANVAS “webgl”.getContext(“webgl”)WebGLcontextthe
WebGLcontextWebGLcontext(s)a b a.getContext(“webgb.getContext(“webg
WHEN?
DRAWDRAWDRAW DRAWDRAWDRAWDRAW DRAWNot when youwant to
When the browser tellsyou to.
When the browser tellsyou to.requestAnimationFrame
BRO WHAT ABOUTDOUBLE BUFFERING
Tearing
Buffer A Buffer B
JavaScript doesn’texecute while the DOMis being rendered!
HOW?
Introducing...Jimmythe Vertex
I’m not lookingforward to this...
(x, y, z)
+x+y+zRIGHT HAND REPRESENT
Local Space
World Space
Camera Space
Screen Space
xx xy xzYx Yy YzZx Zy Zz{ } WorldSpaceLocalSpaceModel Matrix
xx xy xzYx Yy YzZx Zy Zz{ } CameraSpaceWorldSpaceView Matrix
xx xy xzYx Yy YzZx Zy Zz{ } ScreenSpaceCameraSpaceProjection Matrix
We could do the matrixoperations in JavaScript
We could do the matrixoperations in JavaScriptBUT WEDON’T
SHADERis a program thatruns on the GPU.SHADERa
(THATWASEASY)
NNIt begins with an...
OTJAVASCRIPTNNIt begins with an...
GLSLGLSLOpenGLShader Language
precision highp float;varying vec2 t;varying vec2 pos;uniform float time;uniform vec2 mouse;uniform int mouseLeft;uniform sampler2D tex0;void main() {float v1 = (sin(t.s+time) + 1.0) / 2.0;float v2 = (cos(t.t+time) + 1.0) / 2.0;float d = distance(mouse, pos);vec2 tt = vec2(t.s+sin(time/10.0), t.t+cos(time/10.0));vec4 c1 = texture2D(tex0, tt) * 1.1;float avg = (c1.r+c1.g+c1.b)/3.0;float r = c1.r+v1*pow(avg,4.0) - pow(d,pow(avg,2.0) +float(mouseLeft)*avg);float g = c1.g+v2*pow(avg,4.0) - pow(d,pow(avg,2.0) +float(mouseLeft)*avg);float b = c1.g - pow(d,pow(avg,2.0) +float(mouseLeft)*avg);gl_FragColor = vec4(r, g, b, 1.0);}
precision highp float;varying vec2 t;varying vec2 pos;uniform float time;uniform vec2 mouse;uniform int mouseLeft;uniform sampler2D tex0;void main() {float v1 = (sin(t.s+time) + 1.0) / 2.0;float v2 = (cos(t.t+time) + 1.0) / 2.0;float d = distance(mouse, pos);vec2 tt = vec2(t.s+sin(time/10.0), t.t+cos(time/10.0));vec4 c1 = texture2D(tex0, tt) * 1.1;float avg = (c1.r+c1.g+c1.b)/3.0;float r = c1.r+v1*pow(avg,4.0) - pow(d,pow(avg,2.0) +float(mouseLeft)*avg);float g = c1.g+v2*pow(avg,4.0) - pow(d,pow(avg,2.0) +float(mouseLeft)*avg);float b = c1.g - pow(d,pow(avg,2.0) +float(mouseLeft)*avg);gl_FragColor = vec4(r, g, b, 1.0);}WELL THISKINDALOOKS LIKEJAVASCRIPTWELL THISKINDALOOKS LIKEJAVASCRIPT
precision highp float;varying vec2 t;varying vec2 pos;uniform float time;uniform vec2 mouse;uniform int mouseLeft;uniform sampler2D tex0;void main() {float v1 = (sin(t.s+time) + 1.0) / 2.0;float v2 = (cos(t.t+time) + 1.0) / 2.0;float d = distance(mouse, pos);vec2 tt = vec2(t.s+sin(time/10.0), t.t+cos(time/10.0));vec4 c1 = texture2D(tex0, tt) * 1.1;float avg = (c1.r+c1.g+c1.b)/3.0;float r = c1.r+v1*pow(avg,4.0) - pow(d,pow(avg,2.0) +float(mouseLeft)*avg);float g = c1.g+v2*pow(avg,4.0) - pow(d,pow(avg,2.0) +float(mouseLeft)*avg);float b = c1.g - pow(d,pow(avg,2.0) +float(mouseLeft)*avg);gl_FragColor = vec4(r, g, b, 1.0);}“
precision highp float;varying vec2 t;varying vec2 pos;uniform float time;uniform vec2 mouse;uniform int mouseLeft;uniform sampler2D tex0;void main() {float v1 = (sin(t.s+time) + 1.0) / 2.0;float v2 = (cos(t.t+time) + 1.0) / 2.0;float d = distance(mouse, pos);vec2 tt = vec2(t.s+sin(time/10.0), t.t+cos(time/10.0));vec4 c1 = texture2D(tex0, tt) * 1.1;float avg = (c1.r+c1.g+c1.b)/3.0;float r = c1.r+v1*pow(avg,4.0) - pow(d,pow(avg,2.0) +float(mouseLeft)*avg);float g = c1.g+v2*pow(avg,4.0) - pow(d,pow(avg,2.0) +float(mouseLeft)*avg);float b = c1.g - pow(d,pow(avg,2.0) +float(mouseLeft)*avg);gl_FragColor = vec4(r, g, b, 1.0);}<br/>
document.getElementByIddocument.getElementById
GLSLGLSLGLSLcompilecompilecompile link
xx xy xzYx Yy YzZx Zy Zz{ }xx xy xzYx Yy YzZx Zy Zz{ }Perspective MatrixModel View Matrix
attribute vec3 aVertexPosition;uniform mat4 uMVMatrix;uniform mat4 uPMatrix;void main(void) {gl_Position = uPMatrix * uMVMatrix *vec4(aVertexPosition, 1.0);}
attribute vec3 aVertexPosition;uniform mat4 uMVMatrix;uniform mat4 uPMatrix;void main(void) {gl_Position = uPMatrix * uMVMatrix *vec4(aVertexPosition, 1.0);}Output
attribute vec3 aVertexPosition;uniform mat4 uMVMatrix;uniform mat4 uPMatrix;void main(void) {gl_Position = uPMatrix * uMVMatrix *vec4(aVertexPosition, 1.0);}OutputUniforms
attribute vec3 aVertexPosition;uniform mat4 uMVMatrix;uniform mat4 uPMatrix;void main(void) {gl_Position = uPMatrix * uMVMatrix *vec4(aVertexPosition, 1.0);}OutputUniformsAttribute
xx xy xzYx Yy YzZx Zy Zz{ }xx xy xzYx Yy YzZx Zy Zz{ } PassingUniformsvar ptr =gl.getUniformLocation(shaderProgram, "uPMatrix")gl.uniformMatrix4fv(ptr,false,new Float32Array(vertexes));
-1.0, -1.0, 1.0,1.0, -1.0, 1.0,1.0, 1.0, 1.0,-1.0, 1.0, 1.0,-1.0, -1.0, -1.0,-1.0, 1.0, -1.0,1.0, 1.0, -1.0,1.0, -1.0, -1.0,-1.0, 1.0, -1.0,-1.0, 1.0, 1.0,1.0, 1.0, 1.0,1.0, 1.0, -1.0,-1.0, -1.0, -1.0,1.0, -1.0, -1.0,Here come the vertices
cubeVertices = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertices);gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices), gl.STATIC_DRAW);gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertices);gl.vertexAttribPointer(vertexPositionAttribute, 3,gl.FLOAT, false, 0, 0);0,1,01,0,00,1,11,0,11,1,1Passing Vertices
xx xy xzYx Yy YzZx Zy Zz{ }xx xy xzYx Yy YzZx Zy Zz{ }Uniformsgl_Position0,1,01,0,00,1,11,0,11,1,1[aVertexPosition]drawArrays*
Rasterization
Fragments
FragmentShadervarying lowp vec4 vColor;void main(void) {gl_FragColor = vColor;}
FragmentShadervarying lowp vec4 vColor;void main(void) {gl_FragColor = vColor;}Output
FragmentShadervarying lowp vec4 vColor;void main(void) {gl_FragColor = vColor;}OutputVariant
VariantsVertexShaderFragmentShader
Color
ColorTexture
ColorTextureLighting
ColorTextureLightingSpecularity
ColorTextureLightingSpecularityNormalMapping
ColorTextureLightingSpecularityNormalMapping...
Clear CanvasLoadPerspectiveMatrixesLoadObject MatrixesRender Object
Three.jshttps://github.com/mrdoob/three.jsA.K.A. use
3D is hardhard to understand
3D is hardhard to understandhard to learn
Hard to get right
But we need to try
twitter.com/vmggithub.com/vmg
With demos from:http://wagerfield.github.io/flat-surface-shader/http://lab.aerotwist.com/webgl/surface/http://www.mrdoob.com/lab/javascript/beachballs/http://plumegraph.org/
tanoku
kishida
pangmoo
kinocoboy2
pocke
77web
masatoshiitoh
katsyoshi
syumai
mame
mot_techtalk
hpgrahsl
totokit4
iamctodd
philhawksworth
ufuk
danielanewman
lara
paigeccino
jmmastey
hatefulcrawdad
addyosmani
kneath
jrom
cassininazir