Using and understanding the senses
Knowing the tools and constraints
// Vertex shader program 3 var VSHADER_SOURCE = 4 'attribute vec4 a_Position;\n' + 5 'void main() {\n' + 6 ' gl_Position = a_Position;\n' + 7 '}\n'; 8 9 // Fragment shader program 10 var FSHADER_SOURCE = 11 'void main() {\n' + 12 ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 13 '}\n'; 14 15 function main() {... 19 // Get the rendering context for WebGL 20 var gl = getWebGLContext(canvas); ... 26 // Initialize shaders 27 if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {... 30 } 31 32 // Set the positions of vertices 33 var n = initVertexBuffers(gl); ... 39 // Set the color for clearing canvas ... 45 // Draw a triangle 46 gl.drawArrays (gl.TRIANGLES, 0, n); 47 } 48 49 function initVertexBuffers(gl) {50 var vertices = new Float32Array([51 0.0, 0.5, -0.5, -0.5, 0.5, -0.5 52 ]); 53 var n = 3; // The number of vertices ... 78 return n; 79 }
An environment to test and tinker
From concept to (Virtual) reality
sample-glsl-before.txt
Feedback and Polish
wrenr.github.io/graphics-presentation/