├── Appendix ├── ColoredTriangle.frag ├── ColoredTriangle.js ├── ColoredTriangle.vert ├── CoordinateSystem.html ├── CoordinateSystem.js ├── CoordinateSystem_viewVolume.html ├── CoordinateSystem_viewVolume.js ├── LoadShaderFromFiles.html └── LoadShaderFromFiles.js ├── ch02 ├── ClickedPoints.html ├── ClickedPoints.js ├── ColoredPoints.html ├── ColoredPoints.js ├── DrawRectangle.html ├── DrawRectangle.js ├── HelloCanvas.html ├── HelloCanvas.js ├── HelloPoint1.html ├── HelloPoint1.js ├── HelloPoint2.html └── HelloPoint2.js ├── ch03 ├── HelloQuad.html ├── HelloQuad.js ├── HelloQuad_FAN.html ├── HelloQuad_FAN.js ├── HelloTriangle.html ├── HelloTriangle.js ├── HelloTriangle_LINES.html ├── HelloTriangle_LINES.js ├── HelloTriangle_LINE_LOOP.html ├── HelloTriangle_LINE_LOOP.js ├── HelloTriangle_LINE_STRIP.html ├── HelloTriangle_LINE_STRIP.js ├── MultiPoint.html ├── MultiPoint.js ├── RotatedTriangle.html ├── RotatedTriangle.js ├── RotatedTriangle_Matrix.html ├── RotatedTriangle_Matrix.js ├── ScaledTriangle_Matrix.html ├── ScaledTriangle_Matrix.js ├── TranslatedTriangle.html └── TranslatedTriangle.js ├── ch04 ├── RotatedTranslatedTriangle.html ├── RotatedTranslatedTriangle.js ├── RotatedTriangle_Matrix4.html ├── RotatedTriangle_Matrix4.js ├── RotatingTranslatedTriangle.html ├── RotatingTranslatedTriangle.js ├── RotatingTriangle.html ├── RotatingTriangle.js ├── RotatingTriangle_withButtons.html ├── RotatingTriangle_withButtons.js ├── TranslatedRotatedTriangle.html └── TranslatedRotatedTriangle.js ├── ch05 ├── ColoredTriangle.html ├── ColoredTriangle.js ├── HelloTriangle_FragCoord.html ├── HelloTriangle_FragCoord.js ├── MultiAttributeColor.html ├── MultiAttributeColor.js ├── MultiAttributeSize.html ├── MultiAttributeSize.js ├── MultiAttributeSize_Interleaved.html ├── MultiAttributeSize_Interleaved.js ├── MultiTexture.html ├── MultiTexture.js ├── TexturedQuad.html ├── TexturedQuad.js ├── TexturedQuad_Clamp_Mirror.html ├── TexturedQuad_Clamp_Mirror.js ├── TexturedQuad_Repeat.html └── TexturedQuad_Repeat.js ├── ch07 ├── ColoredCube.html ├── ColoredCube.js ├── ColoredCube_singleColor.html ├── ColoredCube_singleColor.js ├── DepthBuffer.html ├── DepthBuffer.js ├── HelloCube.html ├── HelloCube.js ├── HelloCube_singleColor.html ├── HelloCube_singleColor.js ├── LookAtRotatedTriangles.html ├── LookAtRotatedTriangles.js ├── LookAtRotatedTriangles_mvMatrix.html ├── LookAtRotatedTriangles_mvMatrix.js ├── LookAtTriangles.html ├── LookAtTriangles.js ├── LookAtTrianglesWithKeys.html ├── LookAtTrianglesWithKeys.js ├── LookAtTrianglesWithKeys_ViewVolume.html ├── LookAtTrianglesWithKeys_ViewVolume.js ├── OrthoView.html ├── OrthoView.js ├── OrthoView_halfSize.html ├── OrthoView_halfSize.js ├── OrthoView_halfWidth.html ├── OrthoView_halfWidth.js ├── PerspectiveView.html ├── PerspectiveView.js ├── PerspectiveView_mvp.html ├── PerspectiveView_mvp.js ├── PerspectiveView_mvpMatrix.html ├── PerspectiveView_mvpMatrix.js ├── Zfighting.html └── Zfighting.js ├── ch08 ├── LightedCube.html ├── LightedCube.js ├── LightedCube_ambient.html ├── LightedCube_ambient.js ├── LightedCube_animation.html ├── LightedCube_animation.js ├── LightedCube_perFragment.html ├── LightedCube_perFragment.js ├── LightedTranslatedRotatedCube.html ├── LightedTranslatedRotatedCube.js ├── PointLightedCube.html ├── PointLightedCube.js ├── PointLightedCube_animation.html ├── PointLightedCube_animation.js ├── PointLightedCube_perFragment.html ├── PointLightedCube_perFragment.js ├── PointLightedSphere.html ├── PointLightedSphere.js ├── PointLightedSphere_perFragment.html └── PointLightedSphere_perFragment.js ├── ch09 ├── JointModel.html ├── JointModel.js ├── MultiJointModel.html ├── MultiJointModel.js ├── MultiJointModel_segment.html └── MultiJointModel_segment.js ├── ch10 ├── 3DoverWeb.html ├── 3DoverWeb.js ├── BlendedCube.html ├── BlendedCube.js ├── Fog.html ├── Fog.js ├── Fog_w.html ├── Fog_w.js ├── FramebufferObject.html ├── FramebufferObject.js ├── HUD.html ├── HUD.js ├── LookAtBlendedTriangles.html ├── LookAtBlendedTriangles.js ├── MQOParser.js ├── OBJViewer.html ├── OBJViewer.js ├── PickFace.html ├── PickFace.js ├── PickObject.html ├── PickObject.js ├── Picking.html ├── Picking.js ├── ProgramObject.html ├── ProgramObject.js ├── RotateObject.html ├── RotateObject.js ├── RotatingTriangle_contextLost.html ├── RotatingTriangle_contextLost.js ├── RoundedPoints.html ├── RoundedPoints.js ├── Shadow.html ├── Shadow.js ├── Shadow_highp.html ├── Shadow_highp.js ├── Shadow_highp_sphere.html ├── Shadow_highp_sphere.js ├── cube.mtl └── cube.obj ├── gifts ├── Particle.html ├── Particle.js ├── Printf.html ├── Printf.js ├── SpecularCube.html ├── SpecularCube.js ├── TextTexture.html ├── TextTexture.js ├── ThreeDUI.html ├── ThreeDUI.js ├── Wave.html ├── Wave.js ├── WorldCoordinate.html └── WorldCoordinate.js ├── lib ├── cuon-matrix.js ├── cuon-utils.js ├── webgl-debug.js └── webgl-utils.js └── resources ├── 3objects.mqo ├── 7herbs.JPG ├── blueflower.JPG ├── blueflower2.JPG ├── circle.gif ├── cube.mqo ├── cube.mtl ├── cube.obj ├── kaeru.mqo ├── lightblueflower.JPG ├── numbers.png ├── orange.JPG ├── parasol.jpg ├── particle.png ├── pinkflower.JPG ├── redflower.jpg ├── sky.JPG ├── sky_cloud.jpg ├── sky_roof.JPG ├── sphere.mqo ├── vase.mqo └── yellowflower.jpg /Appendix/ColoredTriangle.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif GL_ES 4 | varying vec4 v_Color; 5 | void main() { 6 | gl_FragColor = v_Color; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /Appendix/ColoredTriangle.js: -------------------------------------------------------------------------------- 1 | // ColoredTriangle.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute vec4 a_Color;\n' + 6 | 'varying vec4 v_Color;\n' + 7 | 'void main() {\n' + 8 | ' gl_Position = a_Position;\n' + 9 | ' v_Color = a_Color;\n' + 10 | '}\n'; 11 | 12 | // Fragment shader program 13 | var FSHADER_SOURCE = 14 | '#ifdef GL_ES\n' + 15 | 'precision mediump float;\n' + 16 | '#endif GL_ES\n' + 17 | 'varying vec4 v_Color;\n' + 18 | 'void main() {\n' + 19 | ' gl_FragColor = v_Color;\n' + 20 | '}\n'; 21 | 22 | function main() { 23 | // Retrieve element 24 | var canvas = document.getElementById('webgl'); 25 | 26 | // Get the rendering context for WebGL 27 | var gl = getWebGLContext(canvas); 28 | if (!gl) { 29 | console.log('Failed to get the rendering context for WebGL'); 30 | return; 31 | } 32 | 33 | // Initialize shaders 34 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 35 | console.log('Failed to intialize shaders.'); 36 | return; 37 | } 38 | 39 | // 40 | var n = initVertexBuffers(gl); 41 | if (n < 0) { 42 | console.log('Failed to set the vertex information'); 43 | return; 44 | } 45 | 46 | // Specify the color for clearing 47 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 48 | 49 | // Clear 50 | gl.clear(gl.COLOR_BUFFER_BIT); 51 | 52 | // Draw the rectangle 53 | gl.drawArrays(gl.TRIANGLES, 0, n); 54 | } 55 | 56 | function initVertexBuffers(gl) { 57 | var verticesColors = new Float32Array([ 58 | // Vertex coordinates and color 59 | 0.0, 0.5, 1.0, 0.0, 0.0, 60 | -0.5, -0.5, 0.0, 1.0, 0.0, 61 | 0.5, -0.5, 0.0, 0.0, 1.0, 62 | ]); 63 | var n = 3; 64 | 65 | // Create a buffer object 66 | var vertexColorBuffer = gl.createBuffer(); 67 | if (!vertexColorBuffer) { 68 | console.log('Failed to create the buffer object'); 69 | return false; 70 | } 71 | 72 | // 頂点の座標と色を設定し、有効化する 73 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); 74 | gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); 75 | 76 | var FSIZE = verticesColors.BYTES_PER_ELEMENT; 77 | //Get the storage location of a_Position, assign and enable buffer 78 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 79 | if (a_Position < 0) { 80 | console.log('Failed to get the storage location of a_Position'); 81 | return -1; 82 | } 83 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0); 84 | gl.enableVertexAttribArray(a_Position); // Enable the assignment of the buffer object 85 | 86 | // Get the storage location of a_Position, assign buffer and enable 87 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 88 | if(a_Color < 0) { 89 | console.log('Failed to get the storage location of a_Color'); 90 | return -1; 91 | } 92 | gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2); 93 | gl.enableVertexAttribArray(a_Color); // Enable the assignment of the buffer object 94 | 95 | return n; 96 | } 97 | -------------------------------------------------------------------------------- /Appendix/ColoredTriangle.vert: -------------------------------------------------------------------------------- 1 | attribute vec4 a_Position; 2 | attribute vec4 a_Color; 3 | varying vec4 v_Color; 4 | void main() { 5 | gl_Position = a_Position; 6 | v_Color = a_Color; 7 | } 8 | -------------------------------------------------------------------------------- /Appendix/CoordinateSystem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL-AppD-Co-ordinate system 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Appendix/CoordinateSystem.js: -------------------------------------------------------------------------------- 1 | // CoordinateSystem.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute vec4 a_Color;\n' + 6 | 'varying vec4 v_Color;\n' + 7 | 'void main() {\n' + 8 | ' gl_Position = a_Position;\n' + 9 | ' v_Color = a_Color;\n' + 10 | '}\n'; 11 | 12 | // Fragment shader program 13 | var FSHADER_SOURCE = 14 | '#ifdef GL_ES\n' + 15 | 'precision mediump float;\n' + 16 | '#endif\n' + 17 | 'varying vec4 v_Color;\n' + 18 | 'void main() {\n' + 19 | ' gl_FragColor = v_Color;\n' + 20 | '}\n'; 21 | 22 | function main() { 23 | var canvas = document.getElementById('webgl'); // Retrieve element 24 | var gl = getWebGLContext(canvas); // Get the rendering context for WebGL 25 | initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE); // Initialize shaders 26 | var n = initVertexBuffers(gl); // Set vertex coordinates and colors 27 | 28 | gl.clearColor(0.0, 0.0, 0.0, 1.0); // Specify the color for clearing 29 | gl.clear(gl.COLOR_BUFFER_BIT); // Clear 30 | gl.drawArrays(gl.TRIANGLES, 0, n); // Draw the triangles 31 | } 32 | 33 | function initVertexBuffers(gl) { 34 | var pc = new Float32Array([ // Vertex coordinates and color 35 | 0.0, 0.5, -0.1, 0.0, 0.0, 1.0, // The front blue one 36 | -0.5, -0.5, -0.1, 0.0, 0.0, 1.0, 37 | 0.5, -0.5, -0.1, 1.0, 1.0, 0.0, 38 | 39 | 0.5, 0.4, -0.5, 1.0, 1.0, 0.0, // The red triangle is behind 40 | -0.5, 0.4, -0.5, 1.0, 0.0, 0.0, 41 | 0.0, -0.6, -0.5, 1.0, 0.0, 0.0, 42 | ]); 43 | var numVertex = 3; var numColor = 3; var n = 6; 44 | 45 | // Create a buffer object and write data to it 46 | var pcbuffer = gl.createBuffer(); 47 | gl.bindBuffer(gl.ARRAY_BUFFER, pcbuffer); 48 | gl.bufferData(gl.ARRAY_BUFFER, pc, gl.STATIC_DRAW); 49 | 50 | var FSIZE = pc.BYTES_PER_ELEMENT; // The number of byte 51 | var STRIDE = numVertex + numColor;　// Stride 52 | 53 | // Assign the vertex coordinates to attribute variable and enable the assignment 54 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 55 | gl.vertexAttribPointer(a_Position, numVertex, gl.FLOAT, false, FSIZE * STRIDE, 0); 56 | gl.enableVertexAttribArray(a_Position); 57 | 58 | // Assign the vertex colors to attribute variable and enable the assignment 59 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 60 | gl.vertexAttribPointer(a_Color, numColor, gl.FLOAT, false, FSIZE * STRIDE, FSIZE * numVertex); 61 | gl.enableVertexAttribArray(a_Color); 62 | 63 | return n; 64 | } 65 | -------------------------------------------------------------------------------- /Appendix/CoordinateSystem_viewVolume.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL-AppD-Co-rdinate system (ViewVolume) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Appendix/CoordinateSystem_viewVolume.js: -------------------------------------------------------------------------------- 1 | // CoordinateSystem_viewVolume.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute vec4 a_Color;\n' + 6 | 'uniform mat4 u_MvpMatrix;\n' + 7 | 'varying vec4 v_Color;\n' + 8 | 'void main() {\n' + 9 | ' gl_Position = u_MvpMatrix * a_Position;\n' + 10 | ' v_Color = a_Color;\n' + 11 | '}\n'; 12 | 13 | // Fragment shader program 14 | var FSHADER_SOURCE = 15 | '#ifdef GL_ES\n' + 16 | 'precision mediump float;\n' + 17 | '#endif\n' + 18 | 'varying vec4 v_Color;\n' + 19 | 'void main() {\n' + 20 | ' gl_FragColor = v_Color;\n' + 21 | '}\n'; 22 | 23 | function main() { 24 | var canvas = document.getElementById('webgl'); // Retrieve element 25 | var gl = getWebGLContext(canvas); // Get the rendering context for WebGL 26 | initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE); // Initialize shaders 27 | var n = initVertexBuffers(gl); // Set vertex coordinates and colors 28 | 29 | gl.enable(gl.DEPTH_TEST); // Enable the hidden surface removal function 30 | gl.clearColor(0.0, 0.0, 0.0, 1.0); // Set the clear color for 31 | // Get the storage location of u_MvpMatrix 32 | var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix'); 33 | 34 | var mvpMatrix = new Matrix4(); 35 | mvpMatrix.setOrtho(-1, 1, -1, 1, 0, 1); // Set the viewing volume 36 | // Pass the view matrix to u_MvpMatrix 37 | gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements); 38 | 39 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear the color buffer 40 | gl.drawArrays(gl.TRIANGLES, 0, n); // Draw the triangles 41 | } 42 | 43 | function initVertexBuffers(gl) { 44 | var verticesColors = new Float32Array([ // Vertex coordinates and color 45 | 0.0, 0.5, -0.1, 0.0, 0.0, 1.0, // The front blue one 46 | -0.5, -0.5, -0.1, 0.0, 0.0, 1.0, 47 | 0.5, -0.5, -0.1, 1.0, 1.0, 0.0, 48 | 49 | 0.5, 0.4, -0.5, 1.0, 1.0, 0.0, // The red one is behind 50 | -0.5, 0.4, -0.5, 1.0, 0.0, 0.0, 51 | 0.0, -0.6, -0.5, 1.0, 0.0, 0.0, 52 | ]); 53 | var numVertex = 3; var numColor = 3; var n = 6; 54 | 55 | // Create a buffer object and write data to it 56 | var vertexPositionbuffer = gl.createBuffer(); 57 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionbuffer); 58 | gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); 59 | 60 | var FSIZE = verticesColors.BYTES_PER_ELEMENT; // The number of byte 61 | var STRIDE = numVertex + numColor;　　　　　　 // Stride 62 | 63 | // Write the vertex information and enable it 64 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 65 | gl.vertexAttribPointer(a_Position, numVertex, gl.FLOAT, false, FSIZE * STRIDE, 0); 66 | gl.enableVertexAttribArray(a_Position); 67 | 68 | // 頂点の色を設定し、有効化する 69 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 70 | gl.vertexAttribPointer(a_Color, numColor, gl.FLOAT, false, FSIZE * STRIDE, FSIZE * numVertex); 71 | gl.enableVertexAttribArray(a_Color); 72 | 73 | return n; 74 | } 75 | -------------------------------------------------------------------------------- /Appendix/LoadShaderFromFiles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Load Shader From File 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Appendix/LoadShaderFromFiles.js: -------------------------------------------------------------------------------- 1 | // Loadshaderfromfiles.js based on ColoredTriangle.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = null; 4 | // Fragment shader program 5 | var FSHADER_SOURCE = null; 6 | 7 | function main() { 8 | // Retrieve element 9 | var canvas = document.getElementById('webgl'); 10 | 11 | // Get the rendering context for WebGL 12 | var gl = getWebGLContext(canvas); 13 | if (!gl) { 14 | console.log('Failed to get the rendering context for WebGL'); 15 | return; 16 | } 17 | // Read shader from file 18 | readShaderFile(gl, 'ColoredTriangle.vert', 'v'); 19 | readShaderFile(gl, 'ColoredTriangle.frag', 'f'); 20 | } 21 | 22 | function start(gl) { 23 | // Initialize shaders 24 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 25 | console.log('Failed to intialize shaders.'); 26 | return; 27 | } 28 | 29 | // Set vertex information 30 | var n = initVertexBuffers(gl); 31 | if (n < 0) { 32 | console.log('Failed to set the vertex information'); 33 | return; 34 | } 35 | 36 | // Specify the color for clearing 37 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 38 | 39 | // Clear 40 | gl.clear(gl.COLOR_BUFFER_BIT); 41 | 42 | // Draw the rectangle 43 | gl.drawArrays(gl.TRIANGLES, 0, n); 44 | } 45 | 46 | function initVertexBuffers(gl) { 47 | var verticesColors = new Float32Array([ 48 | // Vertex coordinates and color 49 | 0.0, 0.5, 1.0, 0.0, 0.0, 50 | -0.5, -0.5, 0.0, 1.0, 0.0, 51 | 0.5, -0.5, 0.0, 0.0, 1.0, 52 | ]); 53 | var n = 3; 54 | 55 | // Create a buffer object 56 | var vertexColorBuffer = gl.createBuffer(); 57 | if (!vertexColorBuffer) { 58 | console.log('Failed to create the buffer object'); 59 | return false; 60 | } 61 | 62 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); 63 | gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); 64 | 65 | var FSIZE = verticesColors.BYTES_PER_ELEMENT; 66 | //Get the storage location of a_Position, assign and enable buffer 67 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 68 | if (a_Position < 0) { 69 | console.log('Failed to get the storage location of a_Position'); 70 | return -1; 71 | } 72 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0); 73 | gl.enableVertexAttribArray(a_Position); // Enable the assignment of the buffer object 74 | 75 | // Get the storage location of a_Position, assign buffer and enable 76 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 77 | if(a_Color < 0) { 78 | console.log('Failed to get the storage location of a_Color'); 79 | return -1; 80 | } 81 | gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2); 82 | gl.enableVertexAttribArray(a_Color); // Enable the assignment of the buffer object 83 | 84 | return n; 85 | } 86 | 87 | // Read shader from file 88 | function readShaderFile(gl, fileName, shader) { 89 | var request = new XMLHttpRequest(); 90 | 91 | request.onreadystatechange = function() { 92 | if (request.readyState === 4 && request.status !== 404) { 93 | onReadShader(gl, request.responseText, shader); 94 | } 95 | } 96 | request.open('GET', fileName, true); // Create a request to acquire the file 97 | request.send(); // Send the request 98 | } 99 | 100 | // The shader is loaded from file 101 | function onReadShader(gl, fileString, shader) { 102 | if (shader == 'v') { // Vertex shader 103 | VSHADER_SOURCE = fileString; 104 | } else 105 | if (shader == 'f') { // Fragment shader 106 | FSHADER_SOURCE = fileString; 107 | } 108 | // When both are available, call start(). 109 | if (VSHADER_SOURCE && FSHADER_SOURCE) start(gl); 110 | } 111 | 112 | -------------------------------------------------------------------------------- /ch02/ClickedPoints.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw a point with a mouse click 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch02/ClickedPoints.js: -------------------------------------------------------------------------------- 1 | // ClickedPints.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'void main() {\n' + 6 | ' gl_Position = a_Position;\n' + 7 | ' gl_PointSize = 10.0;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | 'void main() {\n' + 13 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 14 | '}\n'; 15 | 16 | function main() { 17 | // Retrieve element 18 | var canvas = document.getElementById('webgl'); 19 | 20 | // Get the rendering context for WebGL 21 | var gl = getWebGLContext(canvas); 22 | if (!gl) { 23 | console.log('Failed to get the rendering context for WebGL'); 24 | return; 25 | } 26 | 27 | // Initialize shaders 28 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 29 | console.log('Failed to intialize shaders.'); 30 | return; 31 | } 32 | 33 | // // Get the storage location of a_Position 34 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 35 | if (a_Position < 0) { 36 | console.log('Failed to get the storage location of a_Position'); 37 | return; 38 | } 39 | 40 | // Register function (event handler) to be called on a mouse press 41 | canvas.onmousedown = function(ev){ click(ev, gl, canvas, a_Position); }; 42 | 43 | // Specify the color for clearing 44 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 45 | 46 | // Clear 47 | gl.clear(gl.COLOR_BUFFER_BIT); 48 | } 49 | 50 | var g_points = []; // The array for the position of a mouse press 51 | function click(ev, gl, canvas, a_Position) { 52 | var x = ev.clientX; // x coordinate of a mouse pointer 53 | var y = ev.clientY; // y coordinate of a mouse pointer 54 | var rect = ev.target.getBoundingClientRect() ; 55 | 56 | x = ((x - rect.left) - canvas.width/2)/(canvas.width/2); 57 | y = (canvas.height/2 - (y - rect.top))/(canvas.height/2); 58 | // Store the coordinates to g_points array 59 | g_points.push(x); g_points.push(y); 60 | 61 | // Clear 62 | gl.clear(gl.COLOR_BUFFER_BIT); 63 | 64 | var len = g_points.length; 65 | for(var i = 0; i < len; i += 2) { 66 | // Pass the position of a point to a_Position variable 67 | gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0); 68 | 69 | // Draw 70 | gl.drawArrays(gl.POINTS, 0, 1); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /ch02/ColoredPoints.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Change a point color 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch02/ColoredPoints.js: -------------------------------------------------------------------------------- 1 | // ColoredPoint.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'void main() {\n' + 6 | ' gl_Position = a_Position;\n' + 7 | ' gl_PointSize = 10.0;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | 'precision mediump float;\n' + 13 | 'uniform vec4 u_FragColor;\n' + // uniform変数 14 | 'void main() {\n' + 15 | ' gl_FragColor = u_FragColor;\n' + 16 | '}\n'; 17 | 18 | function main() { 19 | // Retrieve element 20 | var canvas = document.getElementById('webgl'); 21 | 22 | // Get the rendering context for WebGL 23 | var gl = getWebGLContext(canvas); 24 | if (!gl) { 25 | console.log('Failed to get the rendering context for WebGL'); 26 | return; 27 | } 28 | 29 | // Initialize shaders 30 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 31 | console.log('Failed to intialize shaders.'); 32 | return; 33 | } 34 | 35 | // // Get the storage location of a_Position 36 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 37 | if (a_Position < 0) { 38 | console.log('Failed to get the storage location of a_Position'); 39 | return; 40 | } 41 | 42 | // Get the storage location of u_FragColor 43 | var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor'); 44 | if (!u_FragColor) { 45 | console.log('Failed to get the storage location of u_FragColor'); 46 | return; 47 | } 48 | 49 | // Register function (event handler) to be called on a mouse press 50 | canvas.onmousedown = function(ev){ click(ev, gl, canvas, a_Position, u_FragColor) }; 51 | 52 | // Specify the color for clearing 53 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 54 | 55 | // Clear 56 | gl.clear(gl.COLOR_BUFFER_BIT); 57 | } 58 | 59 | var g_points = []; // The array for the position of a mouse press 60 | var g_colors = []; // The array to store the color of a point 61 | function click(ev, gl, canvas, a_Position, u_FragColor) { 62 | var x = ev.clientX; // x coordinate of a mouse pointer 63 | var y = ev.clientY; // y coordinate of a mouse pointer 64 | var rect = ev.target.getBoundingClientRect(); 65 | 66 | x = ((x - rect.left) - canvas.width/2)/(canvas.width/2); 67 | y = (canvas.height/2 - (y - rect.top))/(canvas.height/2); 68 | 69 | // Store the coordinates to g_points array 70 | g_points.push([x, y]); 71 | // Store the coordinates to g_points array 72 | if (x >= 0.0 && y >= 0.0) { // First quadrant 73 | g_colors.push([1.0, 0.0, 0.0, 1.0]); // Red 74 | } else if (x < 0.0 && y < 0.0) { // Third quadrant 75 | g_colors.push([0.0, 1.0, 0.0, 1.0]); // Green 76 | } else { // Others 77 | g_colors.push([1.0, 1.0, 1.0, 1.0]); // White 78 | } 79 | 80 | // Clear 81 | gl.clear(gl.COLOR_BUFFER_BIT); 82 | 83 | var len = g_points.length; 84 | for(var i = 0; i < len; i++) { 85 | var xy = g_points[i]; 86 | var rgba = g_colors[i]; 87 | 88 | // Pass the position of a point to a_Position variable 89 | gl.vertexAttrib3f(a_Position, xy[0], xy[1], 0.0); 90 | // Pass the color of a point to u_FragColor variable 91 | gl.uniform4f(u_FragColor, rgba[0], rgba[1], rgba[2], rgba[3]); 92 | // Draw 93 | gl.drawArrays(gl.POINTS, 0, 1); 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /ch02/DrawRectangle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw a blue rectangle (canvas version) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /ch02/DrawRectangle.js: -------------------------------------------------------------------------------- 1 | // DrawTriangle.js (c) 2012 matsuda 2 | function main() { 3 | // Retrieve element 4 | var canvas = document.getElementById('example'); 5 | if (!canvas) { 6 | console.log('Failed to retrieve the element'); 7 | return false; 8 | } 9 | 10 | // Get the rendering context for 2DCG 11 | var ctx = canvas.getContext('2d'); 12 | 13 | // Draw a blue rectangle 14 | ctx.fillStyle = 'rgba(0, 0, 255, 1.0)'; // Set color to blue 15 | ctx.fillRect(120, 10, 150, 150); // Fill a rectangle with the color 16 | } 17 | -------------------------------------------------------------------------------- /ch02/HelloCanvas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Clear "canvas" 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch02/HelloCanvas.js: -------------------------------------------------------------------------------- 1 | // HelloCanvas.js (c) 2012 matsuda 2 | function main() { 3 | // Retrieve element 4 | var canvas = document.getElementById('webgl'); 5 | 6 | // Get the rendering context for WebGL 7 | var gl = getWebGLContext(canvas); 8 | if (!gl) { 9 | console.log('Failed to get the rendering context for WebGL'); 10 | return; 11 | } 12 | 13 | // Set clear color 14 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 15 | 16 | // Clear 17 | gl.clear(gl.COLOR_BUFFER_BIT); 18 | } 19 | -------------------------------------------------------------------------------- /ch02/HelloPoint1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw a point (1) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch02/HelloPoint1.js: -------------------------------------------------------------------------------- 1 | // HelloPoint1.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'void main() {\n' + 5 | ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point 6 | ' gl_PointSize = 10.0;\n' + // Set the point size 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' + // Set the point color 13 | '}\n'; 14 | 15 | function main() { 16 | // Retrieve element 17 | var canvas = document.getElementById('webgl'); 18 | 19 | // Get the rendering context for WebGL 20 | var gl = getWebGLContext(canvas); 21 | if (!gl) { 22 | console.log('Failed to get the rendering context for WebGL'); 23 | return; 24 | } 25 | 26 | // Initialize shaders 27 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 28 | console.log('Failed to intialize shaders.'); 29 | return; 30 | } 31 | 32 | // Specify the color for clearing 33 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 34 | 35 | // Clear 36 | gl.clear(gl.COLOR_BUFFER_BIT); 37 | 38 | // Draw a point 39 | gl.drawArrays(gl.POINTS, 0, 1); 40 | } 41 | -------------------------------------------------------------------------------- /ch02/HelloPoint2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello Point (2) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch02/HelloPoint2.js: -------------------------------------------------------------------------------- 1 | // HelloPint2.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + // attribute variable 5 | 'void main() {\n' + 6 | ' gl_Position = a_Position;\n' + 7 | ' gl_PointSize = 10.0;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | 'void main() {\n' + 13 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 14 | '}\n'; 15 | 16 | function main() { 17 | // Retrieve element 18 | var canvas = document.getElementById('webgl'); 19 | 20 | // Get the rendering context for WebGL 21 | var gl = getWebGLContext(canvas); 22 | if (!gl) { 23 | console.log('Failed to get the rendering context for WebGL'); 24 | return; 25 | } 26 | 27 | // Initialize shaders 28 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 29 | console.log('Failed to intialize shaders.'); 30 | return; 31 | } 32 | 33 | // Get the storage location of a_Position 34 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 35 | if (a_Position < 0) { 36 | console.log('Failed to get the storage location of a_Position'); 37 | return; 38 | } 39 | 40 | // Pass vertex position to attribute variable 41 | gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0); 42 | 43 | // Specify the color for clearing 44 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 45 | 46 | // Clear 47 | gl.clear(gl.COLOR_BUFFER_BIT); 48 | 49 | // Draw 50 | gl.drawArrays(gl.POINTS, 0, 1); 51 | } 52 | -------------------------------------------------------------------------------- /ch03/HelloQuad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello Quad 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch03/HelloQuad.js: -------------------------------------------------------------------------------- 1 | // HelloQuad.js (c) 2012 matsuda 2 | // 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() { 16 | // Retrieve element 17 | var canvas = document.getElementById('webgl'); 18 | 19 | // Get the rendering context for WebGL 20 | var gl = getWebGLContext(canvas); 21 | if (!gl) { 22 | console.log('Failed to get the rendering context for WebGL'); 23 | return; 24 | } 25 | 26 | // Initialize shaders 27 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 28 | console.log('Failed to intialize shaders.'); 29 | return; 30 | } 31 | 32 | // Write the positions of vertices to a vertex shader 33 | var n = initVertexBuffers(gl); 34 | if (n < 0) { 35 | console.log('Failed to set the positions of the vertices'); 36 | return; 37 | } 38 | 39 | // Specify the color for clearing 40 | gl.clearColor(0, 0, 0, 1); 41 | 42 | // Clear 43 | gl.clear(gl.COLOR_BUFFER_BIT); 44 | 45 | // Draw the rectangle 46 | gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); 47 | } 48 | 49 | function initVertexBuffers(gl) { 50 | var vertices = new Float32Array([ 51 | -0.5, 0.5, -0.5, -0.5, 0.5, 0.5,　0.5, -0.5 52 | ]); 53 | var n = 4; // The number of vertices 54 | 55 | // Create a buffer object 56 | var vertexBuffer = gl.createBuffer(); 57 | if (!vertexBuffer) { 58 | console.log('Failed to create the buffer object'); 59 | return -1; 60 | } 61 | 62 | // Bind the buffer object to target 63 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 64 | // Write date into the buffer object 65 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 66 | 67 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 68 | if (a_Position < 0) { 69 | console.log('Failed to get the storage location of a_Position'); 70 | return -1; 71 | } 72 | // Assign the buffer object to a_Position variable 73 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 74 | 75 | // Enable the assignment to a_Position variable 76 | gl.enableVertexAttribArray(a_Position); 77 | 78 | return n; 79 | } 80 | -------------------------------------------------------------------------------- /ch03/HelloQuad_FAN.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello Quad (gl.TRIANGLE_FAN) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch03/HelloQuad_FAN.js: -------------------------------------------------------------------------------- 1 | // HelloQuad_FAN.js (c) 2012 matsuda 2 | // 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() { 16 | // Retrieve element 17 | var canvas = document.getElementById('webgl'); 18 | 19 | // Get the rendering context for WebGL 20 | var gl = getWebGLContext(canvas); 21 | if (!gl) { 22 | console.log('Failed to get the rendering context for WebGL'); 23 | return; 24 | } 25 | 26 | // Initialize shaders 27 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 28 | console.log('Failed to intialize shaders.'); 29 | return; 30 | } 31 | 32 | // Write the positions of vertices to a vertex shader 33 | var n = initVertexBuffers(gl); 34 | if (n < 0) { 35 | console.log('Failed to set the positions of the vertices'); 36 | return; 37 | } 38 | 39 | // Specify the color for clearing 40 | gl.clearColor(0, 0, 0, 1); 41 | 42 | // Clear 43 | gl.clear(gl.COLOR_BUFFER_BIT); 44 | 45 | // Draw the rectangle 46 | gl.drawArrays(gl.TRIANGLE_FAN, 0, n); 47 | } 48 | 49 | function initVertexBuffers(gl) { 50 | var vertices = new Float32Array([ 51 | -0.5, 0.5, -0.5, -0.5, 0.5, 0.5,　0.5, -0.5 52 | ]); 53 | var n = 4; // The number of vertices 54 | 55 | // Create a buffer object 56 | var vertexBuffer = gl.createBuffer(); 57 | if (!vertexBuffer) { 58 | console.log('Failed to create the buffer object'); 59 | return -1; 60 | } 61 | 62 | // Bind the buffer object to target 63 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 64 | // Write date into the buffer object 65 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 66 | 67 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 68 | if (a_Position < 0) { 69 | console.log('Failed to get the storage location of a_Position'); 70 | return -1; 71 | } 72 | 　// Assign the buffer object to a_Position variable 73 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 74 | 75 | // Enable the assignment to a_Position variable 76 | gl.enableVertexAttribArray(a_Position); 77 | 78 | return n; 79 | } 80 | -------------------------------------------------------------------------------- /ch03/HelloTriangle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello Triangle 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch03/HelloTriangle.js: -------------------------------------------------------------------------------- 1 | // HelloTriangle.js (c) 2012 matsuda 2 | // 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() { 16 | // Retrieve element 17 | var canvas = document.getElementById('webgl'); 18 | 19 | // Get the rendering context for WebGL 20 | var gl = getWebGLContext(canvas); 21 | if (!gl) { 22 | console.log('Failed to get the rendering context for WebGL'); 23 | return; 24 | } 25 | 26 | // Initialize shaders 27 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 28 | console.log('Failed to intialize shaders.'); 29 | return; 30 | } 31 | 32 | // Write the positions of vertices to a vertex shader 33 | var n = initVertexBuffers(gl); 34 | if (n < 0) { 35 | console.log('Failed to set the positions of the vertices'); 36 | return; 37 | } 38 | 39 | // Specify the color for clearing 40 | gl.clearColor(0, 0, 0, 1); 41 | 42 | // Clear 43 | gl.clear(gl.COLOR_BUFFER_BIT); 44 | 45 | // Draw the rectangle 46 | gl.drawArrays(gl.TRIANGLES, 0, n); 47 | } 48 | 49 | function initVertexBuffers(gl) { 50 | var vertices = new Float32Array([ 51 | 0, 0.5, -0.5, -0.5, 0.5, -0.5 52 | ]); 53 | var n = 3; // The number of vertices 54 | 55 | // Create a buffer object 56 | var vertexBuffer = gl.createBuffer(); 57 | if (!vertexBuffer) { 58 | console.log('Failed to create the buffer object'); 59 | return -1; 60 | } 61 | 62 | // Bind the buffer object to target 63 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 64 | // Write date into the buffer object 65 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 66 | 67 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 68 | if (a_Position < 0) { 69 | console.log('Failed to get the storage location of a_Position'); 70 | return -1; 71 | } 72 | // Assign the buffer object to a_Position variable 73 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 74 | 75 | // Enable the assignment to a_Position variable 76 | gl.enableVertexAttribArray(a_Position); 77 | 78 | return n; 79 | } 80 | -------------------------------------------------------------------------------- /ch03/HelloTriangle_LINES.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello Triangle (gl.LINES) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch03/HelloTriangle_LINES.js: -------------------------------------------------------------------------------- 1 | // HelloTriangle_LINES.js (c) 2012 matsuda 2 | // 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() { 16 | // Retrieve element 17 | var canvas = document.getElementById('webgl'); 18 | 19 | // Get the rendering context for WebGL 20 | var gl = getWebGLContext(canvas); 21 | if (!gl) { 22 | console.log('Failed to get the rendering context for WebGL'); 23 | return; 24 | } 25 | 26 | // Initialize shaders 27 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 28 | console.log('Failed to intialize shaders.'); 29 | return; 30 | } 31 | 32 | // Write the positions of vertices to a vertex shader 33 | var n = initVertexBuffers(gl); 34 | if (n < 0) { 35 | console.log('Failed to set the positions of the vertices'); 36 | return; 37 | } 38 | 39 | // Specify the color for clearing 40 | gl.clearColor(0, 0, 0, 1); 41 | 42 | // Clear 43 | gl.clear(gl.COLOR_BUFFER_BIT); 44 | 45 | // Draw the rectangle 46 | gl.drawArrays(gl.LINES, 0, n); 47 | } 48 | 49 | function initVertexBuffers(gl) { 50 | var vertices = new Float32Array([ 51 | 0, 0.5, -0.5, -0.5, 0.5, -0.5 52 | ]); 53 | var n = 3; // The number of vertices 54 | 55 | // Create a buffer object 56 | var vertexBuffer = gl.createBuffer(); 57 | if (!vertexBuffer) { 58 | console.log('Failed to create the buffer object'); 59 | return -1; 60 | } 61 | 62 | 　// Bind the buffer object to target 63 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 64 | 　// Write date into the buffer object 65 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 66 | 67 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 68 | if (a_Position < 0) { 69 | console.log('Failed to get the storage location of a_Position'); 70 | return -1; 71 | } 72 | // Assign the buffer object to a_Position variable 73 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 74 | 75 | // Enable the assignment to a_Position variable 76 | gl.enableVertexAttribArray(a_Position); 77 | 78 | return n; 79 | } 80 | -------------------------------------------------------------------------------- /ch03/HelloTriangle_LINE_LOOP.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw a triangle (gl.LINE_LOOP) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch03/HelloTriangle_LINE_LOOP.js: -------------------------------------------------------------------------------- 1 | // HelloTriangle_LINE_LOOP.js (c) 2012 matsuda 2 | // 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() { 16 | // Retrieve element 17 | var canvas = document.getElementById('webgl'); 18 | 19 | // Get the rendering context for WebGL 20 | var gl = getWebGLContext(canvas); 21 | if (!gl) { 22 | console.log('Failed to get the rendering context for WebGL'); 23 | return; 24 | } 25 | 26 | // Initialize shaders 27 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 28 | console.log('Failed to intialize shaders.'); 29 | return; 30 | } 31 | 32 | // Write the positions of vertices to a vertex shader 33 | var n = initVertexBuffers(gl); 34 | if (n < 0) { 35 | console.log('Failed to set the positions of the vertices'); 36 | return; 37 | } 38 | 39 | // Specify the color for clearing 40 | gl.clearColor(0, 0, 0, 1); 41 | 42 | // Clear 43 | gl.clear(gl.COLOR_BUFFER_BIT); 44 | 45 | // Draw the rectangle 46 | gl.drawArrays(gl.LINE_LOOP, 0, n); 47 | } 48 | 49 | function initVertexBuffers(gl) { 50 | var vertices = new Float32Array([ 51 | 0, 0.5, -0.5, -0.5, 0.5, -0.5 52 | ]); 53 | var n = 3; // The number of vertices 54 | 55 | // Create a buffer object 56 | var vertexBuffer = gl.createBuffer(); 57 | if (!vertexBuffer) { 58 | console.log('Failed to create the buffer object'); 59 | return -1; 60 | } 61 | 62 | // Bind the buffer object to target 63 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 64 | // Write date into the buffer object 65 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 66 | 67 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 68 | if (a_Position < 0) { 69 | console.log('Failed to get the storage location of a_Position'); 70 | return -1; 71 | } 72 | // Assign the buffer object to a_Position variable 73 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 74 | 75 | // Enable the assignment to a_Position variable 76 | gl.enableVertexAttribArray(a_Position); 77 | 78 | return n; 79 | } 80 | -------------------------------------------------------------------------------- /ch03/HelloTriangle_LINE_STRIP.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw a triangle (gl.LINE_STRIP) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch03/HelloTriangle_LINE_STRIP.js: -------------------------------------------------------------------------------- 1 | // HelloTriangle_LINE_STRIP.js (c) 2012 matsuda 2 | // 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() { 16 | // Retrieve element 17 | var canvas = document.getElementById('webgl'); 18 | 19 | // Get the rendering context for WebGL 20 | var gl = getWebGLContext(canvas); 21 | if (!gl) { 22 | console.log('Failed to get the rendering context for WebGL'); 23 | return; 24 | } 25 | 26 | // Initialize shaders 27 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 28 | console.log('Failed to intialize shaders.'); 29 | return; 30 | } 31 | 32 | // Write the positions of vertices to a vertex shader 33 | var n = initVertexBuffers(gl); 34 | if (n < 0) { 35 | console.log('Failed to set the positions of the vertices'); 36 | return; 37 | } 38 | 39 | // Specify the color for clearing 40 | gl.clearColor(0, 0, 0, 1); 41 | 42 | // Clear 43 | gl.clear(gl.COLOR_BUFFER_BIT); 44 | 45 | // Draw the rectangle 46 | gl.drawArrays(gl.LINE_STRIP, 0, n); 47 | } 48 | 49 | function initVertexBuffers(gl) { 50 | var vertices = new Float32Array([ 51 | 0, 0.5, -0.5, -0.5, 0.5, -0.5 52 | ]); 53 | var n = 3; // The number of vertices 54 | 55 | // Create a buffer object 56 | var vertexBuffer = gl.createBuffer(); 57 | if (!vertexBuffer) { 58 | console.log('Failed to create the buffer object'); 59 | return -1; 60 | } 61 | 62 | // Bind the buffer object to target 63 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 64 | // Write date into the buffer object 65 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 66 | 67 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 68 | if (a_Position < 0) { 69 | console.log('Failed to get the storage location of a_Position'); 70 | return -1; 71 | } 72 | // Assign the buffer object to a_Position variable 73 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 74 | 75 | // Enable the assignment to a_Position variable 76 | gl.enableVertexAttribArray(a_Position); 77 | 78 | return n; 79 | } 80 | -------------------------------------------------------------------------------- /ch03/MultiPoint.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw Multiple Points 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch03/MultiPoint.js: -------------------------------------------------------------------------------- 1 | // MultiPoint.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'void main() {\n' + 6 | ' gl_Position = a_Position;\n' + 7 | ' gl_PointSize = 10.0;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | 'void main() {\n' + 13 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 14 | '}\n'; 15 | 16 | function main() { 17 | // Retrieve element 18 | var canvas = document.getElementById('webgl'); 19 | 20 | // Get the rendering context for WebGL 21 | var gl = getWebGLContext(canvas); 22 | if (!gl) { 23 | console.log('Failed to get the rendering context for WebGL'); 24 | return; 25 | } 26 | 27 | // Initialize shaders 28 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 29 | console.log('Failed to intialize shaders.'); 30 | return; 31 | } 32 | 33 | // Write the positions of vertices to a vertex shader 34 | var n = initVertexBuffers(gl); 35 | if (n < 0) { 36 | console.log('Failed to set the positions of the vertices'); 37 | return; 38 | } 39 | 40 | // Specify the color for clearing 41 | gl.clearColor(0, 0, 0, 1); 42 | 43 | // Clear 44 | gl.clear(gl.COLOR_BUFFER_BIT); 45 | 46 | // Draw three points 47 | gl.drawArrays(gl.POINTS, 0, n); 48 | } 49 | 50 | function initVertexBuffers(gl) { 51 | var vertices = new Float32Array([ 52 | 0.0, 0.5, -0.5, -0.5, 0.5, -0.5 53 | ]); 54 | var n = 3; // The number of vertices 55 | 56 | // Create a buffer object 57 | var vertexBuffer = gl.createBuffer(); 58 | if (!vertexBuffer) { 59 | console.log('Failed to create the buffer object'); 60 | return -1; 61 | } 62 | 63 | // Bind the buffer object to target 64 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 65 | // Write date into the buffer object 66 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 67 | 68 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 69 | if (a_Position < 0) { 70 | console.log('Failed to get the storage location of a_Position'); 71 | return -1; 72 | } 73 | // Assign the buffer object to a_Position variable 74 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 75 | 76 | // Enable the assignment to a_Position variable 77 | gl.enableVertexAttribArray(a_Position); 78 | 79 | return n; 80 | } 81 | -------------------------------------------------------------------------------- /ch03/RotatedTriangle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rotate A Triangle 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch03/RotatedTriangle.js: -------------------------------------------------------------------------------- 1 | // RotatedTriangle.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | // x' = x cosβ - y sinβ 5 | // y' = x sinβ + y cosβ　Equation 3.3 6 | // z' = z 7 | 'attribute vec4 a_Position;\n' + 8 | 'uniform float u_CosB, u_SinB;\n' + 9 | 'void main() {\n' + 10 | ' gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;\n' + 11 | ' gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;\n' + 12 | ' gl_Position.z = a_Position.z;\n' + 13 | ' gl_Position.w = 1.0;\n' + 14 | '}\n'; 15 | 16 | // Fragment shader program 17 | var FSHADER_SOURCE = 18 | 'void main() {\n' + 19 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 20 | '}\n'; 21 | 22 | // The rotation angle 23 | var ANGLE = 90.0; 24 | 25 | function main() { 26 | // Retrieve element 27 | var canvas = document.getElementById('webgl'); 28 | 29 | // Get the rendering context for WebGL 30 | var gl = getWebGLContext(canvas); 31 | if (!gl) { 32 | console.log('Failed to get the rendering context for WebGL'); 33 | return; 34 | } 35 | 36 | // Initialize shaders 37 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 38 | console.log('Failed to intialize shaders.'); 39 | return; 40 | } 41 | 42 | // Write the positions of vertices to a vertex shader 43 | var n = initVertexBuffers(gl); 44 | if (n < 0) { 45 | console.log('Failed to set the positions of the vertices'); 46 | return; 47 | } 48 | 49 | // // Pass the data required to rotate the shape to the vertex shader 50 | var radian = Math.PI * ANGLE / 180.0; // Convert to radians 51 | var cosB = Math.cos(radian); 52 | var sinB = Math.sin(radian); 53 | 54 | var u_CosB = gl.getUniformLocation(gl.program, 'u_CosB'); 55 | var u_SinB = gl.getUniformLocation(gl.program, 'u_SinB'); 56 | if (!u_CosB || !u_SinB) { 57 | console.log('Failed to get the storage location of u_CosB or u_SinB'); 58 | return; 59 | } 60 | gl.uniform1f(u_CosB, cosB); 61 | gl.uniform1f(u_SinB, sinB); 62 | 63 | // Specify the color for clearing 64 | gl.clearColor(0, 0, 0, 1); 65 | 66 | // Clear 67 | gl.clear(gl.COLOR_BUFFER_BIT); 68 | 69 | // Draw the rectangle 70 | gl.drawArrays(gl.TRIANGLES, 0, n); 71 | } 72 | 73 | function initVertexBuffers(gl) { 74 | var vertices = new Float32Array([ 75 | 0, 0.5, -0.5, -0.5, 0.5, -0.5 76 | ]); 77 | var n = 3; // The number of vertices 78 | 79 | // Create a buffer object 80 | var vertexBuffer = gl.createBuffer(); 81 | if (!vertexBuffer) { 82 | console.log('Failed to create the buffer object'); 83 | return -1; 84 | } 85 | 86 | // Bind the buffer object to target 87 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 88 | // Write date into the buffer object 89 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 90 | 91 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 92 | if (a_Position < 0) { 93 | console.log('Failed to get the storage location of a_Position'); 94 | return -1; 95 | } 96 | // Assign the buffer object to a_Position variable 97 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 98 | 99 | // Enable the assignment to a_Position variable 100 | gl.enableVertexAttribArray(a_Position); 101 | 102 | return n; 103 | } 104 | -------------------------------------------------------------------------------- /ch03/RotatedTriangle_Matrix.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rotate A Triangle (Matrix) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch03/RotatedTriangle_Matrix.js: -------------------------------------------------------------------------------- 1 | // RotatedTriangle_Matrix.js (c) matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'uniform mat4 u_xformMatrix;\n' + 6 | 'void main() {\n' + 7 | ' gl_Position = u_xformMatrix * a_Position;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | 'void main() {\n' + 13 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 14 | '}\n'; 15 | 16 | // The rotation angle 17 | var ANGLE = 90.0; 18 | 19 | function main() { 20 | // Retrieve element 21 | var canvas = document.getElementById('webgl'); 22 | 23 | // Get the rendering context for WebGL 24 | var gl = getWebGLContext(canvas); 25 | if (!gl) { 26 | console.log('Failed to get the rendering context for WebGL'); 27 | return; 28 | } 29 | 30 | // Initialize shaders 31 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 32 | console.log('Failed to intialize shaders.'); 33 | return; 34 | } 35 | 36 | // Write the positions of vertices to a vertex shader 37 | var n = initVertexBuffers(gl); 38 | if (n < 0) { 39 | console.log('Failed to set the positions of the vertices'); 40 | return; 41 | } 42 | 43 | // Create a rotation matrix 44 | var radian = Math.PI * ANGLE / 180.0; // Convert to radians 45 | var cosB = Math.cos(radian), sinB = Math.sin(radian); 46 | 47 | // Note: WebGL is column major order 48 | var xformMatrix = new Float32Array([ 49 | cosB, sinB, 0.0, 0.0, 50 | -sinB, cosB, 0.0, 0.0, 51 | 0.0, 0.0, 1.0, 0.0, 52 | 0.0, 0.0, 0.0, 1.0 53 | ]); 54 | 55 | // Pass the rotation matrix to the vertex shader 56 | var u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix'); 57 | if (!u_xformMatrix) { 58 | console.log('Failed to get the storage location of u_xformMatrix'); 59 | return; 60 | } 61 | gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix); 62 | 63 | // Specify the color for clearing 64 | gl.clearColor(0, 0, 0, 1); 65 | 66 | // Clear 67 | gl.clear(gl.COLOR_BUFFER_BIT); 68 | 69 | // Draw the rectangle 70 | gl.drawArrays(gl.TRIANGLES, 0, n); 71 | } 72 | 73 | function initVertexBuffers(gl) { 74 | var vertices = new Float32Array([ 75 | 0, 0.5, -0.5, -0.5, 0.5, -0.5 76 | ]); 77 | var n = 3; // The number of vertices 78 | 79 | // Create a buffer object 80 | var vertexBuffer = gl.createBuffer(); 81 | if (!vertexBuffer) { 82 | console.log('Failed to create the buffer object'); 83 | return false; 84 | } 85 | 86 | // Bind the buffer object to target 87 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 88 | // Write date into the buffer object 89 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 90 | 91 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 92 | if (a_Position < 0) { 93 | console.log('Failed to get the storage location of a_Position'); 94 | return -1; 95 | } 96 | // Assign the buffer object to a_Position variable 97 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 98 | 99 | // Enable the assignment to a_Position variable 100 | gl.enableVertexAttribArray(a_Position); 101 | 102 | return n; 103 | } 104 | 105 | -------------------------------------------------------------------------------- /ch03/ScaledTriangle_Matrix.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Scale A Triangle (Matrix) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch03/ScaledTriangle_Matrix.js: -------------------------------------------------------------------------------- 1 | // ScaledTriangle_Matrix.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'uniform mat4 u_xformMatrix;\n' + 6 | 'void main() {\n' + 7 | ' gl_Position = u_xformMatrix * a_Position;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | 'void main() {\n' + 13 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 14 | '}\n'; 15 | 16 | // The scaling factor 17 | var Sx = 1.0, Sy = 1.5, Sz = 1.0; 18 | 19 | function main() { 20 | // Retrieve element 21 | var canvas = document.getElementById('webgl'); 22 | 23 | // Get the rendering context for WebGL 24 | var gl = getWebGLContext(canvas); 25 | if (!gl) { 26 | console.log('Failed to get the rendering context for WebGL'); 27 | return; 28 | } 29 | 30 | // Initialize shaders 31 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 32 | console.log('Failed to intialize shaders.'); 33 | return; 34 | } 35 | 36 | // Write the positions of vertices to a vertex shader 37 | var n = initVertexBuffers(gl); 38 | if (n < 0) { 39 | console.log('Failed to set the positions of the vertices'); 40 | return; 41 | } 42 | 43 | // Note: WebGL is column major order 44 | var xformMatrix = new Float32Array([ 45 | Sx, 0.0, 0.0, 0.0, 46 | 0.0, Sy, 0.0, 0.0, 47 | 0.0, 0.0, Sz, 0.0, 48 | 0.0, 0.0, 0.0, 1.0 49 | ]); 50 | 51 | // Pass the rotation matrix to the vertex shader 52 | var u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix'); 53 | if (!u_xformMatrix) { 54 | console.log('Failed to get the storage location of u_xformMatrix'); 55 | return; 56 | } 57 | gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix); 58 | 59 | // Specify the color for clearing 60 | gl.clearColor(0, 0, 0, 1); 61 | 62 | // Clear 63 | gl.clear(gl.COLOR_BUFFER_BIT); 64 | 65 | // Draw the rectangle 66 | gl.drawArrays(gl.TRIANGLES, 0, n); 67 | } 68 | 69 | function initVertexBuffers(gl) { 70 | var vertices = new Float32Array([ 71 | 0, 0.5, -0.5, -0.5, 0.5, -0.5 72 | ]); 73 | var n = 3; // The number of vertices 74 | 75 | // Create a buffer object 76 | var vertexBuffer = gl.createBuffer(); 77 | if (!vertexBuffer) { 78 | console.log('Failed to create the buffer object'); 79 | return false; 80 | } 81 | 82 | // Bind the buffer object to target 83 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 84 | // Write date into the buffer object 85 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 86 | 87 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 88 | if (a_Position < 0) { 89 | console.log('Failed to get the storage location of a_Position'); 90 | return -1; 91 | } 92 | // Assign the buffer object to a_Position variable 93 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 94 | 95 | // Enable the assignment to a_Position variable 96 | gl.enableVertexAttribArray(a_Position); 97 | 98 | return n; 99 | } 100 | -------------------------------------------------------------------------------- /ch03/TranslatedTriangle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Translate a Triangle 6 | 7 | 8 | 9 | Please use a browser that supports "canvas" 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch03/TranslatedTriangle.js: -------------------------------------------------------------------------------- 1 | // TranslatedTriangle.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'uniform vec4 u_Translation;\n' + 6 | 'void main() {\n' + 7 | ' gl_Position = a_Position + u_Translation;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | 'void main() {\n' + 13 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 14 | '}\n'; 15 | 16 | // The translation distance for x, y, and z direction 17 | var Tx = 0.5, Ty = 0.5, Tz = 0.0; 18 | 19 | function main() { 20 | // Retrieve element 21 | var canvas = document.getElementById('webgl'); 22 | 23 | // Get the rendering context for WebGL 24 | var gl = getWebGLContext(canvas); 25 | if (!gl) { 26 | console.log('Failed to get the rendering context for WebGL'); 27 | return; 28 | } 29 | 30 | // Initialize shaders 31 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 32 | console.log('Failed to intialize shaders.'); 33 | return; 34 | } 35 | 36 | // Write the positions of vertices to a vertex shader 37 | var n = initVertexBuffers(gl); 38 | if (n < 0) { 39 | console.log('Failed to set the positions of the vertices'); 40 | return; 41 | } 42 | 43 | // Pass the translation distance to the vertex shader 44 | var u_Translation = gl.getUniformLocation(gl.program, 'u_Translation'); 45 | if (!u_Translation) { 46 | console.log('Failed to get the storage location of u_Translation'); 47 | return; 48 | } 49 | gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0); 50 | 51 | // Specify the color for clearing 52 | gl.clearColor(0, 0, 0, 1); 53 | 54 | // Clear 55 | gl.clear(gl.COLOR_BUFFER_BIT); 56 | 57 | // Draw the rectangle 58 | gl.drawArrays(gl.TRIANGLES, 0, n); 59 | } 60 | 61 | function initVertexBuffers(gl) { 62 | var vertices = new Float32Array([ 63 | 0, 0.5, -0.5, -0.5, 0.5, -0.5 64 | ]); 65 | var n = 3; // The number of vertices 66 | 67 | // Create a buffer object 68 | var vertexBuffer = gl.createBuffer(); 69 | if (!vertexBuffer) { 70 | console.log('Failed to create the buffer object'); 71 | return -1; 72 | } 73 | 74 | // Bind the buffer object to target 75 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 76 | // Write date into the buffer object 77 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 78 | 79 | // Assign the buffer object to the attribute variable 80 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 81 | if (a_Position < 0) { 82 | console.log('Failed to get the storage location of a_Position'); 83 | return -1; 84 | } 85 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 86 | 87 | // Enable the assignment to a_Position variable 88 | gl.enableVertexAttribArray(a_Position); 89 | 90 | return n; 91 | } 92 | -------------------------------------------------------------------------------- /ch04/RotatedTranslatedTriangle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Translate And Then Rotate A Triangle 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch04/RotatedTranslatedTriangle.js: -------------------------------------------------------------------------------- 1 | // RotatedTranslatedTriangle.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'uniform mat4 u_ModelMatrix;\n' + 6 | 'void main() {\n' + 7 | ' gl_Position = u_ModelMatrix * a_Position;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | 'void main() {\n' + 13 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 14 | '}\n'; 15 | 16 | function main() { 17 | // Retrieve element 18 | var canvas = document.getElementById('webgl'); 19 | 20 | // Get the rendering context for WebGL 21 | var gl = getWebGLContext(canvas); 22 | if (!gl) { 23 | console.log('Failed to get the rendering context for WebGL'); 24 | return; 25 | } 26 | 27 | // Initialize shaders 28 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 29 | console.log('Failed to intialize shaders.'); 30 | return; 31 | } 32 | 33 | // Write the positions of vertices to a vertex shader 34 | var n = initVertexBuffers(gl); 35 | if (n < 0) { 36 | console.log('Failed to set the positions of the vertices'); 37 | return; 38 | } 39 | 40 | // Create Matrix4 object for model transformation 41 | var modelMatrix = new Matrix4(); 42 | 43 | // Calculate a model matrix 44 | var ANGLE = 60.0; // The rotation angle 45 | var Tx = 0.5; // Translation distance 46 | modelMatrix.setRotate(ANGLE, 0, 0, 1); // Set rotation matrix 47 | modelMatrix.translate(Tx, 0, 0); // Multiply modelMatrix by the calculated translation matrix 48 | 49 | // Pass the model matrix to the vertex shader 50 | var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix'); 51 | if (!u_ModelMatrix) { 52 | console.log('Failed to get the storage location of u_xformMatrix'); 53 | return; 54 | } 55 | gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements); 56 | 57 | // Specify the color for clearing 58 | gl.clearColor(0, 0, 0, 1); 59 | 60 | // Clear 61 | gl.clear(gl.COLOR_BUFFER_BIT); 62 | 63 | // Draw the rectangle 64 | gl.drawArrays(gl.TRIANGLES, 0, n); 65 | } 66 | 67 | function initVertexBuffers(gl) { 68 | var vertices = new Float32Array([ 69 | 0, 0.3, -0.3, -0.3, 0.3, -0.3 70 | ]); 71 | var n = 3; // The number of vertices 72 | 73 | // Create a buffer object 74 | var vertexBuffer = gl.createBuffer(); 75 | if (!vertexBuffer) { 76 | console.log('Failed to create the buffer object'); 77 | return false; 78 | } 79 | 80 | // Bind the buffer object to target 81 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 82 | // Write date into the buffer object 83 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 84 | 85 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 86 | if (a_Position < 0) { 87 | console.log('Failed to get the storage location of a_Position'); 88 | return -1; 89 | } 90 | // Assign the buffer object to a_Position variable 91 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 92 | 93 | // Enable the assignment to a_Position variable 94 | gl.enableVertexAttribArray(a_Position); 95 | 96 | return n; 97 | } 98 | 99 | -------------------------------------------------------------------------------- /ch04/RotatedTriangle_Matrix4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rotate A Triangle (Matrix4) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch04/RotatedTriangle_Matrix4.js: -------------------------------------------------------------------------------- 1 | // RotatedTriangle_Matrix4.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'uniform mat4 u_xformMatrix;\n' + 6 | 'void main() {\n' + 7 | ' gl_Position = u_xformMatrix * a_Position;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | 'void main() {\n' + 13 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 14 | '}\n'; 15 | 16 | function main() { 17 | // Retrieve element 18 | var canvas = document.getElementById('webgl'); 19 | 20 | // Get the rendering context for WebGL 21 | var gl = getWebGLContext(canvas); 22 | if (!gl) { 23 | console.log('Failed to get the rendering context for WebGL'); 24 | return; 25 | } 26 | 27 | // Initialize shaders 28 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 29 | console.log('Failed to intialize shaders.'); 30 | return; 31 | } 32 | 33 | // Write the positions of vertices to a vertex shader 34 | var n = initVertexBuffers(gl); 35 | if (n < 0) { 36 | console.log('Failed to set the positions of the vertices'); 37 | return; 38 | } 39 | 40 | // Create Matrix4 object for the rotation matrix 41 | var xformMatrix = new Matrix4(); 42 | 43 | // Set the rotation matrix 44 | var ANGLE = 90.0; // The rotation angle 45 | xformMatrix.setRotate(ANGLE, 0, 0, 1); 46 | 47 | // Pass the rotation matrix to the vertex shader 48 | var u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix'); 49 | if (!u_xformMatrix) { 50 | console.log('Failed to get the storage location of u_xformMatrix'); 51 | return; 52 | } 53 | gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix.elements); 54 | 55 | // Specify the color for clearing 56 | gl.clearColor(0, 0, 0, 1); 57 | 58 | // Clear 59 | gl.clear(gl.COLOR_BUFFER_BIT); 60 | 61 | // Draw the rectangle 62 | gl.drawArrays(gl.TRIANGLES, 0, n); 63 | } 64 | 65 | function initVertexBuffers(gl) { 66 | var vertices = new Float32Array([ 67 | 0, 0.5, -0.5, -0.5, 0.5, -0.5 68 | ]); 69 | var n = 3; // The number of vertices 70 | 71 | // Create a buffer object 72 | var vertexBuffer = gl.createBuffer(); 73 | if (!vertexBuffer) { 74 | console.log('Failed to create the buffer object'); 75 | return false; 76 | } 77 | 78 | // Bind the buffer object to target 79 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 80 | // Write date into the buffer object 81 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 82 | 83 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 84 | if (a_Position < 0) { 85 | console.log('Failed to get the storage location of a_Position'); 86 | return -1; 87 | } 88 | // Assign the buffer object to a_Position variable 89 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 90 | 91 | // Enable the assignment to a_Position variable 92 | gl.enableVertexAttribArray(a_Position); 93 | 94 | return n; 95 | } 96 | 97 | -------------------------------------------------------------------------------- /ch04/RotatingTranslatedTriangle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Continually Rotate A Translated Triangle 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch04/RotatingTranslatedTriangle.js: -------------------------------------------------------------------------------- 1 | // RotatingTranslatedTriangle.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'uniform mat4 u_ModelMatrix;\n' + 6 | 'void main() {\n' + 7 | ' gl_Position = u_ModelMatrix * a_Position;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | 'void main() {\n' + 13 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 14 | '}\n'; 15 | 16 | // Rotation angle (degrees/second) 17 | var ANGLE_STEP = 45.0; 18 | 19 | function main() { 20 | // Retrieve element 21 | var canvas = document.getElementById('webgl'); 22 | 23 | // Get the rendering context for WebGL 24 | var gl = getWebGLContext(canvas); 25 | if (!gl) { 26 | console.log('Failed to get the rendering context for WebGL'); 27 | return; 28 | } 29 | 30 | // Initialize shaders 31 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 32 | console.log('Failed to intialize shaders.'); 33 | return; 34 | } 35 | 36 | // Write the positions of vertices to a vertex shader 37 | var n = initVertexBuffers(gl); 38 | if (n < 0) { 39 | console.log('Failed to set the positions of the vertices'); 40 | return; 41 | } 42 | 43 | // Specify the color for clearing 44 | gl.clearColor(0, 0, 0, 1); 45 | 46 | // Get storage location of u_ModelMatrix 47 | var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix'); 48 | if (!u_ModelMatrix) { 49 | console.log('Failed to get the storage location of u_ModelMatrix'); 50 | return; 51 | } 52 | 53 | // Current rotation angle 54 | var currentAngle = 0.0; 55 | // Model matrix 56 | var modelMatrix = new Matrix4(); 57 | 58 | // Start drawing 59 | var tick = function() { 60 | currentAngle = animate(currentAngle); // Update the rotation angle 61 | draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix); // Draw the triangle 62 | requestAnimationFrame(tick, canvas); // Request that the browser ?calls tick 63 | }; 64 | tick(); 65 | } 66 | 67 | function initVertexBuffers(gl) { 68 | var vertices = new Float32Array ([ 69 | 0, 0.5, -0.5, -0.5, 0.5, -0.5 70 | ]); 71 | var n = 3; // The number of vertices 72 | 73 | // Create a buffer object 74 | var vertexBuffer = gl.createBuffer(); 75 | if (!vertexBuffer) { 76 | console.log('Failed to create the buffer object'); 77 | return -1; 78 | } 79 | 80 | // Bind the buffer object to target 81 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 82 | // Write date into the buffer object 83 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 84 | 85 | // Assign the buffer object to a_Position variable 86 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 87 | if(a_Position < 0) { 88 | console.log('Failed to get the storage location of a_Position'); 89 | return -1; 90 | } 91 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 92 | 93 | // Enable the assignment to a_Position variable 94 | gl.enableVertexAttribArray(a_Position); 95 | 96 | return n; 97 | } 98 | 99 | function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) { 100 | // Set the rotation matrix 101 | modelMatrix.setRotate(currentAngle, 0, 0, 1); 102 | modelMatrix.translate(0.35, 0, 0); 103 | 104 | // Pass the rotation matrix to the vertex shader 105 | gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements); 106 | 107 | // Clear 108 | gl.clear(gl.COLOR_BUFFER_BIT); 109 | 110 | // Draw the rectangle 111 | gl.drawArrays(gl.TRIANGLES, 0, n); 112 | } 113 | 114 | // Last time that this function was called 115 | var g_last = Date.now(); 116 | function animate(angle) { 117 | // Calculate the elapsed time 118 | var now = Date.now(); 119 | var elapsed = now - g_last; 120 | g_last = now; 121 | // Update the current rotation angle (adjusted by the elapsed time) 122 | var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0; 123 | return newAngle %= 360; 124 | } 125 | -------------------------------------------------------------------------------- /ch04/RotatingTriangle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Continually Rotate A Triangle 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch04/RotatingTriangle.js: -------------------------------------------------------------------------------- 1 | // RotatingTriangle.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'uniform mat4 u_ModelMatrix;\n' + 6 | 'void main() {\n' + 7 | ' gl_Position = u_ModelMatrix * a_Position;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | 'void main() {\n' + 13 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 14 | '}\n'; 15 | 16 | // Rotation angle (degrees/second) 17 | var ANGLE_STEP = 45.0; 18 | 19 | function main() { 20 | // Retrieve element 21 | var canvas = document.getElementById('webgl'); 22 | 23 | // Get the rendering context for WebGL 24 | var gl = getWebGLContext(canvas); 25 | if (!gl) { 26 | console.log('Failed to get the rendering context for WebGL'); 27 | return; 28 | } 29 | 30 | // Initialize shaders 31 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 32 | console.log('Failed to intialize shaders.'); 33 | return; 34 | } 35 | 36 | // Write the positions of vertices to a vertex shader 37 | var n = initVertexBuffers(gl); 38 | if (n < 0) { 39 | console.log('Failed to set the positions of the vertices'); 40 | return; 41 | } 42 | 43 | // Specify the color for clearing 44 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 45 | 46 | // Get storage location of u_ModelMatrix 47 | var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix'); 48 | if (!u_ModelMatrix) { 49 | console.log('Failed to get the storage location of u_ModelMatrix'); 50 | return; 51 | } 52 | 53 | // Current rotation angle 54 | var currentAngle = 0.0; 55 | // Model matrix 56 | var modelMatrix = new Matrix4(); 57 | 58 | // Start drawing 59 | var tick = function() { 60 | currentAngle = animate(currentAngle); // Update the rotation angle 61 | draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix); // Draw the triangle 62 | requestAnimationFrame(tick, canvas); // Request that the browser calls tick 63 | }; 64 | tick(); 65 | } 66 | 67 | function initVertexBuffers(gl) { 68 | var vertices = new Float32Array ([ 69 | 0, 0.5, -0.5, -0.5, 0.5, -0.5 70 | ]); 71 | var n = 3; // The number of vertices 72 | 73 | // Create a buffer object 74 | var vertexBuffer = gl.createBuffer(); 75 | if (!vertexBuffer) { 76 | console.log('Failed to create the buffer object'); 77 | return -1; 78 | } 79 | 80 | // Bind the buffer object to target 81 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 82 | // Write date into the buffer object 83 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 84 | 85 | // Assign the buffer object to a_Position variable 86 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 87 | if(a_Position < 0) { 88 | console.log('Failed to get the storage location of a_Position'); 89 | return -1; 90 | } 91 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 92 | 93 | // Enable the assignment to a_Position variable 94 | gl.enableVertexAttribArray(a_Position); 95 | 96 | return n; 97 | } 98 | 99 | function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) { 100 | // Set the rotation matrix 101 | modelMatrix.setRotate(currentAngle, 0, 0, 1); // Rotation angle, rotation axis (0, 0, 1) 102 | 103 | // Pass the rotation matrix to the vertex shader 104 | gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements); 105 | 106 | // Clear 107 | gl.clear(gl.COLOR_BUFFER_BIT); 108 | 109 | // Draw the rectangle 110 | gl.drawArrays(gl.TRIANGLES, 0, n); 111 | } 112 | 113 | // Last time that this function was called 114 | var g_last = Date.now(); 115 | function animate(angle) { 116 | // Calculate the elapsed time 117 | var now = Date.now(); 118 | var elapsed = now - g_last; 119 | g_last = now; 120 | // Update the current rotation angle (adjusted by the elapsed time) 121 | var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0; 122 | return newAngle %= 360; 123 | } 124 | -------------------------------------------------------------------------------- /ch04/RotatingTriangle_withButtons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Continually Rotate A Triangle (Button) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 |

13 | 14 | 15 |

16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /ch04/RotatingTriangle_withButtons.js: -------------------------------------------------------------------------------- 1 | // RotatingTranslatedTriangle.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'uniform mat4 u_ModelMatrix;\n' + 6 | 'void main() {\n' + 7 | ' gl_Position = u_ModelMatrix * a_Position;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | 'void main() {\n' + 13 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 14 | '}\n'; 15 | 16 | // Rotation angle (degrees/second) 17 | var ANGLE_STEP = 45.0; 18 | 19 | function main() { 20 | // Retrieve element 21 | var canvas = document.getElementById('webgl'); 22 | 23 | // Get the rendering context for WebGL 24 | var gl = getWebGLContext(canvas); 25 | if (!gl) { 26 | console.log('Failed to get the rendering context for WebGL'); 27 | return; 28 | } 29 | 30 | // Initialize shaders 31 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 32 | console.log('Failed to intialize shaders.'); 33 | return; 34 | } 35 | 36 | // Write the positions of vertices to a vertex shader 37 | var n = initVertexBuffers(gl); 38 | if (n < 0) { 39 | console.log('Failed to set the positions of the vertices'); 40 | return; 41 | } 42 | 43 | // Specify the color for clearing 44 | gl.clearColor(0, 0, 0, 1); 45 | 46 | // Get storage location of u_ModelMatrix 47 | var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix'); 48 | if (!u_ModelMatrix) { 49 | console.log('Failed to get the storage location of u_ModelMatrix'); 50 | return; 51 | } 52 | 53 | // Current rotation angle 54 | var currentAngle = 0.0; 55 | // Model matrix 56 | var modelMatrix = new Matrix4(); 57 | 58 | // Start drawing 59 | var tick = function() { 60 | currentAngle = animate(currentAngle); // Update the rotation angle 61 | draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix); // Draw the triangle 62 | requestAnimationFrame(tick, canvas); // Request that the browser ?calls tick 63 | }; 64 | tick(); 65 | } 66 | 67 | function initVertexBuffers(gl) { 68 | var vertices = new Float32Array ([ 69 | 0, 0.5, -0.5, -0.5, 0.5, -0.5 70 | ]); 71 | var n = 3; // The number of vertices 72 | 73 | // Create a buffer object 74 | var vertexBuffer = gl.createBuffer(); 75 | if (!vertexBuffer) { 76 | console.log('Failed to create the buffer object'); 77 | return -1; 78 | } 79 | 80 | // Bind the buffer object to target 81 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 82 | // Write date into the buffer object 83 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 84 | 85 | // Assign the buffer object to a_Position variable 86 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 87 | if(a_Position < 0) { 88 | console.log('Failed to get the storage location of a_Position'); 89 | return -1; 90 | } 91 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 92 | 93 | // Enable the assignment to a_Position variable 94 | gl.enableVertexAttribArray(a_Position); 95 | 96 | return n; 97 | } 98 | 99 | function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) { 100 | // Set the rotation matrix 101 | modelMatrix.setRotate(currentAngle, 0, 0, 1); 102 | modelMatrix.translate(0.35, 0, 0); 103 | 104 | // Pass the rotation matrix to the vertex shader 105 | gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements); 106 | 107 | // Clear 108 | gl.clear(gl.COLOR_BUFFER_BIT); 109 | 110 | // Draw the rectangle 111 | gl.drawArrays(gl.TRIANGLES, 0, n); 112 | } 113 | 114 | // Last time that this function was called 115 | var g_last = Date.now(); 116 | function animate(angle) { 117 | // Calculate the elapsed time 118 | var now = Date.now(); 119 | var elapsed = now - g_last; 120 | g_last = now; 121 | // Update the current rotation angle (adjusted by the elapsed time) 122 | var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0; 123 | return newAngle %= 360; 124 | } 125 | 126 | function up() { 127 | ANGLE_STEP += 10; 128 | } 129 | 130 | function down() { 131 | ANGLE_STEP -= 10; 132 | } 133 | -------------------------------------------------------------------------------- /ch04/TranslatedRotatedTriangle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rotate And Then Translate A Triangle 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch04/TranslatedRotatedTriangle.js: -------------------------------------------------------------------------------- 1 | // TranslatedRotatedTriangle.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'uniform mat4 u_ModelMatrix;\n' + 6 | 'void main() {\n' + 7 | ' gl_Position = u_ModelMatrix * a_Position;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | 'void main() {\n' + 13 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 14 | '}\n'; 15 | 16 | function main() { 17 | // Retrieve element 18 | var canvas = document.getElementById('webgl'); 19 | 20 | // Get the rendering context for WebGL 21 | var gl = getWebGLContext(canvas); 22 | if (!gl) { 23 | console.log('Failed to get the rendering context for WebGL'); 24 | return; 25 | } 26 | 27 | // Initialize shaders 28 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 29 | console.log('Failed to intialize shaders.'); 30 | return; 31 | } 32 | 33 | // Write the positions of vertices to a vertex shader 34 | var n = initVertexBuffers(gl); 35 | if (n < 0) { 36 | console.log('Failed to set the positions of the vertices'); 37 | return; 38 | } 39 | 40 | // Create Matrix4 object for model transformation 41 | var modelMatrix = new Matrix4(); 42 | 43 | // Calculate a model matrix 44 | var ANGLE = 60.0; // The rotation angle 45 | var Tx = 0.5; // Translation distance 46 | modelMatrix.setTranslate(Tx, 0, 0); // Set translation matrix 47 | modelMatrix.rotate(ANGLE, 0, 0, 1); // Multiply modelMatrix by the calculated rotation matrix 48 | 49 | // Pass the model matrix to the vertex shader 50 | var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix'); 51 | if (!u_ModelMatrix) { 52 | console.log('Failed to get the storage location of u_xformMatrix'); 53 | return; 54 | } 55 | gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements); 56 | 57 | // Specify the color for clearing 58 | gl.clearColor(0, 0, 0, 1); 59 | 60 | // Clear 61 | gl.clear(gl.COLOR_BUFFER_BIT); 62 | 63 | // Draw the rectangle 64 | gl.drawArrays(gl.TRIANGLES, 0, n); 65 | } 66 | 67 | function initVertexBuffers(gl) { 68 | var vertices = new Float32Array([ 69 | 0, 0.3, -0.3, -0.3, 0.3, -0.3 70 | ]); 71 | var n = 3; // The number of vertices 72 | 73 | // Create a buffer object 74 | var vertexBuffer = gl.createBuffer(); 75 | if (!vertexBuffer) { 76 | console.log('Failed to create the buffer object'); 77 | return false; 78 | } 79 | 80 | // Bind the buffer object to target 81 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 82 | // Write date into the buffer object 83 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 84 | 85 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 86 | if (a_Position < 0) { 87 | console.log('Failed to get the storage location of a_Position'); 88 | return -1; 89 | } 90 | // Assign the buffer object to a_Position variable 91 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 92 | 93 | // Enable the assignment to a_Position variable 94 | gl.enableVertexAttribArray(a_Position); 95 | 96 | return n; 97 | } 98 | -------------------------------------------------------------------------------- /ch05/ColoredTriangle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw triangle with specification of vertex color 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch05/ColoredTriangle.js: -------------------------------------------------------------------------------- 1 | // ColoredTriangle.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute vec4 a_Color;\n' + 6 | 'varying vec4 v_Color;\n' + 7 | 'void main() {\n' + 8 | ' gl_Position = a_Position;\n' + 9 | ' v_Color = a_Color;\n' + 10 | '}\n'; 11 | 12 | // Fragment shader program 13 | var FSHADER_SOURCE = 14 | '#ifdef GL_ES\n' + 15 | 'precision mediump float;\n' + 16 | '#endif GL_ES\n' + 17 | 'varying vec4 v_Color;\n' + 18 | 'void main() {\n' + 19 | ' gl_FragColor = v_Color;\n' + 20 | '}\n'; 21 | 22 | function main() { 23 | // Retrieve element 24 | var canvas = document.getElementById('webgl'); 25 | 26 | // Get the rendering context for WebGL 27 | var gl = getWebGLContext(canvas); 28 | if (!gl) { 29 | console.log('Failed to get the rendering context for WebGL'); 30 | return; 31 | } 32 | 33 | // Initialize shaders 34 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 35 | console.log('Failed to intialize shaders.'); 36 | return; 37 | } 38 | 39 | // 40 | var n = initVertexBuffers(gl); 41 | if (n < 0) { 42 | console.log('Failed to set the vertex information'); 43 | return; 44 | } 45 | 46 | // Specify the color for clearing 47 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 48 | 49 | // Clear 50 | gl.clear(gl.COLOR_BUFFER_BIT); 51 | 52 | // Draw the rectangle 53 | gl.drawArrays(gl.TRIANGLES, 0, n); 54 | } 55 | 56 | function initVertexBuffers(gl) { 57 | var verticesColors = new Float32Array([ 58 | // Vertex coordinates and color 59 | 0.0, 0.5, 1.0, 0.0, 0.0, 60 | -0.5, -0.5, 0.0, 1.0, 0.0, 61 | 0.5, -0.5, 0.0, 0.0, 1.0, 62 | ]); 63 | var n = 3; 64 | 65 | // Create a buffer object 66 | var vertexColorBuffer = gl.createBuffer(); 67 | if (!vertexColorBuffer) { 68 | console.log('Failed to create the buffer object'); 69 | return false; 70 | } 71 | 72 | // Bind the buffer object to target 73 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); 74 | gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); 75 | 76 | var FSIZE = verticesColors.BYTES_PER_ELEMENT; 77 | //Get the storage location of a_Position, assign and enable buffer 78 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 79 | if (a_Position < 0) { 80 | console.log('Failed to get the storage location of a_Position'); 81 | return -1; 82 | } 83 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0); 84 | gl.enableVertexAttribArray(a_Position); // Enable the assignment of the buffer object 85 | 86 | // Get the storage location of a_Position, assign buffer and enable 87 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 88 | if(a_Color < 0) { 89 | console.log('Failed to get the storage location of a_Color'); 90 | return -1; 91 | } 92 | gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2); 93 | gl.enableVertexAttribArray(a_Color); // Enable the assignment of the buffer object 94 | 95 | // Unbind the buffer object 96 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 97 | 98 | return n; 99 | } 100 | -------------------------------------------------------------------------------- /ch05/HelloTriangle_FragCoord.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Change triangle color by FragCoord 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch05/HelloTriangle_FragCoord.js: -------------------------------------------------------------------------------- 1 | // HelloTriangle_FragCoord.js (c) 2012 matsuda 2 | // 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 | 'precision mediump float;\n' + 12 | 'uniform float u_Width;\n' + 13 | 'uniform float u_Height;\n' + 14 | 'void main() {\n' + 15 | ' gl_FragColor = vec4(gl_FragCoord.x/u_Width, 0.0, gl_FragCoord.y/u_Height, 1.0);\n' + 16 | '}\n'; 17 | 18 | function main() { 19 | // Retrieve element 20 | var canvas = document.getElementById('webgl'); 21 | 22 | // Get the rendering context for WebGL 23 | var gl = getWebGLContext(canvas); 24 | if (!gl) { 25 | console.log('Failed to get the rendering context for WebGL'); 26 | return; 27 | } 28 | 29 | // Initialize shaders 30 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 31 | console.log('Failed to intialize shaders.'); 32 | return; 33 | } 34 | 35 | // Write the positions of vertices to a vertex shader 36 | var n = initVertexBuffers(gl); 37 | if (n < 0) { 38 | console.log('Failed to set the positions of the vertices'); 39 | return; 40 | } 41 | 42 | // Specify the color for clearing 43 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 44 | 45 | // Clear 46 | gl.clear(gl.COLOR_BUFFER_BIT); 47 | 48 | // Draw the rectangle 49 | gl.drawArrays(gl.TRIANGLES, 0, n); 50 | } 51 | 52 | function initVertexBuffers(gl) { 53 | var vertices = new Float32Array([ 54 | 0, 0.5, -0.5, -0.5, 0.5, -0.5 55 | ]); 56 | var n = 3; // The number of vertices 57 | 58 | // Create a buffer object 59 | var vertexBuffer = gl.createBuffer(); 60 | if (!vertexBuffer) { 61 | console.log('Failed to create the buffer object'); 62 | return -1; 63 | } 64 | 65 | // Bind the buffer object to target 66 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 67 | // Write date into the buffer object 68 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 69 | 70 | // Pass the position of a point to a_Position variable 71 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 72 | if (a_Position < 0) { 73 | console.log('Failed to get the storage location of a_Position'); 74 | return -1; 75 | } 76 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 77 | 78 | var u_Width = gl.getUniformLocation(gl.program, 'u_Width'); 79 | if (!u_Width) { 80 | console.log('Failed to get the storage location of u_Width'); 81 | return; 82 | } 83 | 84 | var u_Height = gl.getUniformLocation(gl.program, 'u_Height'); 85 | if (!u_Height) { 86 | console.log('Failed to get the storage location of u_Height'); 87 | return; 88 | } 89 | 90 | // Pass the width and hight of the 91 | gl.uniform1f(u_Width, gl.drawingBufferWidth); 92 | gl.uniform1f(u_Height, gl.drawingBufferHeight); 93 | 94 | // Enable the generic vertex attribute array 95 | gl.enableVertexAttribArray(a_Position); 96 | 97 | // Unbind the buffer object 98 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 99 | 100 | return n; 101 | } 102 | -------------------------------------------------------------------------------- /ch05/MultiAttributeColor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw points with specified color 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch05/MultiAttributeColor.js: -------------------------------------------------------------------------------- 1 | // MultiAttributeColor.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute vec4 a_Color;\n' + 6 | 'varying vec4 v_Color;\n' + // varying variable 7 | 'void main() {\n' + 8 | ' gl_Position = a_Position;\n' + 9 | ' gl_PointSize = 10.0;\n' + 10 | ' v_Color = a_Color;\n' + // Pass the data to the fragment shader 11 | '}\n'; 12 | 13 | // Fragment shader program 14 | var FSHADER_SOURCE = 15 | '#ifdef GL_ES\n' + 16 | 'precision mediump float;\n' + // Precision qualifier (See Chapter 6) 17 | '#endif GL_ES\n' + 18 | 'varying vec4 v_Color;\n' + // Receive the data from the vertex shader 19 | 'void main() {\n' + 20 | ' gl_FragColor = v_Color;\n' + 21 | '}\n'; 22 | 23 | function main() { 24 | // Retrieve element 25 | var canvas = document.getElementById('webgl'); 26 | 27 | // Get the rendering context for WebGL 28 | var gl = getWebGLContext(canvas); 29 | if (!gl) { 30 | console.log('Failed to get the rendering context for WebGL'); 31 | return; 32 | } 33 | 34 | // Initialize shaders 35 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 36 | console.log('Failed to intialize shaders.'); 37 | return; 38 | } 39 | 40 | // 41 | var n = initVertexBuffers(gl); 42 | if (n < 0) { 43 | console.log('Failed to set the vertex information'); 44 | return; 45 | } 46 | 47 | // Specify the color for clearing 48 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 49 | 50 | // Clear 51 | gl.clear(gl.COLOR_BUFFER_BIT); 52 | 53 | // Draw three points 54 | gl.drawArrays(gl.POINTS, 0, n); 55 | } 56 | 57 | function initVertexBuffers(gl) { 58 | var verticesColors = new Float32Array([ 59 | // Vertex coordinates and color 60 | 0.0, 0.5, 1.0, 0.0, 0.0, 61 | -0.5, -0.5, 0.0, 1.0, 0.0, 62 | 0.5, -0.5, 0.0, 0.0, 1.0, 63 | ]); 64 | var n = 3; // The number of vertices 65 | 66 | // Create a buffer object 67 | var vertexColorBuffer = gl.createBuffer(); 68 | if (!vertexColorBuffer) { 69 | console.log('Failed to create the buffer object'); 70 | return false; 71 | } 72 | 73 | // Write the vertex coordinates and colors to the buffer object 74 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); 75 | gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); 76 | 77 | var FSIZE = verticesColors.BYTES_PER_ELEMENT; 78 | //Get the storage location of a_Position, assign and enable buffer 79 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 80 | if (a_Position < 0) { 81 | console.log('Failed to get the storage location of a_Position'); 82 | return -1; 83 | } 84 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0); 85 | gl.enableVertexAttribArray(a_Position); // Enable the assignment of the buffer object 86 | 87 | // Get the storage location of a_Position, assign buffer and enable 88 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 89 | if(a_Color < 0) { 90 | console.log('Failed to get the storage location of a_Color'); 91 | return -1; 92 | } 93 | gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2); 94 | gl.enableVertexAttribArray(a_Color); // Enable the assignment of the buffer object 95 | 96 | return n; 97 | } 98 | -------------------------------------------------------------------------------- /ch05/MultiAttributeSize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw points with specified size 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch05/MultiAttributeSize.js: -------------------------------------------------------------------------------- 1 | // MultiAttributeSize.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute float a_PointSize;\n' + 6 | 'void main() {\n' + 7 | ' gl_Position = a_Position;\n' + 8 | ' gl_PointSize = a_PointSize;\n' + 9 | '}\n'; 10 | 11 | // Fragment shader program 12 | var FSHADER_SOURCE = 13 | 'void main() {\n' + 14 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 15 | '}\n'; 16 | 17 | function main() { 18 | // Retrieve element 19 | var canvas = document.getElementById('webgl'); 20 | 21 | // Get the rendering context for WebGL 22 | var gl = getWebGLContext(canvas); 23 | if (!gl) { 24 | console.log('Failed to get the rendering context for WebGL'); 25 | return; 26 | } 27 | 28 | // Initialize shaders 29 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 30 | console.log('Failed to intialize shaders.'); 31 | return; 32 | } 33 | 34 | // Set the vertex information 35 | var n = initVertexBuffers(gl); 36 | if (n < 0) { 37 | console.log('Failed to set the positions of the vertices'); 38 | return; 39 | } 40 | 41 | // Specify the color for clearing 42 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 43 | 44 | // Clear 45 | gl.clear(gl.COLOR_BUFFER_BIT); 46 | 47 | // Draw three points 48 | gl.drawArrays(gl.POINTS, 0, n); 49 | } 50 | 51 | function initVertexBuffers(gl) { 52 | var vertices = new Float32Array([ 53 | 0.0, 0.5, -0.5, -0.5, 0.5, -0.5 54 | ]); 55 | var n = 3; 56 | 57 | var sizes = new Float32Array([ 58 | 10.0, 20.0, 30.0 // Point sizes 59 | ]); 60 | 61 | // Create a buffer object 62 | var vertexBuffer = gl.createBuffer(); 63 | var sizeBuffer = gl.createBuffer(); 64 | if (!vertexBuffer || !sizeBuffer) { 65 | console.log('Failed to create the buffer object'); 66 | return -1; 67 | } 68 | 69 | // Write vertex coordinates to the buffer object and enable it 70 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 71 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 72 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 73 | if(a_Position < 0) { 74 | console.log('Failed to get the storage location of a_Position'); 75 | return -1; 76 | } 77 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 78 | gl.enableVertexAttribArray(a_Position); 79 | 80 | // Bind the point size buffer object to target 81 | gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer); 82 | gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.STATIC_DRAW); 83 | var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize'); 84 | if(a_PointSize < 0) { 85 | console.log('Failed to get the storage location of a_PointSize'); 86 | return -1; 87 | } 88 | gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, 0, 0); 89 | gl.enableVertexAttribArray(a_PointSize); 90 | 91 | // Unbind the buffer object 92 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 93 | 94 | return n; 95 | } 96 | -------------------------------------------------------------------------------- /ch05/MultiAttributeSize_Interleaved.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw points with specified size (Stride) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch05/MultiAttributeSize_Interleaved.js: -------------------------------------------------------------------------------- 1 | // MultiAttributeSize_Interleaved.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute float a_PointSize;\n' + 6 | 'void main() {\n' + 7 | ' gl_Position = a_Position;\n' + 8 | ' gl_PointSize = a_PointSize;\n' + 9 | '}\n'; 10 | 11 | // Fragment shader program 12 | var FSHADER_SOURCE = 13 | 'void main() {\n' + 14 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 15 | '}\n'; 16 | 17 | function main() { 18 | // Retrieve element 19 | var canvas = document.getElementById('webgl'); 20 | 21 | // Get the rendering context for WebGL 22 | var gl = getWebGLContext(canvas); 23 | if (!gl) { 24 | console.log('Failed to get the rendering context for WebGL'); 25 | return; 26 | } 27 | 28 | // Initialize shaders 29 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 30 | console.log('Failed to intialize shaders.'); 31 | return; 32 | } 33 | 34 | // Set vertex coordinates and point sizes 35 | var n = initVertexBuffers(gl); 36 | if (n < 0) { 37 | console.log('Failed to set the vertex information'); 38 | return; 39 | } 40 | 41 | // Specify the color for clearing 42 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 43 | 44 | // Clear 45 | gl.clear(gl.COLOR_BUFFER_BIT); 46 | 47 | // Draw three points 48 | gl.drawArrays(gl.POINTS, 0, n); 49 | } 50 | 51 | function initVertexBuffers(gl) { 52 | var verticesSizes = new Float32Array([ 53 | // Coordinate and size of points 54 | 0.0, 0.5, 10.0, // the 1st point 55 | -0.5, -0.5, 20.0, // the 2nd point 56 | 0.5, -0.5, 30.0 // the 3rd point 57 | ]); 58 | var n = 3; // The number of vertices 59 | 60 | // Create a buffer object 61 | var vertexSizeBuffer = gl.createBuffer(); 62 | if (!vertexSizeBuffer) { 63 | console.log('Failed to create the buffer object'); 64 | return -1; 65 | } 66 | 67 | // Bind the buffer object to target 68 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexSizeBuffer); 69 | gl.bufferData(gl.ARRAY_BUFFER, verticesSizes, gl.STATIC_DRAW); 70 | 71 | var FSIZE = verticesSizes.BYTES_PER_ELEMENT; 72 | //Get the storage location of a_Position, assign and enable buffer 73 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 74 | if (a_Position < 0) { 75 | console.log('Failed to get the storage location of a_Position'); 76 | return -1; 77 | } 78 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 3, 0); 79 | gl.enableVertexAttribArray(a_Position); // Enable the assignment of the buffer object 80 | 81 | // Get the storage location of a_PointSize 82 | var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize'); 83 | if(a_PointSize < 0) { 84 | console.log('Failed to get the storage location of a_PointSize'); 85 | return -1; 86 | } 87 | gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 3, FSIZE * 2); 88 | gl.enableVertexAttribArray(a_PointSize); // Enable buffer allocation 89 | 90 | // Unbind the buffer object 91 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 92 | 93 | return n; 94 | } 95 | -------------------------------------------------------------------------------- /ch05/MultiTexture.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw quad with multiple textures 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch05/TexturedQuad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw quad with texture 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch05/TexturedQuad_Clamp_Mirror.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw quad with texture (Clamp, Mirror) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch05/TexturedQuad_Repeat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw quad with texture (Repeat) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/ColoredCube.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw cube with specification of face color 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/ColoredCube_singleColor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Draw cube with specification of single color 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/DepthBuffer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Depth Buffer 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/HelloCube.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello cube 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/HelloCube.js: -------------------------------------------------------------------------------- 1 | // HelloCube.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute vec4 a_Color;\n' + 6 | 'uniform mat4 u_MvpMatrix;\n' + 7 | 'varying vec4 v_Color;\n' + 8 | 'void main() {\n' + 9 | ' gl_Position = u_MvpMatrix * a_Position;\n' + 10 | ' v_Color = a_Color;\n' + 11 | '}\n'; 12 | 13 | // Fragment shader program 14 | var FSHADER_SOURCE = 15 | '#ifdef GL_ES\n' + 16 | 'precision mediump float;\n' + 17 | '#endif\n' + 18 | 'varying vec4 v_Color;\n' + 19 | 'void main() {\n' + 20 | ' gl_FragColor = v_Color;\n' + 21 | '}\n'; 22 | 23 | function main() { 24 | // Retrieve element 25 | var canvas = document.getElementById('webgl'); 26 | 27 | // Get the rendering context for WebGL 28 | var gl = getWebGLContext(canvas); 29 | if (!gl) { 30 | console.log('Failed to get the rendering context for WebGL'); 31 | return; 32 | } 33 | 34 | // Initialize shaders 35 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 36 | console.log('Failed to intialize shaders.'); 37 | return; 38 | } 39 | 40 | // Set the vertex coordinates and color 41 | var n = initVertexBuffers(gl); 42 | if (n < 0) { 43 | console.log('Failed to set the vertex information'); 44 | return; 45 | } 46 | 47 | // Set clear color and enable hidden surface removal 48 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 49 | gl.enable(gl.DEPTH_TEST); 50 | 51 | // Get the storage location of u_MvpMatrix 52 | var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix'); 53 | if (!u_MvpMatrix) { 54 | console.log('Failed to get the storage location of u_MvpMatrix'); 55 | return; 56 | } 57 | 58 | // Set the eye point and the viewing volume 59 | var mvpMatrix = new Matrix4(); 60 | mvpMatrix.setPerspective(30, 1, 1, 100); 61 | mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0); 62 | 63 | // Pass the model view projection matrix to u_MvpMatrix 64 | gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements); 65 | 66 | // Clear color and depth buffer 67 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 68 | 69 | // Draw the cube 70 | gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); 71 | } 72 | 73 | function initVertexBuffers(gl) { 74 | // Create a cube 75 | // v6----- v5 76 | // /| /| 77 | // v1------v0| 78 | // | | | | 79 | // | |v7---|-|v4 80 | // |/ |/ 81 | // v2------v3 82 | var verticesColors = new Float32Array([ 83 | // Vertex coordinates and color 84 | 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, // v0 White 85 | -1.0, 1.0, 1.0, 1.0, 0.0, 1.0, // v1 Magenta 86 | -1.0, -1.0, 1.0, 1.0, 0.0, 0.0, // v2 Red 87 | 1.0, -1.0, 1.0, 1.0, 1.0, 0.0, // v3 Yellow 88 | 1.0, -1.0, -1.0, 0.0, 1.0, 0.0, // v4 Green 89 | 1.0, 1.0, -1.0, 0.0, 1.0, 1.0, // v5 Cyan 90 | -1.0, 1.0, -1.0, 0.0, 0.0, 1.0, // v6 Blue 91 | -1.0, -1.0, -1.0, 0.0, 0.0, 0.0 // v7 Black 92 | ]); 93 | 94 | // Indices of the vertices 95 | var indices = new Uint8Array([ 96 | 0, 1, 2, 0, 2, 3, // front 97 | 0, 3, 4, 0, 4, 5, // right 98 | 0, 5, 6, 0, 6, 1, // up 99 | 1, 6, 7, 1, 7, 2, // left 100 | 7, 4, 3, 7, 3, 2, // down 101 | 4, 7, 6, 4, 6, 5 // back 102 | ]); 103 | 104 | // Create a buffer object 105 | var vertexColorBuffer = gl.createBuffer(); 106 | var indexBuffer = gl.createBuffer(); 107 | if (!vertexColorBuffer || !indexBuffer) { 108 | return -1; 109 | } 110 | 111 | // Write the vertex coordinates and color to the buffer object 112 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); 113 | gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); 114 | 115 | var FSIZE = verticesColors.BYTES_PER_ELEMENT; 116 | // Assign the buffer object to a_Position and enable the assignment 117 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 118 | if(a_Position < 0) { 119 | console.log('Failed to get the storage location of a_Position'); 120 | return -1; 121 | } 122 | gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0); 123 | gl.enableVertexAttribArray(a_Position); 124 | // Assign the buffer object to a_Color and enable the assignment 125 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 126 | if(a_Color < 0) { 127 | console.log('Failed to get the storage location of a_Color'); 128 | return -1; 129 | } 130 | gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3); 131 | gl.enableVertexAttribArray(a_Color); 132 | 133 | // Write the indices to the buffer object 134 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); 135 | gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); 136 | 137 | return indices.length; 138 | } 139 | -------------------------------------------------------------------------------- /ch07/HelloCube_singleColor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello cube (single color) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/HelloCube_singleColor.js: -------------------------------------------------------------------------------- 1 | // HelloCube_singleColor.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute vec4 a_Color;\n' + 6 | 'uniform mat4 u_MvpMatrix;\n' + 7 | 'varying vec4 v_Color;\n' + 8 | 'void main() {\n' + 9 | ' gl_Position = u_MvpMatrix * a_Position;\n' + 10 | ' v_Color = a_Color;\n' + 11 | '}\n'; 12 | 13 | // Fragment shader program 14 | var FSHADER_SOURCE = 15 | '#ifdef GL_ES\n' + 16 | 'precision mediump float;\n' + 17 | '#endif\n' + 18 | 'varying vec4 v_Color;\n' + 19 | 'void main() {\n' + 20 | ' gl_FragColor = v_Color;\n' + 21 | '}\n'; 22 | 23 | function main() { 24 | // Retrieve element 25 | var canvas = document.getElementById('webgl'); 26 | 27 | // Get the rendering context for WebGL 28 | var gl = getWebGLContext(canvas); 29 | if (!gl) { 30 | console.log('Failed to get the rendering context for WebGL'); 31 | return; 32 | } 33 | 34 | // Initialize shaders 35 | initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE); 36 | 37 | // 38 | var n = initVertexBuffers(gl); 39 | if (n < 0) { 40 | console.log('Failed to initialize buffer objects'); 41 | return; 42 | } 43 | 44 | // Set clear color and enable hidden surface removal 45 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 46 | gl.enable(gl.DEPTH_TEST); 47 | 48 | // Get the storage location of u_mvpMatrix 49 | var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix'); 50 | if(!u_MvpMatrix) { 51 | console.log('Failed to get the storage location of u_MvpMatrix'); 52 | return; 53 | } 54 | 55 | // Set the viewing volume 56 | var mvpMatrix = new Matrix4(); 57 | mvpMatrix.setPerspective(30, 1, 1, 100); 58 | mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0); 59 | 60 | // Pass the model view projection matrix 61 | gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements); 62 | 63 | // Clear color and depth buffer 64 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 65 | 66 | // Draw the cube 67 | gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); 68 | } 69 | 70 | function initVertexBuffers(gl) { 71 | var verticesColors = new Float32Array([ 72 | // Vertex coordinates and color 73 | 1, 1, 1, 0, 0, 0, // White 74 | -1, 1, 1, 0, 0, 0, // White 75 | -1, -1, 1, 0, 0, 0, // White 76 | 1, -1, 1, 0, 0, 0, // White 77 | 1, -1, -1, 0, 0, 0, // White 78 | 1, 1, -1, 0, 0, 0, // White 79 | -1, 1, -1, 0, 0, 0, // White 80 | -1, -1, -1, 0, 0, 0 // White 81 | ]); 82 | 83 | // Indices of the vertices 84 | var indices = new Uint8Array([ 85 | 0, 1, 2, 0, 2, 3, // front 86 | 0, 3, 4, 0, 4, 5, // right 87 | 0, 5, 6, 0, 6, 1, // up 88 | 1, 6, 7, 1, 7, 2, // left 89 | 7, 4, 3, 7, 3, 2, // down 90 | 4, 7, 6, 4, 6, 5 // back 91 | ]); 92 | 93 | // Create a buffer object 94 | var vertexColorBuffer = gl.createBuffer(); 95 | var indexBuffer = gl.createBuffer(); 96 | if (!vertexColorBuffer || !indexBuffer) { 97 | return -1; 98 | } 99 | 100 | // Write vertex information to buffer object 101 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); 102 | gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); 103 | 104 | var FSIZE = verticesColors.BYTES_PER_ELEMENT; 105 | 106 | // Assign the buffer object to a_Position variable 107 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 108 | if(a_Position < 0) { 109 | console.log('Failed to get the storage location of a_Position'); 110 | return -1; 111 | } 112 | gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0); 113 | gl.enableVertexAttribArray(a_Position); 114 | 115 | // Assign the buffer object to a_Color variable 116 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 117 | if(a_Color < 0) { 118 | console.log('Failed to get the storage location of a_Color'); 119 | return -1; 120 | } 121 | gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3); 122 | gl.enableVertexAttribArray(a_Color); 123 | 124 | // Unbind the buffer object 125 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 126 | 127 | // Write the indices to the buffer object 128 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); 129 | gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); 130 | 131 | return indices.length; 132 | } 133 | -------------------------------------------------------------------------------- /ch07/LookAtRotatedTriangles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Look rotated triangle from slant 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/LookAtRotatedTriangles.js: -------------------------------------------------------------------------------- 1 | // LookAtRotatedTriangles.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute vec4 a_Color;\n' + 6 | 'uniform mat4 u_ViewMatrix;\n' + 7 | 'uniform mat4 u_ModelMatrix;\n' + 8 | 'varying vec4 v_Color;\n' + 9 | 'void main() {\n' + 10 | ' gl_Position = u_ViewMatrix * u_ModelMatrix * a_Position;\n' + 11 | ' v_Color = a_Color;\n' + 12 | '}\n'; 13 | 14 | // Fragment shader program 15 | var FSHADER_SOURCE = 16 | '#ifdef GL_ES\n' + 17 | 'precision mediump float;\n' + 18 | '#endif\n' + 19 | 'varying vec4 v_Color;\n' + 20 | 'void main() {\n' + 21 | ' gl_FragColor = v_Color;\n' + 22 | '}\n'; 23 | 24 | function main() { 25 | // Retrieve element 26 | var canvas = document.getElementById('webgl'); 27 | 28 | // Get the rendering context for WebGL 29 | var gl = getWebGLContext(canvas); 30 | if (!gl) { 31 | console.log('Failed to get the rendering context for WebGL'); 32 | return; 33 | } 34 | 35 | // Initialize shaders 36 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 37 | console.log('Failed to intialize shaders.'); 38 | return; 39 | } 40 | 41 | // Set the vertex coordinates and color (the blue triangle is in the front) 42 | var n = initVertexBuffers(gl); 43 | if (n < 0) { 44 | console.log('Failed to set the vertex information'); 45 | return; 46 | } 47 | 48 | // Specify the color for clearing 49 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 50 | 51 | // Get the storage location of u_ViewMatrix and u_ModelMatrix 52 | var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix'); 53 | var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix'); 54 | if(!u_ViewMatrix || !u_ModelMatrix) { 55 | console.log('Failed to get the storage location of u_viewMatrix or u_ModelMatrix'); 56 | return; 57 | } 58 | 59 | // Set the matrix to be used for to set the camera view 60 | var viewMatrix = new Matrix4(); 61 | viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0); 62 | 63 | // Calculate matrix for rotate 64 | var modelMatrix = new Matrix4(); 65 | modelMatrix.setRotate(-10, 0, 0, 1); // Rotate around z-axis 66 | 67 | // Pass the view projection matrix and model matrix 68 | gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements); 69 | gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements); 70 | 71 | // Clear 72 | gl.clear(gl.COLOR_BUFFER_BIT); 73 | 74 | // Draw the rectangle 75 | gl.drawArrays(gl.TRIANGLES, 0, n); 76 | } 77 | 78 | function initVertexBuffers(gl) { 79 | var verticesColors = new Float32Array([ 80 | // Vertex coordinates and color 81 | 0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // The back green one 82 | -0.5, -0.5, -0.4, 0.4, 1.0, 0.4, 83 | 0.5, -0.5, -0.4, 1.0, 0.4, 0.4, 84 | 85 | 0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // The middle yellow one 86 | -0.5, 0.4, -0.2, 1.0, 1.0, 0.4, 87 | 0.0, -0.6, -0.2, 1.0, 1.0, 0.4, 88 | 89 | 0.0, 0.5, 0.0, 0.4, 0.4, 1.0, // The front blue one 90 | -0.5, -0.5, 0.0, 0.4, 0.4, 1.0, 91 | 0.5, -0.5, 0.0, 1.0, 0.4, 0.4, 92 | ]); 93 | var n = 9; 94 | 95 | // Create a buffer object 96 | var vertexColorBuffer = gl.createBuffer(); 97 | if (!vertexColorBuffer) { 98 | console.log('Failed to create the buffer object'); 99 | return -1; 100 | } 101 | 102 | // Write vertex information to buffer object 103 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); 104 | gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); 105 | 106 | var FSIZE = verticesColors.BYTES_PER_ELEMENT; 107 | // Assign the buffer object to a_Color and enable the assignment 108 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 109 | if(a_Position < 0) { 110 | console.log('Failed to get the storage location of a_Position'); 111 | return -1; 112 | } 113 | gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0); 114 | gl.enableVertexAttribArray(a_Position); 115 | // Assign the buffer object to a_Color and enable the assignment 116 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 117 | if(a_Color < 0) { 118 | console.log('Failed to get the storage location of a_Color'); 119 | return -1; 120 | } 121 | gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3); 122 | gl.enableVertexAttribArray(a_Color); 123 | 124 | // Unbind the buffer object 125 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 126 | 127 | return n; 128 | } 129 | -------------------------------------------------------------------------------- /ch07/LookAtRotatedTriangles_mvMatrix.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Look rotated triangle from slant (Model view matrix) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/LookAtRotatedTriangles_mvMatrix.js: -------------------------------------------------------------------------------- 1 | // LookAtRotatedTriangles_modelViewMatrix.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute vec4 a_Color;\n' + 6 | 'uniform mat4 u_ModelViewMatrix;\n' + 7 | 'varying vec4 v_Color;\n' + 8 | 'void main() {\n' + 9 | ' gl_Position = u_ModelViewMatrix * a_Position;\n' + 10 | ' v_Color = a_Color;\n' + 11 | '}\n'; 12 | 13 | // Fragment shader program 14 | var FSHADER_SOURCE = 15 | '#ifdef GL_ES\n' + 16 | 'precision mediump float;\n' + 17 | '#endif\n' + 18 | 'varying vec4 v_Color;\n' + 19 | 'void main() {\n' + 20 | ' gl_FragColor = v_Color;\n' + 21 | '}\n'; 22 | 23 | function main() { 24 | // Retrieve element 25 | var canvas = document.getElementById('webgl'); 26 | 27 | // Get the rendering context for WebGL 28 | var gl = getWebGLContext(canvas); 29 | if (!gl) { 30 | console.log('Failed to get the rendering context for WebGL'); 31 | return; 32 | } 33 | 34 | // Initialize shaders 35 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 36 | console.log('Failed to intialize shaders.'); 37 | return; 38 | } 39 | 40 | // Set the vertex coordinates and color (the blue triangle is in the front) 41 | var n = initVertexBuffers(gl); 42 | if (n < 0) { 43 | console.log('Failed to set the vertex information'); 44 | return; 45 | } 46 | 47 | // Specify the color for clearing 48 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 49 | 50 | // Get the storage location of u_ModelViewMatrix and u_ModelMatrix 51 | var u_ModelViewMatrix = gl.getUniformLocation(gl.program, 'u_ModelViewMatrix'); 52 | if(!u_ModelViewMatrix) { 53 | console.log('u_ModelViewMatrixの格納場所の取得に失敗'); 54 | return; 55 | } 56 | 57 | // Set the matrix to be used for to set the camera view 58 | var viewMatrix = new Matrix4(); 59 | viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0); 60 | 61 | // Calculate matrix for rotate 62 | var modelMatrix = new Matrix4(); 63 | modelMatrix.setRotate(-10, 0, 0, 1); 64 | 65 | // Multiply model matrix to view matrix 66 | var modelViewMatrix = viewMatrix.multiply(modelMatrix); 67 | 68 | // Pass the model view projection matrix 69 | gl.uniformMatrix4fv(u_ModelViewMatrix, false, modelViewMatrix.elements); 70 | 71 | // Clear 72 | gl.clear(gl.COLOR_BUFFER_BIT); 73 | 74 | // Draw the rectangle 75 | gl.drawArrays(gl.TRIANGLES, 0, n); 76 | } 77 | 78 | function initVertexBuffers(gl) { 79 | var verticesColors = new Float32Array([ 80 | // Vertex coordinates and color 81 | 0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // The back green one 82 | -0.5, -0.5, -0.4, 0.4, 1.0, 0.4, 83 | 0.5, -0.5, -0.4, 1.0, 0.4, 0.4, 84 | 85 | 0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // The middle yellow one 86 | -0.5, 0.4, -0.2, 1.0, 1.0, 0.4, 87 | 0.0, -0.6, -0.2, 1.0, 1.0, 0.4, 88 | 89 | 0.0, 0.5, 0.0, 0.4, 0.4, 1.4, // The front blue one 90 | -0.5, -0.5, 0.0, 0.4, 0.4, 1.0, 91 | 0.5, -0.5, 0.0, 1.0, 0.4, 0.4, 92 | ]); 93 | var n = 9; 94 | 95 | // Create a buffer object 96 | var vertexColorBuffer = gl.createBuffer(); 97 | if (!vertexColorBuffer) { 98 | console.log('Failed to create the buffer object'); 99 | return -1; 100 | } 101 | 102 | // Write the vertex coordinates and color to the buffer object 103 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); 104 | gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); 105 | 106 | var FSIZE = verticesColors.BYTES_PER_ELEMENT; 107 | // Assign the buffer object to a_Position and enable the assignment 108 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 109 | if(a_Position < 0) { 110 | console.log('Failed to get the storage location of a_Position'); 111 | return -1; 112 | } 113 | gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0); 114 | gl.enableVertexAttribArray(a_Position); 115 | // Assign the buffer object to a_Color and enable the assignment 116 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 117 | if(a_Color < 0) { 118 | console.log('Failed to get the storage location of a_Color'); 119 | return -1; 120 | } 121 | gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3); 122 | gl.enableVertexAttribArray(a_Color); 123 | 124 | // Unbind the buffer object 125 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 126 | 127 | return n; 128 | } 129 | -------------------------------------------------------------------------------- /ch07/LookAtTriangles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Look triangle from slant 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/LookAtTriangles.js: -------------------------------------------------------------------------------- 1 | // LookAtTriangles.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute vec4 a_Color;\n' + 6 | 'uniform mat4 u_ViewMatrix;\n' + 7 | 'varying vec4 v_Color;\n' + 8 | 'void main() {\n' + 9 | ' gl_Position = u_ViewMatrix * a_Position;\n' + 10 | ' v_Color = a_Color;\n' + 11 | '}\n'; 12 | 13 | // Fragment shader program 14 | var FSHADER_SOURCE = 15 | '#ifdef GL_ES\n' + 16 | 'precision mediump float;\n' + 17 | '#endif\n' + 18 | 'varying vec4 v_Color;\n' + 19 | 'void main() {\n' + 20 | ' gl_FragColor = v_Color;\n' + 21 | '}\n'; 22 | 23 | function main() { 24 | // Retrieve element 25 | var canvas = document.getElementById('webgl'); 26 | 27 | // Get the rendering context for WebGL 28 | var gl = getWebGLContext(canvas); 29 | if (!gl) { 30 | console.log('Failed to get the rendering context for WebGL'); 31 | return; 32 | } 33 | 34 | // Initialize shaders 35 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 36 | console.log('Failed to intialize shaders.'); 37 | return; 38 | } 39 | 40 | // Set the vertex coordinates and color (the blue triangle is in the front) 41 | var n = initVertexBuffers(gl); 42 | if (n < 0) { 43 | console.log('Failed to set the vertex information'); 44 | return; 45 | } 46 | 47 | // Specify the color for clearing 48 | gl.clearColor(0, 0, 0, 1); 49 | 50 | // Get the storage location of u_ViewMatrix 51 | var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix'); 52 | if (!u_ViewMatrix) { 53 | console.log('Failed to get the storage locations of u_ViewMatrix'); 54 | return; 55 | } 56 | 57 | // Set the matrix to be used for to set the camera view 58 | var viewMatrix = new Matrix4(); 59 | viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0); 60 | 61 | // Set the view matrix 62 | gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements); 63 | 64 | // Clear 65 | gl.clear(gl.COLOR_BUFFER_BIT); 66 | 67 | // Draw the rectangle 68 | gl.drawArrays(gl.TRIANGLES, 0, n); 69 | } 70 | 71 | function initVertexBuffers(gl) { 72 | var verticesColors = new Float32Array([ 73 | // Vertex coordinates and color(RGBA) 74 | 0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // The back green one 75 | -0.5, -0.5, -0.4, 0.4, 1.0, 0.4, 76 | 0.5, -0.5, -0.4, 1.0, 0.4, 0.4, 77 | 78 | 0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // The middle yellow one 79 | -0.5, 0.4, -0.2, 1.0, 1.0, 0.4, 80 | 0.0, -0.6, -0.2, 1.0, 1.0, 0.4, 81 | 82 | 0.0, 0.5, 0.0, 0.4, 0.4, 1.0, // The front blue one 83 | -0.5, -0.5, 0.0, 0.4, 0.4, 1.0, 84 | 0.5, -0.5, 0.0, 1.0, 0.4, 0.4, 85 | ]); 86 | var n = 9; 87 | 88 | // Create a buffer object 89 | var vertexColorbuffer = gl.createBuffer(); 90 | if (!vertexColorbuffer) { 91 | console.log('Failed to create the buffer object'); 92 | return -1; 93 | } 94 | 95 | // Write the vertex coordinates and color to the buffer object 96 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer); 97 | gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); 98 | 99 | var FSIZE = verticesColors.BYTES_PER_ELEMENT; 100 | // Assign the buffer object to a_Position and enable the assignment 101 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 102 | if(a_Position < 0) { 103 | console.log('Failed to get the storage location of a_Position'); 104 | return -1; 105 | } 106 | gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0); 107 | gl.enableVertexAttribArray(a_Position); 108 | 109 | // Assign the buffer object to a_Color and enable the assignment 110 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 111 | if(a_Color < 0) { 112 | console.log('Failed to get the storage location of a_Color'); 113 | return -1; 114 | } 115 | gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3); 116 | gl.enableVertexAttribArray(a_Color); 117 | 118 | // Unbind the buffer object 119 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 120 | 121 | return n; 122 | } 123 | -------------------------------------------------------------------------------- /ch07/LookAtTrianglesWithKeys.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Look triangle from slant (Move eye position with key) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/LookAtTrianglesWithKeys.js: -------------------------------------------------------------------------------- 1 | // LookAtTrianglesWithKeys.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute vec4 a_Color;\n' + 6 | 'uniform mat4 u_ViewMatrix;\n' + 7 | 'varying vec4 v_Color;\n' + 8 | 'void main() {\n' + 9 | ' gl_Position = u_ViewMatrix * a_Position;\n' + 10 | ' v_Color = a_Color;\n' + 11 | '}\n'; 12 | 13 | // Fragment shader program 14 | var FSHADER_SOURCE = 15 | '#ifdef GL_ES\n' + 16 | 'precision mediump float;\n' + 17 | '#endif\n' + 18 | 'varying vec4 v_Color;\n' + 19 | 'void main() {\n' + 20 | ' gl_FragColor = v_Color;\n' + 21 | '}\n'; 22 | 23 | function main() { 24 | // Retrieve element 25 | var canvas = document.getElementById('webgl'); 26 | 27 | // Get the rendering context for WebGL 28 | var gl = getWebGLContext(canvas); 29 | if (!gl) { 30 | console.log('Failed to get the rendering context for WebGL'); 31 | return; 32 | } 33 | 34 | // Initialize shaders 35 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 36 | console.log('Failed to intialize shaders.'); 37 | return; 38 | } 39 | 40 | // Set the vertex coordinates and color (the blue triangle is in the front) 41 | var n = initVertexBuffers(gl); 42 | if (n < 0) { 43 | console.log('Failed to set the vertex information'); 44 | return; 45 | } 46 | 47 | // Specify the color for clearing 48 | gl.clearColor(0, 0, 0, 1); 49 | 50 | // Get the storage location of u_ViewMatrix 51 | var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix'); 52 | if(!u_ViewMatrix) { 53 | console.log('Failed to get the storage locations of u_ViewMatrix'); 54 | return; 55 | } 56 | 57 | // Create the view matrix 58 | var viewMatrix = new Matrix4(); 59 | // Register the event handler to be called on key press 60 | document.onkeydown = function(ev){ keydown(ev, gl, n, u_ViewMatrix, viewMatrix); }; 61 | 62 | draw(gl, n, u_ViewMatrix, viewMatrix); // Draw 63 | } 64 | 65 | function initVertexBuffers(gl) { 66 | var verticesColors = new Float32Array([ 67 | // Vertex coordinates and color 68 | 0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // The back green one 69 | -0.5, -0.5, -0.4, 0.4, 1.0, 0.4, 70 | 0.5, -0.5, -0.4, 1.0, 0.4, 0.4, 71 | 72 | 0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // The middle yellow one 73 | -0.5, 0.4, -0.2, 1.0, 1.0, 0.4, 74 | 0.0, -0.6, -0.2, 1.0, 1.0, 0.4, 75 | 76 | 0.0, 0.5, 0.0, 0.4, 0.4, 1.0, // The front blue one 77 | -0.5, -0.5, 0.0, 0.4, 0.4, 1.0, 78 | 0.5, -0.5, 0.0, 1.0, 0.4, 0.4, 79 | ]); 80 | var n = 9; 81 | 82 | // Create a buffer object 83 | var vertexColorbuffer = gl.createBuffer(); 84 | if (!vertexColorbuffer) { 85 | console.log('Failed to create the buffer object'); 86 | return -1; 87 | } 88 | 89 | // Write the vertex information and enable it 90 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer); 91 | gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); 92 | 93 | var FSIZE = verticesColors.BYTES_PER_ELEMENT; 94 | //Get the storage location of a_Position, assign and enable buffer 95 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 96 | if(a_Position < 0) { 97 | console.log('Failed to get the storage location of a_Position'); 98 | return -1; 99 | } 100 | 101 | gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0); 102 | gl.enableVertexAttribArray(a_Position); // Enable the assignment of the buffer object 103 | 104 | // Get the storage location of a_Position, assign buffer and enable 105 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 106 | if(a_Color < 0) { 107 | console.log('Failed to get the storage location of a_Color'); 108 | return -1; 109 | } 110 | // Assign the buffer object to a_Color variable 111 | gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3); 112 | gl.enableVertexAttribArray(a_Color); // Enable the assignment of the buffer object 113 | 114 | return n; 115 | } 116 | 117 | var g_eyeX = 0.20, g_eyeY = 0.25, g_eyeZ = 0.25; // Eye position 118 | function keydown(ev, gl, n, u_ViewMatrix, viewMatrix) { 119 | if(ev.keyCode == 39) { // The right arrow key was pressed 120 | g_eyeX += 0.01; 121 | } else 122 | if (ev.keyCode == 37) { // The left arrow key was pressed 123 | g_eyeX -= 0.01; 124 | } else { return; } 125 | draw(gl, n, u_ViewMatrix, viewMatrix); 126 | } 127 | 128 | function draw(gl, n, u_ViewMatrix, viewMatrix) { 129 | // Set the matrix to be used for to set the camera view 130 | viewMatrix.setLookAt(g_eyeX, g_eyeY, g_eyeZ, 0, 0, 0, 0, 1, 0); 131 | 132 | // Pass the view projection matrix 133 | gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements); 134 | 135 | gl.clear(gl.COLOR_BUFFER_BIT); // Clear 136 | 137 | gl.drawArrays(gl.TRIANGLES, 0, n); // Draw the rectangle 138 | } 139 | -------------------------------------------------------------------------------- /ch07/LookAtTrianglesWithKeys_ViewVolume.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Look triangle from slant (Move eye position and viewing volume with key) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/OrthoView.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Orthographic Projection 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 |

The near and far values are displayed here.

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ch07/OrthoView_halfSize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Orthographic Projection 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 |

The near and far values are displayed here.

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ch07/OrthoView_halfWidth.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Orthographic Projection 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 |

The near and far values are displayed here.

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ch07/PerspectiveView.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Perspective Projection 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/PerspectiveView_mvp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Perspective Projection 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/PerspectiveView_mvpMatrix.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Perspective Projection 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/PerspectiveView_mvpMatrix.js: -------------------------------------------------------------------------------- 1 | // PerspectiveView_mvpMatrix.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute vec4 a_Color;\n' + 6 | 'uniform mat4 u_MvpMatrix;\n' + 7 | 'varying vec4 v_Color;\n' + 8 | 'void main() {\n' + 9 | ' gl_Position = u_MvpMatrix * a_Position;\n' + 10 | ' v_Color = a_Color;\n' + 11 | '}\n'; 12 | 13 | // Fragment shader program 14 | var FSHADER_SOURCE = 15 | '#ifdef GL_ES\n' + 16 | 'precision mediump float;\n' + 17 | '#endif\n' + 18 | 'varying vec4 v_Color;\n' + 19 | 'void main() {\n' + 20 | ' gl_FragColor = v_Color;\n' + 21 | '}\n'; 22 | 23 | function main() { 24 | // Retrieve element 25 | var canvas = document.getElementById('webgl'); 26 | 27 | // Get the rendering context for WebGL 28 | var gl = getWebGLContext(canvas); 29 | if (!gl) { 30 | console.log('Failed to get the rendering context for WebGL'); 31 | return; 32 | } 33 | 34 | // Initialize shaders 35 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 36 | console.log('Failed to intialize shaders.'); 37 | return; 38 | } 39 | 40 | // Set the vertex coordinates and color (the blue triangle is in the front) 41 | var n = initVertexBuffers(gl); 42 | if (n < 0) { 43 | console.log('Failed to set the vertex information'); 44 | return; 45 | } 46 | 47 | // Specify the color for clearing 48 | gl.clearColor(0, 0, 0, 1); 49 | 50 | // Get the storage location of u_MvpMatrix 51 | var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix'); 52 | if (!u_MvpMatrix) { 53 | console.log('Failed to get the storage location of u_MvpMatrix'); 54 | return; 55 | } 56 | 57 | var modelMatrix = new Matrix4(); // Model matrix 58 | var viewMatrix = new Matrix4(); // View matrix 59 | var projMatrix = new Matrix4(); // Projection matrix 60 | var mvpMatrix = new Matrix4(); // Model view projection matrix 61 | 62 | // Calculate the model, view and projection matrices 63 | modelMatrix.setTranslate(0.75, 0, 0); 64 | viewMatrix.setLookAt(0, 0, 5, 0, 0, -100, 0, 1, 0); 65 | projMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100); 66 | // Calculate the model view projection matrix 67 | mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix); 68 | // Pass the model view projection matrix to u_MvpMatrix 69 | gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements); 70 | 71 | gl.clear(gl.COLOR_BUFFER_BIT); // Clear 72 | 73 | gl.drawArrays(gl.TRIANGLES, 0, n); // Draw the triangles 74 | 75 | 　// Prepare the model matrix for another pair of triangles 76 | modelMatrix.setTranslate(-0.75, 0, 0); 77 | // Calculate the model view projection matrix 78 | mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix); 79 | // Pass the model view projection matrix to u_MvpMatrix 80 | gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements); 81 | 82 | gl.drawArrays(gl.TRIANGLES, 0, n); // Draw the triangles 83 | } 84 | 85 | function initVertexBuffers(gl) { 86 | var verticesColors = new Float32Array([ 87 | // Vertex coordinates and color 88 | 0.0, 1.0, -4.0, 0.4, 1.0, 0.4, // The back green one 89 | -0.5, -1.0, -4.0, 0.4, 1.0, 0.4, 90 | 0.5, -1.0, -4.0, 1.0, 0.4, 0.4, 91 | 92 | 0.0, 1.0, -2.0, 1.0, 1.0, 0.4, // The middle yellow one 93 | -0.5, -1.0, -2.0, 1.0, 1.0, 0.4, 94 | 0.5, -1.0, -2.0, 1.0, 0.4, 0.4, 95 | 96 | 0.0, 1.0, 0.0, 0.4, 0.4, 1.0, // The front blue one 97 | -0.5, -1.0, 0.0, 0.4, 0.4, 1.0, 98 | 0.5, -1.0, 0.0, 1.0, 0.4, 0.4, 99 | ]); 100 | var n = 9; 101 | 102 | // Create a buffer object 103 | var vertexColorBuffer = gl.createBuffer(); 104 | if (!vertexColorBuffer) { 105 | console.log('Failed to create the buffer object'); 106 | return -1; 107 | } 108 | 109 | // Write the vertex information and enable it 110 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); 111 | gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); 112 | 113 | var FSIZE = verticesColors.BYTES_PER_ELEMENT; 114 | 115 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 116 | if(a_Position < 0) { 117 | console.log('Failed to get the storage location of a_Position'); 118 | return -1; 119 | } 120 | gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0); 121 | gl.enableVertexAttribArray(a_Position); 122 | 123 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 124 | if(a_Color < 0) { 125 | console.log('Failed to get the storage location of a_Color'); 126 | return -1; 127 | } 128 | gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3); 129 | gl.enableVertexAttribArray(a_Color); 130 | 131 | return n; 132 | } 133 | -------------------------------------------------------------------------------- /ch07/Zfighting.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Z Fighting 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch07/Zfighting.js: -------------------------------------------------------------------------------- 1 | // Zfighting.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute vec4 a_Color;\n' + 6 | 'uniform mat4 u_ViewProjMatrix;\n' + 7 | 'varying vec4 v_Color;\n' + 8 | 'void main() {\n' + 9 | ' gl_Position = u_ViewProjMatrix * a_Position;\n' + 10 | ' v_Color = a_Color;\n' + 11 | '}\n'; 12 | 13 | // Fragment shader program 14 | var FSHADER_SOURCE = 15 | '#ifdef GL_ES\n' + 16 | 'precision mediump float;\n' + 17 | '#endif\n' + 18 | 'varying vec4 v_Color;\n' + 19 | 'void main() {\n' + 20 | ' gl_FragColor = v_Color;\n' + 21 | '}\n'; 22 | 23 | function main() { 24 | // Retrieve element 25 | var canvas = document.getElementById('webgl'); 26 | 27 | // Get the rendering context for WebGL 28 | var gl = getWebGLContext(canvas); 29 | if (!gl) { 30 | console.log('Failed to get the rendering context for WebGL'); 31 | return; 32 | } 33 | 34 | // Initialize shaders 35 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 36 | console.log('Failed to intialize shaders.'); 37 | return; 38 | } 39 | 40 | // Set the vertex coordinates and color (the blue triangle is in the front) 41 | var n = initVertexBuffers(gl); 42 | if (n < 0) { 43 | console.log('Failed to set the vertex information'); 44 | return; 45 | } 46 | 47 | //Set clear color and enable the hidden surface removal function 48 | gl.clearColor(0, 0, 0, 1); 49 | gl.enable(gl.DEPTH_TEST); 50 | 51 | // Get the storage locations of u_ViewProjMatrix 52 | var u_ViewProjMatrix = gl.getUniformLocation(gl.program, 'u_ViewProjMatrix'); 53 | if (!u_ViewProjMatrix) { 54 | console.log('Failed to get the storage locations of u_ViewProjMatrix'); 55 | return; 56 | } 57 | 58 | var viewProjMatrix = new Matrix4(); 59 | // Set the eye point, look-at point, and up vector. 60 | viewProjMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100); 61 | viewProjMatrix.lookAt(3.06, 2.5, 10.0, 0, 0, -2, 0, 1, 0); 62 | 63 | // Pass the view projection matrix to u_ViewProjMatrix 64 | gl.uniformMatrix4fv(u_ViewProjMatrix, false, viewProjMatrix.elements); 65 | 66 | // Clear color and depth buffer 67 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 68 | 69 | // Enable the polygon offset function 70 | gl.enable(gl.POLYGON_OFFSET_FILL); 71 | // Draw the triangles 72 | gl.drawArrays(gl.TRIANGLES, 0, n/2); // The green triangle 73 | gl.polygonOffset(1.0, 1.0); // Set the polygon offset 74 | gl.drawArrays(gl.TRIANGLES, n/2, n/2); // The yellow triangle 75 | } 76 | 77 | function initVertexBuffers(gl) { 78 | var verticesColors = new Float32Array([ 79 | // Vertex coordinates and color 80 | 0.0, 2.5, -5.0, 0.4, 1.0, 0.4, // The green triangle 81 | -2.5, -2.5, -5.0, 0.4, 1.0, 0.4, 82 | 2.5, -2.5, -5.0, 1.0, 0.4, 0.4, 83 | 84 | 0.0, 3.0, -5.0, 1.0, 0.4, 0.4, // The yellow triagle 85 | -3.0, -3.0, -5.0, 1.0, 1.0, 0.4, 86 | 3.0, -3.0, -5.0, 1.0, 1.0, 0.4, 87 | ]); 88 | var n = 6; 89 | 90 | // Create a buffer object 91 | var vertexColorbuffer = gl.createBuffer(); 92 | if (!vertexColorbuffer) { 93 | console.log('Failed to create the buffer object'); 94 | return -1; 95 | } 96 | 97 | // Write the vertex coordinates and color to the buffer object 98 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer); 99 | gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); 100 | 101 | var FSIZE = verticesColors.BYTES_PER_ELEMENT; 102 | // Assign the buffer object to a_Position and enable the assignment 103 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 104 | if(a_Position < 0) { 105 | console.log('Failed to get the storage location of a_Position'); 106 | return -1; 107 | } 108 | gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0); 109 | gl.enableVertexAttribArray(a_Position); 110 | // Assign the buffer object to a_Color and enable the assignment 111 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 112 | if(a_Color < 0) { 113 | console.log('Failed to get the storage location of a_Color'); 114 | return -1; 115 | } 116 | gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3); 117 | gl.enableVertexAttribArray(a_Color); 118 | 119 | return n; 120 | } 121 | -------------------------------------------------------------------------------- /ch08/LightedCube.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lighted cube 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch08/LightedCube_ambient.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lighted cube (diffuse+ambient) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch08/LightedCube_animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lighted cube (with animation) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch08/LightedCube_perFragment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lighted cube (Per fragment) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch08/LightedTranslatedRotatedCube.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Translated, rotated and lighted cube 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch08/PointLightedCube.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Point lighted cube 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch08/PointLightedCube_animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Point lighted cube (with animation) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch08/PointLightedCube_perFragment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Point lighted cube (Per fragment) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch08/PointLightedSphere.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Point lighted sphere 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch08/PointLightedSphere_perFragment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Point lighted sphere (Per fragment) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch09/JointModel.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Single joint model 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 |

←→: arm1 rotation(y-axis), ↑↓: joint1 rotation(z-axis)

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ch09/MultiJointModel.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Multi joint model 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 |

←→: arm1 rotation,↑↓: joint1 rotation, xz: joint2(wrist) rotation, cv: finger rotation

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ch09/MultiJointModel_segment.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Multi joint model (Buffered per segment) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 |

←→: arm1 rotation,↑↓: joint1 rotation, xz: joint2(wrist) rotation, cv: finger rotation

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ch10/3DoverWeb.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL is overlaid on a Web page 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 |
13 |

19

14 | 15 |

Great Designs Come from Great Designers --- Not from Great Design Processes

16 | 17 |

The basic premise underlying the SEI's [Software 18 | Engineering Institute] work on software process maturity 19 | is that the quality of a software product is largely 20 | determined by the quality of the software development 21 | and maintenance processes used to build it.

22 | 23 | Mark Paulk [1995], "The evolution of the SEI's capability maturity model for software" 24 | 25 |

...[W]hile some may see them as the crazy ones, we see 26 | genius, because the ones who are crazy enough to think 27 | that they can change the world, are the ones who do.

28 | 29 | Steve Jobs, Apple commercial (1997) 30 | 31 |
32 | 33 | 34 | 35 | 36 | 37 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /ch10/BlendedCube.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cube with Alpha Blending 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch10/Fog.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Fog 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 |

↑↓: Increase/decrease the fog distance

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ch10/Fog_w.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fog(w) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch10/FramebufferObject.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Frame Buffer Object 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch10/HUD.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HUD 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ch10/LookAtBlendedTriangles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Alpha blending 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch10/OBJViewer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | OBJ Viewer 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch10/PickFace.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pick face 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch10/PickObject.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pick Object 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch10/Picking.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pick face 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Please use a browser that supports "canvas" 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch10/ProgramObject.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Switch Shaders 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch10/RotateObject.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rotate Object 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch10/RotatingTriangle_contextLost.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Continue to rotate the triangle (context lost event correspondence) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch10/RotatingTriangle_contextLost.js: -------------------------------------------------------------------------------- 1 | // RotatingTriangle_contextLost.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'uniform mat4 u_ModelMatrix;\n' + 6 | 'void main() {\n' + 7 | ' gl_Position = u_ModelMatrix * a_Position;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | 'void main() {\n' + 13 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 14 | '}\n'; 15 | 16 | function main() { 17 | // Retrieve element 18 | var canvas = document.getElementById('webgl'); 19 | 20 | // Register event handler for context lost and context restored events 21 | canvas.addEventListener('webglcontextlost', contextLost, false); 22 | canvas.addEventListener('webglcontextrestored', function(ev) { start(canvas); }, false); 23 | 24 | start(canvas); // Perform WebGL related processes 25 | } 26 | 27 | // Current rotation angle 28 | var ANGLE_STEP = 45.0; 29 | // Current rotation angle 30 | var g_currentAngle = 0.0; // Changed from local variable to global variable 31 | var g_requestID; // The return value of requestAnimationFrame() 32 | 33 | function start(canvas) { 34 | // Get the rendering context for WebGL 35 | var gl = getWebGLContext(canvas); 36 | if (!gl) { 37 | console.log('Failed to get the rendering context for WebGL'); 38 | return; 39 | } 40 | 41 | // Initialize shaders 42 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 43 | console.log('Failed to intialize shaders.'); 44 | return; 45 | } 46 | 47 | var n = initVertexBuffers(gl); // Write the positions of vertices to a vertex shader 48 | if (n < 0) { 49 | console.log('Failed to set the positions of the vertices'); 50 | return; 51 | } 52 | 53 | gl.clearColor(0.0, 0.0, 0.0, 1.0); // Specify the color for clearing 54 | 55 | // Get storage location of u_ModelMatrix 56 | var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix'); 57 | if (!u_ModelMatrix) { 58 | console.log('Failed to get the storage location of u_ModelMatrix'); 59 | return; 60 | } 61 | 62 | var modelMatrix = new Matrix4(); // Create a model matrix 63 | 64 | var tick = function() { // Start drawing 65 | g_currentAngle = animate(g_currentAngle); // Update current rotation angle 66 | draw(gl, n, g_currentAngle, modelMatrix, u_ModelMatrix); // Draw the triangle 67 | g_requestID = requestAnimationFrame(tick, canvas); // Reregister this Function again 68 | }; 69 | tick(); 70 | } 71 | 72 | function contextLost(ev) { // Event Handler for context lost event 73 | cancelAnimationFrame(g_requestID); // Stop animation 74 | ev.preventDefault(); // Prevent the default behavior 75 | } 76 | 77 | function initVertexBuffers(gl) { 78 | var vertices = new Float32Array ([ 79 | 0.0, 0.5, -0.5, -0.5, 0.5, -0.5 80 | ]); 81 | var n = 3; // The number of vertices 82 | 83 | // Create a buffer object 84 | var vertexBuffer = gl.createBuffer(); 85 | if (!vertexBuffer) { 86 | console.log('Failed to create the buffer object'); 87 | return -1; 88 | } 89 | 90 | // Bind the buffer object to target 91 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 92 | // Write date into the buffer object 93 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 94 | 95 | // Assign the buffer object to a_Position variable 96 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 97 | if(a_Position < 0) { 98 | console.log('Failed to get the storage location of a_Position'); 99 | return -1; 100 | } 101 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 102 | 103 | // Enable the assignment to a_Position variable 104 | gl.enableVertexAttribArray(a_Position); 105 | 106 | // Unbind the buffer object 107 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 108 | 109 | return n; 110 | } 111 | 112 | function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) { 113 | // Set the rotation matrix 114 | modelMatrix.setRotate(currentAngle, 0, 0, 1); 115 | 116 | // Pass the rotation matrix to the vertex shader 117 | gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements); 118 | 119 | // Clear 120 | gl.clear(gl.COLOR_BUFFER_BIT); 121 | 122 | // Draw the rectangle 123 | gl.drawArrays(gl.TRIANGLES, 0, n); 124 | } 125 | 126 | // Last time that this function was called 127 | var g_last = Date.now(); 128 | function animate(angle) { 129 | // Calculate the elapsed time 130 | var now = Date.now(); 131 | var elapsed = now - g_last; 132 | g_last = now; 133 | // Update the current rotation angle (adjusted by the elapsed time) 134 | var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0; 135 | return newAngle %= 360; 136 | } 137 | -------------------------------------------------------------------------------- /ch10/RoundedPoints.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Round Point 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ch10/RoundedPoints.js: -------------------------------------------------------------------------------- 1 | // RoundedPoints.js (c) 2012 matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'void main() {\n' + 6 | ' gl_Position = a_Position;\n' + 7 | ' gl_PointSize = 10.0;\n' + 8 | '}\n'; 9 | 10 | // Fragment shader program 11 | var FSHADER_SOURCE = 12 | '#ifdef GL_ES\n' + 13 | 'precision mediump float;\n' + 14 | '#endif GL_ES\n' + 15 | 'void main() {\n' + // Center coordinate is (0.5, 0.5) 16 | ' float d = distance(gl_PointCoord, vec2(0.5, 0.5));\n' + 17 | ' if(d < 0.5) {\n' + // Radius is 0.5 18 | ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + 19 | ' } else { discard; }\n' + 20 | '}\n'; 21 | 22 | function main() { 23 | // Retrieve element 24 | var canvas = document.getElementById('webgl'); 25 | 26 | // Get the rendering context for WebGL 27 | var gl = getWebGLContext(canvas); 28 | if (!gl) { 29 | console.log('Failed to get the rendering context for WebGL'); 30 | return; 31 | } 32 | 33 | // Initialize shaders 34 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 35 | console.log('Failed to intialize shaders.'); 36 | return; 37 | } 38 | 39 | // Set the vertex information 40 | var n = initVertexBuffers(gl); 41 | if (n < 0) { 42 | console.log('Failed to set the vertex information'); 43 | return; 44 | } 45 | 46 | // Specify the color for clearing 47 | gl.clearColor(0, 0, 0, 1); 48 | 49 | // Clear 50 | gl.clear(gl.COLOR_BUFFER_BIT); 51 | 52 | // Draw three points 53 | gl.drawArrays(gl.POINTS, 0, n); 54 | } 55 | 56 | function initVertexBuffers(gl) { 57 | var vertices = new Float32Array([ 58 | 0, 0.5, -0.5, -0.5, 0.5, -0.5 59 | ]); 60 | var n = 3; // The number of vertices 61 | 62 | // Create a buffer object 63 | var vertexBuffer = gl.createBuffer(); 64 | if (!vertexBuffer) { 65 | console.log('Failed to create the buffer object'); 66 | return -1; 67 | } 68 | 69 | // Bind the vertex buffer 70 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 71 | // Write date into the buffer object 72 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 73 | 74 | // Assign the buffer object to the attribute variable 75 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 76 | if (a_Position < 0) { 77 | console.log('Failed to get the storage location of a_Position'); 78 | return -1; 79 | } 80 | gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 81 | 82 | // Unbind the buffer object 83 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 84 | 85 | // Enable the assignment to a_Position variable 86 | gl.enableVertexAttribArray(a_Position); 87 | 88 | return n; 89 | } 90 | -------------------------------------------------------------------------------- /ch10/Shadow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Shadow 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch10/Shadow_highp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Shadow (high-precision version) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch10/Shadow_highp_sphere.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Shadow (high-precision version) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch10/cube.mtl: -------------------------------------------------------------------------------- 1 | # Blender MTL File: '' 2 | # Material Count: 2 3 | newmtl Material 4 | Ka 0.000000 0.000000 0.000000 5 | Kd 1.000000 0.000000 0.000000 6 | Ks 0.000000 0.000000 0.000000 7 | Ns 96.078431 8 | Ni 1.000000 9 | d 1.000000 10 | illum 0 11 | newmtl Material.001 12 | Ka 0.000000 0.000000 0.000000 13 | Kd 1.000000 0.450000 0.000000 14 | Ks 0.000000 0.000000 0.000000 15 | Ns 96.078431 16 | Ni 1.000000 17 | d 1.000000 18 | illum 0 19 | -------------------------------------------------------------------------------- /ch10/cube.obj: -------------------------------------------------------------------------------- 1 | # Blender v2.60 (sub 0) OBJ File: '' 2 | # www.blender.org 3 | mtllib cube.mtl 4 | o Cube 5 | v 1.000000 -1.000000 -1.000000 6 | v 1.000000 -1.000000 1.000000 7 | v -1.000000 -1.000000 1.000000 8 | v -1.000000 -1.000000 -1.000000 9 | v 1.000000 1.000000 -1.000000 10 | v 1.000000 1.000000 1.000001 11 | v -1.000000 1.000000 1.000000 12 | v -1.000000 1.000000 -1.000000 13 | usemtl Material 14 | f 1 2 3 4 15 | f 5 8 7 6 16 | f 2 6 7 3 17 | f 3 7 8 4 18 | f 5 1 4 8 19 | usemtl Material.001 20 | f 1 5 6 2 21 | -------------------------------------------------------------------------------- /gifts/Particle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Particle 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /gifts/Printf.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Display the value in fragment shader 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /gifts/SpecularCube.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lighting demo (specular) 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /gifts/TextTexture.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Drawing text using "canvas" 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /gifts/ThreeDUI.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 3DUI 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /gifts/Wave.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wave demo 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /gifts/WorldCoordinate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | World Coordinate example 6 | 7 | 8 | 9 | 10 | Please use a browser that supports "canvas" 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /gifts/WorldCoordinate.js: -------------------------------------------------------------------------------- 1 | // WorldCoordinateSystem.js (c) matsuda 2 | // Vertex shader program 3 | var VSHADER_SOURCE = 4 | 'attribute vec4 a_Position;\n' + 5 | 'attribute vec4 a_Color;\n' + 6 | 'uniform mat4 u_mvpMatrix;\n' + 7 | 'varying vec4 v_Color;\n' + 8 | 'void main() {\n' + 9 | ' gl_Position = u_mvpMatrix * a_Position;\n' + 10 | ' v_Color = a_Color;\n' + 11 | '}\n'; 12 | 13 | // Fragment shader program 14 | var FSHADER_SOURCE = 15 | '#ifdef GL_ES\n' + 16 | 'precision mediump float;\n' + 17 | '#endif\n' + 18 | 'varying vec4 v_Color;\n' + 19 | 'void main() {\n' + 20 | ' gl_FragColor = v_Color;\n' + 21 | '}\n'; 22 | 23 | function main() { 24 | // Retrieve element 25 | var canvas = document.getElementById('webgl'); 26 | 27 | // Get the rendering context for WebGL 28 | var gl = getWebGLContext(canvas); 29 | if (!gl) { 30 | console.log('Failed to get the rendering context for WebGL'); 31 | return; 32 | } 33 | 34 | // Initialize shaders 35 | if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { 36 | console.log('Failed to intialize shaders.'); 37 | return; 38 | } 39 | 40 | // Set the vertex information 41 | var n = initVertexBuffers(gl); 42 | if (n < 0) { 43 | console.log('Failed to set the vertex information'); 44 | return; 45 | } 46 | 47 | // Set the clear color and enable the depth test 48 | gl.clearColor(0, 0, 0, 1); 49 | gl.enable(gl.DEPTH_TEST); 50 | 51 | // Get the storage locations of uniform variables 52 | var u_mvpMatrix = gl.getUniformLocation(gl.program, 'u_mvpMatrix'); 53 | if (!u_mvpMatrix) { 54 | console.log('Failed to get the storage location of uniform variable'); 55 | return; 56 | } 57 | 58 | var modelMatrix = new Matrix4(); 59 | var viewMatrix = new Matrix4(); 60 | var projMatrix = new Matrix4(); 61 | var mvpMatrix = new Matrix4(); 62 | 63 | // Calculate the view projection matrix 64 | viewMatrix.setLookAt(0, 0, 5, 0, 0, -100, 0, 1, 0); 65 | projMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100); 66 | 67 | // Clear 68 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 69 | 70 | for (var i = 0; i < 10; i++) { 71 | var x = Math.random() * Math.pow(-1, i); 72 | var z = Math.random() * i * 5; 73 | modelMatrix.setTranslate(x, 0, -z); 74 | // Calculate a model view projection matrix 75 | mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix); 76 | // Set the matrix to u_mvpMatrix 77 | gl.uniformMatrix4fv(u_mvpMatrix, false, mvpMatrix.elements); 78 | 79 | gl.drawArrays(gl.TRIANGLES, 0, n); 80 | } 81 | } 82 | 83 | function initVertexBuffers(gl) { 84 | var verticesColors = new Float32Array([ 85 | // vertex 　　　 color 86 | 0.0, 1.0, 0.0, 0.0, 0.0, 1.0, 87 | -0.5, -1.0, 0.0, 0.0, 0.0, 1.0, 88 | 0.5, -1.0, 0.0, 0.0, 1.0, 0.0, 89 | ]); 90 | var n = 3; 91 | 92 | // Create a buffer object 93 | var vertexColorbuffer = gl.createBuffer(); 94 | if (!vertexColorbuffer) { 95 | console.log('Failed to create the buffer object'); 96 | return -1; 97 | } 98 | 99 | gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer); 100 | gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); 101 | 102 | var FSIZE = verticesColors.BYTES_PER_ELEMENT; 103 | 104 | var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); 105 | if(a_Position < 0) { 106 | console.log('Failed to get the storage location of a_Position'); 107 | return -1; 108 | } 109 | gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0); 110 | gl.enableVertexAttribArray(a_Position); 111 | 112 | var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); 113 | if(a_Color < 0) { 114 | console.log('Failed to get the storage location of a_Color'); 115 | return -1; 116 | } 117 | gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3); 118 | gl.enableVertexAttribArray(a_Color); 119 | 120 | return n; 121 | } 122 | -------------------------------------------------------------------------------- /lib/cuon-utils.js: -------------------------------------------------------------------------------- 1 | // cuon-utils.js (c) 2012 kanda and matsuda 2 | /** 3 | * Create a program object and make current 4 | * @param gl GL context 5 | * @param vshader a vertex shader program (string) 6 | * @param fshader a fragment shader program (string) 7 | * @return true, if the program object was created and successfully made current 8 | */ 9 | function initShaders(gl, vshader, fshader) { 10 | var program = createProgram(gl, vshader, fshader); 11 | if (!program) { 12 | console.log('Failed to create program'); 13 | return false; 14 | } 15 | 16 | gl.useProgram(program); 17 | gl.program = program; 18 | 19 | return true; 20 | } 21 | 22 | /** 23 | * Create the linked program object 24 | * @param gl GL context 25 | * @param vshader a vertex shader program (string) 26 | * @param fshader a fragment shader program (string) 27 | * @return created program object, or null if the creation has failed 28 | */ 29 | function createProgram(gl, vshader, fshader) { 30 | // Create shader object 31 | var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader); 32 | var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader); 33 | if (!vertexShader || !fragmentShader) { 34 | return null; 35 | } 36 | 37 | // Create a program object 38 | var program = gl.createProgram(); 39 | if (!program) { 40 | return null; 41 | } 42 | 43 | // Attach the shader objects 44 | gl.attachShader(program, vertexShader); 45 | gl.attachShader(program, fragmentShader); 46 | 47 | // Link the program object 48 | gl.linkProgram(program); 49 | 50 | // Check the result of linking 51 | var linked = gl.getProgramParameter(program, gl.LINK_STATUS); 52 | if (!linked) { 53 | var error = gl.getProgramInfoLog(program); 54 | console.log('Failed to link program: ' + error); 55 | gl.deleteProgram(program); 56 | gl.deleteShader(fragmentShader); 57 | gl.deleteShader(vertexShader); 58 | return null; 59 | } 60 | return program; 61 | } 62 | 63 | /** 64 | * Create a shader object 65 | * @param gl GL context 66 | * @param type the type of the shader object to be created 67 | * @param source shader program (string) 68 | * @return created shader object, or null if the creation has failed. 69 | */ 70 | function loadShader(gl, type, source) { 71 | // Create shader object 72 | var shader = gl.createShader(type); 73 | if (shader == null) { 74 | console.log('unable to create shader'); 75 | return null; 76 | } 77 | 78 | // Set the shader program 79 | gl.shaderSource(shader, source); 80 | 81 | // Compile the shader 82 | gl.compileShader(shader); 83 | 84 | // Check the result of compilation 85 | var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS); 86 | if (!compiled) { 87 | var error = gl.getShaderInfoLog(shader); 88 | console.log('Failed to compile shader: ' + error); 89 | gl.deleteShader(shader); 90 | return null; 91 | } 92 | 93 | return shader; 94 | } 95 | 96 | /** 97 | * Initialize and get the rendering for WebGL 98 | * @param canvas element 99 | * @param opt_debug flag to initialize the context for debugging 100 | * @return the rendering context for WebGL 101 | */ 102 | function getWebGLContext(canvas, opt_debug) { 103 | // Get the rendering context for WebGL 104 | var gl = WebGLUtils.setupWebGL(canvas); 105 | if (!gl) return null; 106 | 107 | // if opt_debug is explicitly false, create the context for debugging 108 | if (arguments.length < 2 || opt_debug) { 109 | gl = WebGLDebugUtils.makeDebugContext(gl); 110 | } 111 | 112 | return gl; 113 | } 114 | -------------------------------------------------------------------------------- /resources/7herbs.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/7herbs.JPG -------------------------------------------------------------------------------- /resources/blueflower.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/blueflower.JPG -------------------------------------------------------------------------------- /resources/blueflower2.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/blueflower2.JPG -------------------------------------------------------------------------------- /resources/circle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/circle.gif -------------------------------------------------------------------------------- /resources/cube.mqo: -------------------------------------------------------------------------------- 1 | Metasequoia Document 2 | Format Text Ver 1.0 3 | 4 | Scene { 5 | pos 0.0000 0.0000 1500.0000 6 | lookat 0.0000 0.0000 0.0000 7 | head 3.7864 8 | pich 0.2392 9 | ortho 0 10 | zoom2 5.0000 11 | amb 0.250 0.250 0.250 12 | } 13 | Material 2 { 14 | "mat1" col(1.000 0.000 0.000 1.000) dif(0.800) amb(0.600) emi(0.000) spc(0.000) power(5.00) 15 | "mat2" col(1.000 0.647 0.000 1.000) dif(0.800) amb(0.600) emi(0.000) spc(0.000) power(5.00) 16 | } 17 | Object "obj1" { 18 | visible 15 19 | locking 0 20 | shading 0 21 | facet 59.5 22 | color 0.898 0.498 0.698 23 | color_type 0 24 | vertex 8 { 25 | -100.0000 100.0000 100.0000 26 | -100.0000 -100.0000 100.0000 27 | 100.0000 100.0000 100.0000 28 | 100.0000 -100.0000 100.0000 29 | 100.0000 100.0000 -100.0000 30 | 100.0000 -100.0000 -100.0000 31 | -100.0000 100.0000 -100.0000 32 | -100.0000 -100.0000 -100.0000 33 | } 34 | face 6 { 35 | 4 V(0 2 3 1) M(0) UV(0.00000 0.00000 1.00000 0.00000 1.00000 1.00000 0.00000 1.00000) 36 | 4 V(2 4 5 3) M(1) UV(0.00000 0.00000 1.00000 0.00000 1.00000 1.00000 0.00000 1.00000) 37 | 4 V(4 6 7 5) M(0) UV(0.00000 0.00000 1.00000 0.00000 1.00000 1.00000 0.00000 1.00000) 38 | 4 V(6 0 1 7) M(0) UV(0.00000 0.00000 1.00000 0.00000 1.00000 1.00000 0.00000 1.00000) 39 | 4 V(6 4 2 0) M(0) UV(0.00000 0.00000 1.00000 0.00000 1.00000 1.00000 0.00000 1.00000) 40 | 4 V(1 3 5 7) M(0) UV(0.00000 0.00000 1.00000 0.00000 1.00000 1.00000 0.00000 1.00000) 41 | } 42 | } 43 | Eof 44 | -------------------------------------------------------------------------------- /resources/cube.mtl: -------------------------------------------------------------------------------- 1 | # Blender MTL File: '' 2 | # Material Count: 2 3 | newmtl Material 4 | Ka 0.000000 0.000000 0.000000 5 | Kd 1.000000 0.000000 0.000000 6 | Ks 0.000000 0.000000 0.000000 7 | Ns 96.078431 8 | Ni 1.000000 9 | d 1.000000 10 | illum 0 11 | newmtl Material.001 12 | Ka 0.000000 0.000000 0.000000 13 | Kd 1.000000 0.450000 0.000000 14 | Ks 0.000000 0.000000 0.000000 15 | Ns 96.078431 16 | Ni 1.000000 17 | d 1.000000 18 | illum 0 19 | -------------------------------------------------------------------------------- /resources/cube.obj: -------------------------------------------------------------------------------- 1 | # Blender v2.60 (sub 0) OBJ File: '' 2 | # www.blender.org 3 | mtllib cube.mtl 4 | o Cube 5 | v 1.000000 -1.000000 -1.000000 6 | v 1.000000 -1.000000 1.000000 7 | v -1.000000 -1.000000 1.000000 8 | v -1.000000 -1.000000 -1.000000 9 | v 1.000000 1.000000 -1.000000 10 | v 1.000000 1.000000 1.000001 11 | v -1.000000 1.000000 1.000000 12 | v -1.000000 1.000000 -1.000000 13 | usemtl Material 14 | f 1 2 3 4 15 | f 5 8 7 6 16 | f 2 6 7 3 17 | f 3 7 8 4 18 | f 5 1 4 8 19 | usemtl Material.001 20 | f 1 5 6 2 21 | -------------------------------------------------------------------------------- /resources/lightblueflower.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/lightblueflower.JPG -------------------------------------------------------------------------------- /resources/numbers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/numbers.png -------------------------------------------------------------------------------- /resources/orange.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/orange.JPG -------------------------------------------------------------------------------- /resources/parasol.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/parasol.jpg -------------------------------------------------------------------------------- /resources/particle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/particle.png -------------------------------------------------------------------------------- /resources/pinkflower.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/pinkflower.JPG -------------------------------------------------------------------------------- /resources/redflower.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/redflower.jpg -------------------------------------------------------------------------------- /resources/sky.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/sky.JPG -------------------------------------------------------------------------------- /resources/sky_cloud.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/sky_cloud.jpg -------------------------------------------------------------------------------- /resources/sky_roof.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/sky_roof.JPG -------------------------------------------------------------------------------- /resources/yellowflower.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huningxin/webglbook_examples/e787cd3e0513005eeb78e88600e7d5418c6597e3/resources/yellowflower.jpg --------------------------------------------------------------------------------