Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Threedee Tales From Urban Bohemia

Vicent Martí
July 07, 2013
Programming
2
720

Threedee Tales From Urban Bohemia

An introduction to 3D graphics on the web using WebGL.

Vicent Martí

July 07, 2013
Tweet

More Decks by Vicent Martí

See All by Vicent Martí
Unicorns Die With Bullets Made of Glitter
tanoku
5
500
My Mom told me that Git doesn't scale
tanoku
28
1.8k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Ruby is Unlike a Banana
tanoku
97
11k
Oh, you're so random
tanoku
14
2.5k
A talk about libgit2
tanoku
11
1.6k

Other Decks in Programming

See All in Programming
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
AHC041解説
terryu16
0
590
DROBEの生成AI活用事例 with AWS
ippey
0
130
Introduction to kotlinx.rpc
arawn
0
630
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Ruby on cygwin 2025-02
fd0
0
140
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
Honoとフロントエンドの 型安全性について
yodaka
4
250
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110

Featured

See All Featured
Why Our Code Smells
bkeepers
PRO
335
57k
A Philosophy of Restraint
colly
203
16k
Site-Speed That Sticks
csswizardry
3
370
Designing for Performance
lara
604
68k
Building Your Own Lightsaber
phodgson
104
6.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k

Transcript

  1. None

  2. 3D is hard

  3. We’re building a videogame

  4. We’re building a videogame

  5. None
  6. None
  7. None

  8. (You are being a smartass)

  9. None

  10. WHAT?

  11. WebGL is A JavaScript API to render graphics accessing directly

    the GPU

  12. WebGL is not An API for 3D graphics

  13. WebGL is not An OpenGL Wrapper

  14. angle angle OpenGL ES 2.0 to DirectX 9 translation

  15. angle angle OpenGL ES 2.0 to DirectX 9 translation

  16. WHERE?

  17. None

  18. DIV

  19. CANVAS DIV

  20. WebGL context CANVAS “webgl” .getContext(“webgl”) WebGL context the

  21. WebGL context WebGL context(s) a b a.getContext(“webg b.getContext(“webg

  22. WHEN?

  23. DRAW DRAW DRAW DRAW DRAW DRAW DRAW DRAW Not when

    you want to

  24. When the browser tells you to.

  25. When the browser tells you to. requestAnimationFrame

  26. BRO WHAT ABOUT DOUBLE BUFFERING

  27. None

  28. Tearing

  29. Buffer A Buffer B

  30. Buffer A Buffer B

  31. Buffer A Buffer B

  32. JavaScript doesn’t execute while the DOM is being rendered!

  33. JavaScript doesn’t execute while the DOM is being rendered!

  34. HOW?

  35. Introducing... Jimmy the Vertex

  36. I’m not looking forward to this...

  37. (x, y, z)

  38. +x +y +z RIGHT HAND REPRESENT

  39. None
  40. None
  41. None

  42. Local Space

  43. World Space

  44. Camera Space

  45. Camera Space

  46. Screen Space

  47. xx xy xz Yx Yy Yz Zx Zy Zz {

    } World Space Local Space Model Matrix

  48. xx xy xz Yx Yy Yz Zx Zy Zz {

    } Camera Space World Space View Matrix

  49. xx xy xz Yx Yy Yz Zx Zy Zz {

    } Screen Space Camera Space Projection Matrix

  50. We could do the matrix operations in JavaScript

  51. We could do the matrix operations in JavaScript BUT WE

    DON’T

  52. SHADER is a program that runs on the GPU. SHADER

    a

  53. (THAT WAS EASY)

  54. N N It begins with an...

  55. OT JAVASCRIPT N N It begins with an...

  56. GLSL GLSL OpenGL Shader Language

  57. 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); }

  58. 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 THIS KINDA LOOKS LIKE JAVASCRIPT WELL THIS KINDA LOOKS LIKE JAVASCRIPT

  59. 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); }

  60. 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); } “

  61. 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); } <script id="fragment-shader" type="x-shader/x-fragment"> </script>

  62. document.getElementById document.getElementById

  63. GLSL GLSL GLSL compile compile compile link

  64. xx xy xz Yx Yy Yz Zx Zy Zz {

    } xx xy xz Yx Yy Yz Zx Zy Zz { } Perspective Matrix Model View Matrix

  65. attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void

    main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); }

  66. attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void

    main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); } Output

  67. attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void

    main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); } Output Uniforms

  68. attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void

    main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); } Output Uniforms Attribute
  69. None
  70. None

  71. xx xy xz Yx Yy Yz Zx Zy Zz {

    } xx xy xz Yx Yy Yz Zx Zy Zz { } Passing Uniforms var ptr = gl.getUniformLocation(shaderProgram, "uPMatrix") gl.uniformMatrix4fv( ptr, false, new Float32Array(vertexes));
  72. None

  73. -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

  74. -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

  75. -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

  76. -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

  77. -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

  78. 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,0 1,0,0 0,1,1 1,0,1 1,1,1 Passing Vertices

  79. 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,0 1,0,0 0,1,1 1,0,1 1,1,1 Passing Vertices

  80. xx xy xz Yx Yy Yz Zx Zy Zz {

    } xx xy xz Yx Yy Yz Zx Zy Zz { } Uniforms gl_Position 0,1,0 1,0,0 0,1,1 1,0,1 1,1,1 [aVertexPosition] drawArrays*

  81. xx xy xz Yx Yy Yz Zx Zy Zz {

    } xx xy xz Yx Yy Yz Zx Zy Zz { } Uniforms gl_Position 0,1,0 1,0,0 0,1,1 1,0,1 1,1,1 [aVertexPosition] drawArrays*

  82. xx xy xz Yx Yy Yz Zx Zy Zz {

    } xx xy xz Yx Yy Yz Zx Zy Zz { } Uniforms gl_Position 0,1,0 1,0,0 0,1,1 1,0,1 1,1,1 [aVertexPosition] drawArrays*

  83. xx xy xz Yx Yy Yz Zx Zy Zz {

    } xx xy xz Yx Yy Yz Zx Zy Zz { } Uniforms gl_Position 0,1,0 1,0,0 0,1,1 1,0,1 1,1,1 [aVertexPosition] drawArrays*

  84. xx xy xz Yx Yy Yz Zx Zy Zz {

    } xx xy xz Yx Yy Yz Zx Zy Zz { } Uniforms gl_Position 0,1,0 1,0,0 0,1,1 1,0,1 1,1,1 [aVertexPosition] drawArrays*

  85. Rasterization

  86. None
  87. None

  88. Fragments

  89. Fragment Shader varying lowp vec4 vColor; void main(void) { gl_FragColor

    = vColor; }

  90. Fragment Shader varying lowp vec4 vColor; void main(void) { gl_FragColor

    = vColor; } Output

  91. Fragment Shader varying lowp vec4 vColor; void main(void) { gl_FragColor

    = vColor; } Output Variant

  92. Variants Vertex Shader Fragment Shader

  93. None
  94. None

  95. Color

  96. Color Texture

  97. Color Texture Lighting

  98. Color Texture Lighting Specularity

  99. Color Texture Lighting Specularity Normal Mapping

  100. Color Texture Lighting Specularity Normal Mapping ...

  101. Clear Canvas Load Perspective M atrixes Load O bject M

    atrixes Render O bject
  102. None

  103. Three.js https://github.com/mrdoob/three.js A.K.A. use

  104. 3D is hard

  105. 3D is hard hard to understand

  106. 3D is hard hard to understand hard to learn

  107. Hard to get right

  108. But we need to try

  109. None

  110. twitter.com/vmg github.com/vmg

  111. 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/