| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html><head> | |
| 3 <meta charset="utf-8"> | |
| 4 | |
| 5 <title>OpenGL for the web</title> | |
| 6 | |
| 7 <script type="application/x-javascript" src="../util.js"></script> | |
| 8 | |
| 9 <script type="application/x-javascript"> | |
| 10 | |
| 11 function log(msg) { | |
| 12 document.getElementById('note').textContent += "\n"+msg; | |
| 13 } | |
| 14 | |
| 15 | |
| 16 | |
| 17 | |
| 18 function init(ev) { | |
| 19 var canvas = document.getElementById('canvas'); | |
| 20 var gl = canvas.getContext(GL_CONTEXT_ID); | |
| 21 | |
| 22 var shader = new Shader(gl, "ppix-vert", "ppix-frag"); | |
| 23 shader.compile(); | |
| 24 var fbo = new FBO(gl, canvas.width, canvas.height); | |
| 25 var fbo2 = new FBO(gl, canvas.width, canvas.height); | |
| 26 var fbo3 = new FBO(gl, canvas.width, canvas.height); | |
| 27 var depth = new Shader(gl, "depth-vert", "depth-frag"); | |
| 28 var identity = new Filter(gl, "identity-vert", "identity-frag"); | |
| 29 var unpremult = new Filter(gl, "identity-vert", "unpremult-frag"); | |
| 30 var hblur = new Filter(gl, "identity-vert", "hblur-frag"); | |
| 31 var vblur = new Filter(gl, "identity-vert", "vblur-frag"); | |
| 32 var hdof = new Filter(gl, "identity-vert", "hdof-frag"); | |
| 33 var vdof = new Filter(gl, "identity-vert", "vdof-frag"); | |
| 34 | |
| 35 redraw(canvas, gl, shader, fbo, fbo2, fbo3, depth, identity, unpremult, hblu
r, vblur, hdof, vdof); | |
| 36 | |
| 37 setInterval(function(){ | |
| 38 redraw(canvas, gl, shader, fbo, fbo2, fbo3, depth, identity, unpremult,
hblur, vblur, hdof, vdof); | |
| 39 }, 33); | |
| 40 } | |
| 41 | |
| 42 function drawCube (gl, shader, angle, axis, x,y,z, s, va, na, ta) { | |
| 43 Matrix.copyMatrix(look, vmat); | |
| 44 Matrix.translate3InPlace(x,y,z,vmat); | |
| 45 Matrix.scale1InPlace(s,vmat); | |
| 46 Matrix.rotateInPlace(angle, axis, vmat); | |
| 47 | |
| 48 // Note: we could just use mat3(MVMatrix) as the normal matrix | |
| 49 // as MVMatrix has only rotations, translations and uniform scaling | |
| 50 // <=> MVMatrix is a scaled orthonormal matrix | |
| 51 // hence normalize(mat3(MVMatrix)*v) == normalize(mat3(transpose(inverse(MVM
atrix))*v) | |
| 52 // | |
| 53 // But let's do it the hard way to see if Matrix.inverse3x3 works... | |
| 54 Matrix.inverseTo3x3InPlace(vmat, nmat); | |
| 55 Matrix.transpose3x3InPlace(nmat); | |
| 56 | |
| 57 shader.uniformMatrix4fv("MVMatrix", vmat); | |
| 58 shader.uniformMatrix3fv("NMatrix", nmat); | |
| 59 | |
| 60 var cube = Cube.getCachedVBO(gl); | |
| 61 cube.draw(va, na, ta); | |
| 62 } | |
| 63 | |
| 64 var carr = []; | |
| 65 for (var i=0; i<25; i++) { | |
| 66 carr.push([Math.random(), Math.random(), Math.random()]); | |
| 67 } | |
| 68 | |
| 69 function drawScene (gl, shader, va, na, ta) { | |
| 70 var ot = new Date().getTime(); | |
| 71 var t = ot; | |
| 72 | |
| 73 shader.uniformMatrix4fv("PMatrix", pmat); | |
| 74 for (var i=0; i<carr.length; i++){ | |
| 75 var c = carr[i]; | |
| 76 var f = c[1] < 0.5 ? 1 : -1; | |
| 77 var t = ot; | |
| 78 drawCube(gl, shader, | |
| 79 (t/(f*400*(c[0]+0.5))) % (2*Math.PI), c, | |
| 80 | |
| 81 0.45+0.8*c[2], | |
| 82 -0.4+Math.cos((i/carr.length*Math.PI*2)+t/1000), | |
| 83 0.8+Math.sin((i/carr.length*Math.PI*2)+t/1000)*3.2, | |
| 84 | |
| 85 0.05 + Math.pow((c[0]+c[1]+c[2])*0.33, 2)*0.3, | |
| 86 va, na, ta); | |
| 87 } | |
| 88 } | |
| 89 | |
| 90 var nmat = Matrix.newIdentity3x3(); | |
| 91 var vmat = Matrix.newIdentity(); | |
| 92 var vmat2 = Matrix.newIdentity(); | |
| 93 var pmat = null; | |
| 94 var look = Matrix.lookAt([4,-1,8], [-0.2,0,0], [0,1,0]); | |
| 95 var useDoF = false; | |
| 96 | |
| 97 var firstFrame = true; | |
| 98 | |
| 99 function redraw(canvas, gl, shader, fbo, fbo2, fbo3, depth, identity, unpremult,
hblur, vblur, hdof, vdof) { | |
| 100 | |
| 101 var doDoF = useDoF; | |
| 102 gl.viewport(0, 0, canvas.width, canvas.height); | |
| 103 gl.clearColor(0.0, 0.0, 0.0, 0.0); | |
| 104 gl.enable(gl.DEPTH_TEST); | |
| 105 | |
| 106 gl.bindFramebuffer(gl.FRAMEBUFFER, null); | |
| 107 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); | |
| 108 | |
| 109 fbo.use(); | |
| 110 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); | |
| 111 | |
| 112 shader.use(); | |
| 113 | |
| 114 var va = shader.attrib("Vertex"); | |
| 115 var na = shader.attrib("Normal"); | |
| 116 var ta = shader.attrib("Tex"); | |
| 117 | |
| 118 if (pmat == null) | |
| 119 pmat = Matrix.perspective(30, canvas.width/canvas.height, 1, 100); | |
| 120 | |
| 121 shader.uniform4f("MaterialSpecular", 0.95, 0.9, 0.6, 1); | |
| 122 shader.uniform4f("MaterialDiffuse", 0.50, 0.35, 0.35, 1); | |
| 123 shader.uniform4f("MaterialAmbient", 0.0, 0.1, 0.2, 1); | |
| 124 shader.uniform1f("MaterialShininess", 1.5); | |
| 125 | |
| 126 shader.uniform4f("GlobalAmbient", 0.1, 0.1, 0.1, 1); | |
| 127 | |
| 128 shader.uniform4f("LightPos", 1, 5, 3, 1.0); | |
| 129 | |
| 130 shader.uniform4f("LightSpecular", 0.9, 0.9, 0.9, 1); | |
| 131 shader.uniform4f("LightDiffuse", 0.8, 0.8, 0.8, 1); | |
| 132 shader.uniform4f("LightAmbient", 0.0, 0.06, 0.2, 1); | |
| 133 shader.uniform1f("LightConstantAtt", 0.0); | |
| 134 shader.uniform1f("LightLinearAtt", 0.1); | |
| 135 shader.uniform1f("LightQuadraticAtt", 0.0); | |
| 136 | |
| 137 drawScene(gl, shader, va, na); | |
| 138 | |
| 139 if (doDoF || firstFrame) { | |
| 140 | |
| 141 fbo3.use(); | |
| 142 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); | |
| 143 depth.use(); | |
| 144 var dva = depth.attrib("Vertex"); | |
| 145 | |
| 146 drawScene(gl, depth, dva); | |
| 147 | |
| 148 gl.disable(gl.DEPTH_TEST); | |
| 149 gl.activeTexture(gl.TEXTURE1); | |
| 150 gl.bindTexture(gl.TEXTURE_2D, fbo3.texture); | |
| 151 gl.activeTexture(gl.TEXTURE0); | |
| 152 | |
| 153 | |
| 154 for (var i=0; i<3; i++) { | |
| 155 fbo2.use(); | |
| 156 gl.bindTexture(gl.TEXTURE_2D, fbo.texture); | |
| 157 | |
| 158 hdof.apply(function(f){ | |
| 159 f.uniform1i("Texture", 0); | |
| 160 f.uniform1i("Depth", 1); | |
| 161 f.uniform1f("iter", i); | |
| 162 f.uniform1f("step", 1.0/canvas.width); | |
| 163 }); | |
| 164 | |
| 165 fbo.use(); | |
| 166 gl.bindTexture(gl.TEXTURE_2D, fbo2.texture); | |
| 167 | |
| 168 vdof.apply(function(f){ | |
| 169 f.uniform1i("Texture", 0); | |
| 170 f.uniform1i("Depth", 1); | |
| 171 f.uniform1f("iter", i); | |
| 172 f.uniform1f("step", 1.0/canvas.width); | |
| 173 }); | |
| 174 } | |
| 175 | |
| 176 } | |
| 177 firstFrame = false; | |
| 178 | |
| 179 gl.bindFramebuffer(gl.FRAMEBUFFER, null); | |
| 180 | |
| 181 gl.activeTexture(gl.TEXTURE1); | |
| 182 gl.bindTexture(gl.TEXTURE_2D, null); | |
| 183 gl.activeTexture(gl.TEXTURE0); | |
| 184 gl.bindTexture(gl.TEXTURE_2D, fbo.texture); | |
| 185 | |
| 186 // The DoF blur blurs the color from the transparent black background with | |
| 187 // the cubes. To get rid of the border, we can treat it as premultiplied alp
ha. | |
| 188 // To see the problem, try replacing unpremult with identity. | |
| 189 unpremult.apply(function(f){ | |
| 190 f.uniform1i("Texture", 0); | |
| 191 }); | |
| 192 | |
| 193 } | |
| 194 | |
| 195 window.addEventListener("load", init, false); | |
| 196 </script> | |
| 197 | |
| 198 <script id="ppix-vert" type="x-shader/x-vertex"> | |
| 199 attribute vec3 Vertex; | |
| 200 attribute vec3 Normal; | |
| 201 attribute vec2 Tex; | |
| 202 | |
| 203 uniform mat4 PMatrix; | |
| 204 uniform mat4 MVMatrix; | |
| 205 uniform mat3 NMatrix; | |
| 206 | |
| 207 uniform vec4 MaterialAmbient; | |
| 208 uniform vec4 MaterialDiffuse; | |
| 209 | |
| 210 uniform vec4 LightAmbient; | |
| 211 uniform vec4 LightDiffuse; | |
| 212 | |
| 213 uniform vec4 GlobalAmbient; | |
| 214 | |
| 215 uniform vec4 LightPos; | |
| 216 | |
| 217 varying vec4 diffuse, ambientGlobal, ambient; | |
| 218 varying vec3 normal, lightDir, halfVector; | |
| 219 varying float dist; | |
| 220 | |
| 221 void main() | |
| 222 { | |
| 223 vec4 worldPos; | |
| 224 vec3 lightVector; | |
| 225 vec4 v = vec4(Vertex, 1.0); | |
| 226 | |
| 227 /* transform vertex normal into world space and normalize */ | |
| 228 normal = normalize(NMatrix * Normal); | |
| 229 | |
| 230 /* transform vertex into world space and compute the vector | |
| 231 from it to the light */ | |
| 232 worldPos = MVMatrix * v; | |
| 233 lightVector = vec3(LightPos - worldPos); | |
| 234 lightDir = normalize(lightVector); | |
| 235 dist = length(lightVector); | |
| 236 | |
| 237 /* Half-vector used in Blinn-Phong shading due to computational efficien
cy */ | |
| 238 halfVector = normalize(lightVector - vec3(worldPos)); | |
| 239 | |
| 240 diffuse = MaterialDiffuse * LightDiffuse; | |
| 241 | |
| 242 /* The ambient terms have been separated since one of them */ | |
| 243 /* suffers attenuation */ | |
| 244 ambient = MaterialAmbient * LightAmbient; | |
| 245 ambientGlobal = GlobalAmbient * MaterialAmbient; | |
| 246 | |
| 247 gl_Position = PMatrix * worldPos; | |
| 248 } | |
| 249 </script> | |
| 250 | |
| 251 <script id="ppix-frag" type="x-shader/x-fragment"> | |
| 252 precision mediump float; | |
| 253 | |
| 254 uniform vec4 LightSpecular; | |
| 255 uniform vec4 MaterialSpecular; | |
| 256 uniform float MaterialShininess; | |
| 257 | |
| 258 uniform float LightConstantAtt; | |
| 259 uniform float LightLinearAtt; | |
| 260 uniform float LightQuadraticAtt; | |
| 261 | |
| 262 varying vec4 diffuse,ambientGlobal, ambient; | |
| 263 varying vec3 normal, lightDir, halfVector; | |
| 264 varying float dist; | |
| 265 | |
| 266 void main() | |
| 267 { | |
| 268 vec3 n, halfV, viewV, ldir; | |
| 269 float NdotL, NdotHV; | |
| 270 vec4 color = ambientGlobal; | |
| 271 float att; | |
| 272 | |
| 273 n = normalize(normal); | |
| 274 | |
| 275 NdotL = max(dot(n, normalize(lightDir)), 0.0); | |
| 276 | |
| 277 if (NdotL > 0.0) { | |
| 278 | |
| 279 att = 1.0 / (LightConstantAtt + LightLinearAtt * dist + LightQuadratic
Att * dist * dist); | |
| 280 | |
| 281 color += att * (diffuse * NdotL + ambient); | |
| 282 | |
| 283 halfV = normalize(halfVector); | |
| 284 NdotHV = max( dot(normal, halfV), 0.0 ); | |
| 285 | |
| 286 color += att * MaterialSpecular * LightSpecular * pow(NdotHV, Material
Shininess); | |
| 287 } | |
| 288 | |
| 289 gl_FragColor = color; | |
| 290 } | |
| 291 </script> | |
| 292 <script id="depth-vert" type="x-shader/x-vertex"> | |
| 293 attribute vec3 Vertex; | |
| 294 uniform mat4 PMatrix; | |
| 295 uniform mat4 MVMatrix; | |
| 296 varying float depth; | |
| 297 void main() | |
| 298 { | |
| 299 gl_Position = PMatrix * (MVMatrix * vec4(Vertex, 1.0)); | |
| 300 depth = 1.0-(gl_Position.z / gl_Position.w); | |
| 301 } | |
| 302 </script> | |
| 303 <script id="depth-frag" type="x-shader/x-fragment"> | |
| 304 precision mediump float; | |
| 305 | |
| 306 varying float depth; | |
| 307 void main() | |
| 308 { | |
| 309 vec4 c = vec4(depth, 0.0, 0.0, 1.0); | |
| 310 gl_FragColor = c; | |
| 311 } | |
| 312 </script> | |
| 313 | |
| 314 <script id="identity-vert" type="x-shader/x-vertex"> | |
| 315 attribute vec3 Vertex; | |
| 316 attribute vec2 Tex; | |
| 317 | |
| 318 varying vec4 texCoord0; | |
| 319 void main() | |
| 320 { | |
| 321 texCoord0 = vec4(Tex,0.0,0.0); | |
| 322 gl_Position = vec4(Vertex, 1.0); | |
| 323 } | |
| 324 </script> | |
| 325 <script id="identity-frag" type="x-shader/x-fragment"> | |
| 326 precision mediump float; | |
| 327 | |
| 328 uniform sampler2D Texture; | |
| 329 | |
| 330 varying vec4 texCoord0; | |
| 331 void main() | |
| 332 { | |
| 333 vec4 c = texture2D(Texture, texCoord0.st); | |
| 334 gl_FragColor = c; | |
| 335 } | |
| 336 </script> | |
| 337 <script id="premult-frag" type="x-shader/x-fragment"> | |
| 338 precision mediump float; | |
| 339 | |
| 340 uniform sampler2D Texture; | |
| 341 | |
| 342 varying vec4 texCoord0; | |
| 343 void main() | |
| 344 { | |
| 345 vec4 c = texture2D(Texture, texCoord0.st); | |
| 346 float a = c.a; | |
| 347 c *= a; | |
| 348 c.a = a; | |
| 349 gl_FragColor = c; | |
| 350 } | |
| 351 </script> | |
| 352 <script id="unpremult-frag" type="x-shader/x-fragment"> | |
| 353 precision mediump float; | |
| 354 | |
| 355 uniform sampler2D Texture; | |
| 356 | |
| 357 varying vec4 texCoord0; | |
| 358 void main() | |
| 359 { | |
| 360 vec4 c = texture2D(Texture, texCoord0.st); | |
| 361 float a = c.a; | |
| 362 c /= a; | |
| 363 c.a = a; | |
| 364 gl_FragColor = c; | |
| 365 } | |
| 366 </script> | |
| 367 | |
| 368 <script id="hblur-frag" type="x-shader/x-fragment"> | |
| 369 precision mediump float; | |
| 370 | |
| 371 uniform sampler2D Texture; | |
| 372 uniform float step; | |
| 373 float kernel[7] = float[](0.046, 0.111, 0.202, 0.283, 0.202, 0.111, 0.046)
; | |
| 374 | |
| 375 varying vec4 texCoord0; | |
| 376 void main() | |
| 377 { | |
| 378 int i=0; | |
| 379 if (texture2D(Texture, texCoord0.st).a > 0.0) { | |
| 380 vec4 sum = vec4(0.0); | |
| 381 for (i=0; i<7; i++) { | |
| 382 vec4 tmp = texture2D(Texture, texCoord0.st + vec2(i*step,0)); | |
| 383 sum += tmp * kernel[i]; | |
| 384 } | |
| 385 gl_FragColor = sum; | |
| 386 } else { | |
| 387 gl_FragColor = texture2D(Texture, texCoord0.st); | |
| 388 } | |
| 389 } | |
| 390 </script> | |
| 391 <script id="vblur-frag" type="x-shader/x-fragment"> | |
| 392 precision mediump float; | |
| 393 | |
| 394 uniform sampler2D Texture; | |
| 395 uniform float step; | |
| 396 float kernel[7] = float[](0.046, 0.111, 0.202, 0.283, 0.202, 0.111, 0.046)
; | |
| 397 | |
| 398 varying vec4 texCoord0; | |
| 399 void main() | |
| 400 { | |
| 401 int i=0; | |
| 402 if (texture2D(Texture, texCoord0.st).a > 0.0) { | |
| 403 vec4 sum = vec4(0.0); | |
| 404 for (i=0; i<7; i++) { | |
| 405 vec4 tmp = texture2D(Texture, texCoord0.st + vec2(0,i*step)); | |
| 406 sum += tmp * kernel[i]; | |
| 407 } | |
| 408 gl_FragColor = sum; | |
| 409 } else { | |
| 410 gl_FragColor = texture2D(Texture, texCoord0.st); | |
| 411 } | |
| 412 } | |
| 413 </script> | |
| 414 <script id="hdof-frag" type="x-shader/x-fragment"> | |
| 415 precision mediump float; | |
| 416 | |
| 417 uniform sampler2D Texture; | |
| 418 uniform sampler2D Depth; | |
| 419 uniform float step; | |
| 420 uniform float iter; | |
| 421 float kernel[7] = { 0.046, 0.111, 0.202, 0.283, 0.202, 0.111, 0.046 }; | |
| 422 | |
| 423 varying vec4 texCoord0; | |
| 424 void main() | |
| 425 { | |
| 426 vec4 tmp; | |
| 427 vec4 sum = vec4(0.0); | |
| 428 bool b = (iter < -26.0+36.0*(1.0-texture2D(Depth, texCoord0.st).r) && te
xture2D(Texture, texCoord0.st).a > 0.0); | |
| 429 tmp = texture2D(Texture, texCoord0.st + vec2(float(0-3)*step,0)); | |
| 430 sum += tmp * kernel[0]; | |
| 431 tmp = texture2D(Texture, texCoord0.st + vec2(float(1-3)*step,0)); | |
| 432 sum += tmp * kernel[1]; | |
| 433 tmp = texture2D(Texture, texCoord0.st + vec2(float(2-3)*step,0)); | |
| 434 sum += tmp * kernel[2]; | |
| 435 tmp = texture2D(Texture, texCoord0.st + vec2(float(3-3)*step,0)); | |
| 436 sum += tmp * kernel[3]; | |
| 437 tmp = texture2D(Texture, texCoord0.st + vec2(float(4-3)*step,0)); | |
| 438 sum += tmp * kernel[4]; | |
| 439 tmp = texture2D(Texture, texCoord0.st + vec2(float(5-3)*step,0)); | |
| 440 sum += tmp * kernel[5]; | |
| 441 tmp = texture2D(Texture, texCoord0.st + vec2(float(6-3)*step,0)); | |
| 442 sum += tmp * kernel[6]; | |
| 443 gl_FragColor = mix(texture2D(Texture, texCoord0.st), sum, b ? 1.0 : 0.0)
; | |
| 444 } | |
| 445 </script> | |
| 446 <script id="vdof-frag" type="x-shader/x-fragment"> | |
| 447 precision mediump float; | |
| 448 | |
| 449 uniform sampler2D Texture; | |
| 450 uniform sampler2D Depth; | |
| 451 uniform float step; | |
| 452 uniform float iter; | |
| 453 float kernel[7] = float[7](0.046, 0.111, 0.202, 0.283, 0.202, 0.111, 0.046
); | |
| 454 | |
| 455 varying vec4 texCoord0; | |
| 456 void main() | |
| 457 { | |
| 458 vec4 tmp; | |
| 459 vec4 sum = vec4(0.0); | |
| 460 bool b = (iter < -26.0+36.0*(1.0-texture2D(Depth, texCoord0.st).r) && te
xture2D(Texture, texCoord0.st).a > 0.0); | |
| 461 tmp = texture2D(Texture, texCoord0.st + vec2(0,float(0-3)*step)); | |
| 462 sum += tmp * kernel[0]; | |
| 463 tmp = texture2D(Texture, texCoord0.st + vec2(0,float(1-3)*step)); | |
| 464 sum += tmp * kernel[1]; | |
| 465 tmp = texture2D(Texture, texCoord0.st + vec2(0,float(2-3)*step)); | |
| 466 sum += tmp * kernel[2]; | |
| 467 tmp = texture2D(Texture, texCoord0.st + vec2(0,float(3-3)*step)); | |
| 468 sum += tmp * kernel[3]; | |
| 469 tmp = texture2D(Texture, texCoord0.st + vec2(0,float(4-3)*step)); | |
| 470 sum += tmp * kernel[4]; | |
| 471 tmp = texture2D(Texture, texCoord0.st + vec2(0,float(5-3)*step)); | |
| 472 sum += tmp * kernel[5]; | |
| 473 tmp = texture2D(Texture, texCoord0.st + vec2(0,float(6-3)*step)); | |
| 474 sum += tmp * kernel[6]; | |
| 475 gl_FragColor = mix(texture2D(Texture, texCoord0.st), sum, b ? 1.0 : 0.0)
; | |
| 476 } | |
| 477 </script> | |
| 478 | |
| 479 <style> | |
| 480 * { margin: 0px; padding: 0px; } | |
| 481 html { | |
| 482 background-color: #707888; | |
| 483 color: #222222; | |
| 484 } | |
| 485 #canvas { | |
| 486 position: absolute; | |
| 487 cursor: pointer; | |
| 488 top: 115px; left: 550px; | |
| 489 } | |
| 490 #note { | |
| 491 position: absolute; | |
| 492 top: 4px; | |
| 493 left: 4px; | |
| 494 } | |
| 495 #content { | |
| 496 margin-left: 99px; | |
| 497 padding-left: 8px; | |
| 498 padding-right: 8px; | |
| 499 padding-bottom: 16px; | |
| 500 width: 600px; | |
| 501 background-color: rgba(255,255,255,1.0); | |
| 502 text-align: center; | |
| 503 border-left: 1px solid rgba(0,0,0,0.5); | |
| 504 border-right: 2px solid rgba(0,0,0,0.75); | |
| 505 } | |
| 506 h1 { | |
| 507 padding-top: 24px; | |
| 508 padding-bottom: 16px; | |
| 509 margin-bottom: 24px; | |
| 510 border-bottom: 1px solid black; | |
| 511 font-family: Times New Roman, Serif; | |
| 512 font-weight: bold; | |
| 513 font-size: 40px; | |
| 514 } | |
| 515 #content p { | |
| 516 text-indent: 24px; | |
| 517 margin-left: 24px; | |
| 518 margin-right: 32px; | |
| 519 text-align: justify; | |
| 520 font-family: Serif; | |
| 521 padding-bottom: 16px; | |
| 522 } | |
| 523 #above { | |
| 524 position: absolute; | |
| 525 top: 300px; | |
| 526 left: 716px; | |
| 527 padding: 10px 20px; | |
| 528 background-color: rgba(0,225,0,0.5); | |
| 529 border-left: 2px solid rgba(0,64,0,0.75); | |
| 530 color: white; | |
| 531 font-size: small; | |
| 532 font-family: sans-serif; | |
| 533 } | |
| 534 #above p { | |
| 535 text-align: center; | |
| 536 } | |
| 537 </style> | |
| 538 | |
| 539 </head><body> | |
| 540 <canvas id="canvas" width="400" height="400" title="Click to toggle DOF shad
er" onclick="useDoF = !useDoF"></canvas> | |
| 541 <pre id="note"></pre> | |
| 542 | |
| 543 <div id="content"> | |
| 544 <h1>OpenGL for the web</h1> | |
| 545 <p> | |
| 546 The WebGL specification gives web developers access to an | |
| 547 OpenGL ES 2.0 drawing context for the canvas tag. What that means is | |
| 548 that you can finally harness the power of the GPU for awesome visuals | |
| 549 and heavy-duty number crunching in your web apps. </p><p> OpenGL ES 2.0 is a sub
set of OpenGL 2.0 aimed at embedded | |
| 550 devices and game consoles. As such, it's a very minimalistic low-level | |
| 551 API, even more so than desktop OpenGL. In fact, if you took desktop | |
| 552 OpenGL and stripped out everything but shaders, vertex arrays and | |
| 553 textures, you'd get something quite like OpenGL ES 2.0. </p> | |
| 554 <p> | |
| 555 As there is no fixed-function pipeline, you need to write GLSL shaders to
draw <i>anything</i>. | |
| 556 And you need to do your own transformation math, including keeping | |
| 557 track of the transformation matrix stack. So the raw API is really not | |
| 558 for the faint of heart; you do need to know your 3D math and shading | |
| 559 equations. </p> | |
| 560 <p> For example, to draw the spinning cubes on the | |
| 561 right - around 200 lines of application code, 250 lines of shaders and | |
| 562 800 lines of library code - I had to scrounge the internet for <a href="http://w
ww.lighthouse3d.com/opengl/glsl/index.php?pointlight">GLSL shaders</a> | |
| 563 to do the transformation and lighting, write a small matrix math | |
| 564 library in JavaScript and a DOF blur shader. While highly educational, | |
| 565 it was also a rather steep hill to climb. </p> | |
| 566 <p> So, the intended audience of the raw context | |
| 567 interface are not really end-users, but library developers who can | |
| 568 write easy-to-use interfaces to the functionality, and 3D developers | |
| 569 who require a high level of control over the rendering pipeline. </p> | |
| 570 <p> The really cool thing about the OpenGL Canvas is | |
| 571 that it doesn't make policy decisions. There's no single set-in-stone | |
| 572 use case for it: In addition to 3D graphics, you can also use it for | |
| 573 filtering images, visualizing fluid dynamics, doing real-time video | |
| 574 effects, or just crunching a whole lot of FP math. If you can do it on | |
| 575 the GPU, you're in luck! </p> | |
| 576 </div> | |
| 577 <div id="above"> | |
| 578 <p>You can also place content above the canvas</p> | |
| 579 </div> | |
| 580 </body></html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 8344024:
Remove older revision of webgl conformance tests. (Closed)
Base URL: svn://chrome-svn/chrome/trunk/deps/third_party/webgl/sdk/tests/