WebGL编程指南.ZC代码
1、
2、
2.1、0201_HelloCanvas.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- <script type="text/javascript" src="???.js"></script> --> <script type="text/javascript" > <!-- /* var create3DContext = function(canvas, opt_attribs) { var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; var context = null; for (var ii = 0; ii < names.length; ++ii) { try { context = canvas.getContext(names[ii], opt_attribs); } catch(e) {} if (context) { break; } } return context; } */ window.onload = function() { var canvas = document.getElementById('webgl'); //var context = canvas.getContext("experimental-webgl"); // Get the rendering context for WebGL var gl = canvas.getContext("experimental-webgl"); if (! gl) { console.log('Failed to get the rendering context for WebGL'); return; } // Set clear color gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear <canvas> gl.clear(gl.COLOR_BUFFER_BIT); }; --> </script> <!-- <link rel="stylesheet" href="???.css"> --> <style type="text/css"> <!-- --> </style> </head> <body> <canvas id="webgl" width="400" height="400"> Please use a browser that supports "canvas" </canvas> </body> </html>
2.2、0204_HelloPoint1.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- <script type="text/javascript" src="???.js"></script> --> <script type="text/javascript" > <!-- // Vertex shader program var VSHADER_SOURCE = 'void main() {\n' + ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point ' gl_PointSize = 10.0;\n' + // Set the point size '}\n'; // Fragment shader program var FSHADER_SOURCE = 'void main() {\n' + ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color '}\n'; window.onload = function() { var canvas = document.getElementById('webgl'); //var context = canvas.getContext("experimental-webgl"); // Get the rendering context for WebGL var gl = canvas.getContext("experimental-webgl"); if (! gl) { console.log('Failed to get the rendering context for WebGL'); return; } /* // Initialize shaders if (! initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { console.log('Failed to intialize shaders.'); return; } */ { var vertexShader = gl.createShader(gl.VERTEX_SHADER); if (vertexShader == null) { console.log('unable to create shader'); return; } // Set the shader program gl.shaderSource(vertexShader, VSHADER_SOURCE); // Compile the shader gl.compileShader(vertexShader); // Check the result of compilation var compiled_vertex = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS); if (! compiled_vertex) { var error = gl.getShaderInfoLog(vertexShader); console.log('Failed to compile shader: ' + error); gl.deleteShader(vertexShader); return; } // *** var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); if (fragmentShader == null) { console.log('unable to create shader'); return; } gl.shaderSource(fragmentShader, FSHADER_SOURCE); gl.compileShader(fragmentShader); var compiled_fragment = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS); if (! compiled_fragment) { var error = gl.getShaderInfoLog(fragmentShader); console.log('Failed to compile shader: ' + fragmentShader); gl.deleteShader(fragmentShader); return; } // *** if ( (! vertexShader) || (! fragmentShader) ) return; // Create a program object var program = gl.createProgram(); if (! program) return; // Attach the shader objects gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); // Link the program object gl.linkProgram(program); // Check the result of linking var linked = gl.getProgramParameter(program, gl.LINK_STATUS); if (! linked) { var error = gl.getProgramInfoLog(program); console.log('Failed to link program: ' + error); gl.deleteProgram(program); gl.deleteShader(fragmentShader); gl.deleteShader(vertexShader); return; } // *** if (! program) { console.log('Failed to create program'); return; } gl.useProgram(program); gl.program = program; } // Specify the color for clearing <canvas> gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear <canvas> gl.clear(gl.COLOR_BUFFER_BIT); // Draw a point gl.drawArrays(gl.POINTS, 0, 1); }; --> </script> <!-- <link rel="stylesheet" href="???.css"> --> <style type="text/css"> <!-- --> </style> </head> <body> <canvas id="webgl" width="400" height="400"> Please use a browser that supports "canvas" </canvas> </body> </html>
2.3、02.6_HelloPoint2.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- <script type="text/javascript" src="???.js"></script> --> <script type="text/javascript" > <!-- // Vertex shader program var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' +// ZC: 必须是 全局变量 'void main() {\n' + ' gl_Position = a_Position;\n' + // Set the vertex coordinates of the point ' gl_PointSize = 10.0;\n' + // Set the point size '}\n'; // Fragment shader program var FSHADER_SOURCE = 'void main() {\n' + ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color '}\n'; window.onload = function() { var canvas = document.getElementById('webgl'); //var context = canvas.getContext("experimental-webgl"); // Get the rendering context for WebGL var gl = canvas.getContext("experimental-webgl"); if (! gl) { console.log('Failed to get the rendering context for WebGL'); return; } /* // Initialize shaders if (! initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { console.log('Failed to intialize shaders.'); return; } */ { var vertexShader = gl.createShader(gl.VERTEX_SHADER); if (vertexShader == null) { console.log('unable to create shader'); return; } // Set the shader program gl.shaderSource(vertexShader, VSHADER_SOURCE); // Compile the shader gl.compileShader(vertexShader); // Check the result of compilation var compiled_vertex = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS); if (! compiled_vertex) { var error = gl.getShaderInfoLog(vertexShader); console.log('Failed to compile shader: ' + error); gl.deleteShader(vertexShader); return; } // *** var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); if (fragmentShader == null) { console.log('unable to create shader'); return; } gl.shaderSource(fragmentShader, FSHADER_SOURCE); gl.compileShader(fragmentShader); var compiled_fragment = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS); if (! compiled_fragment) { var error = gl.getShaderInfoLog(fragmentShader); console.log('Failed to compile shader: ' + fragmentShader); gl.deleteShader(fragmentShader); return; } // *** if ( (! vertexShader) || (! fragmentShader) ) return; // Create a program object var program = gl.createProgram(); if (! program) return; // Attach the shader objects gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); // Link the program object gl.linkProgram(program); // Check the result of linking var linked = gl.getProgramParameter(program, gl.LINK_STATUS); if (! linked) { var error = gl.getProgramInfoLog(program); console.log('Failed to link program: ' + error); gl.deleteProgram(program); gl.deleteShader(fragmentShader); gl.deleteShader(vertexShader); return; } // *** if (! program) { console.log('Failed to create program'); return; } gl.useProgram(program); gl.program = program; } // ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ // Get the storage location of a_Position var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); if (a_Position < 0) { console.log('Failed to get the storage location of a_Position'); return; } // Pass vertex position to attribute variable gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0); // ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ // Specify the color for clearing <canvas> gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear <canvas> gl.clear(gl.COLOR_BUFFER_BIT); // Draw a point gl.drawArrays(gl.POINTS, 0, 1); }; --> </script> <!-- <link rel="stylesheet" href="???.css"> --> <style type="text/css"> <!-- --> </style> </head> <body> <canvas id="webgl" width="400" height="400"> Please use a browser that supports "canvas" </canvas> </body> </html>
2.4、02.7_ClickedPoints.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- <script type="text/javascript" src="???.js"></script> --> <script type="text/javascript" > <!-- // Vertex shader program var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' +// ZC: 必须是 全局变量 'void main() {\n' + ' gl_Position = a_Position;\n' + // Set the vertex coordinates of the point ' gl_PointSize = 10.0;\n' + // Set the point size '}\n'; // Fragment shader program var FSHADER_SOURCE = 'void main() {\n' + ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color '}\n'; window.onload = function() { var canvas = document.getElementById('webgl'); //var context = canvas.getContext("experimental-webgl"); // Get the rendering context for WebGL var gl = canvas.getContext("experimental-webgl"); if (! gl) { console.log('Failed to get the rendering context for WebGL'); return; } /* // Initialize shaders if (! initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { console.log('Failed to intialize shaders.'); return; } */ { var vertexShader = gl.createShader(gl.VERTEX_SHADER); if (vertexShader == null) { console.log('unable to create shader'); return; } // Set the shader program gl.shaderSource(vertexShader, VSHADER_SOURCE); // Compile the shader gl.compileShader(vertexShader); // Check the result of compilation var compiled_vertex = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS); if (! compiled_vertex) { var error = gl.getShaderInfoLog(vertexShader); console.log('Failed to compile shader: ' + error); gl.deleteShader(vertexShader); return; } // *** var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); if (fragmentShader == null) { console.log('unable to create shader'); return; } gl.shaderSource(fragmentShader, FSHADER_SOURCE); gl.compileShader(fragmentShader); var compiled_fragment = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS); if (! compiled_fragment) { var error = gl.getShaderInfoLog(fragmentShader); console.log('Failed to compile shader: ' + fragmentShader); gl.deleteShader(fragmentShader); return; } // *** if ( (! vertexShader) || (! fragmentShader) ) return; // Create a program object var program = gl.createProgram(); if (! program) return; // Attach the shader objects gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); // Link the program object gl.linkProgram(program); // Check the result of linking var linked = gl.getProgramParameter(program, gl.LINK_STATUS); if (! linked) { var error = gl.getProgramInfoLog(program); console.log('Failed to link program: ' + error); gl.deleteProgram(program); gl.deleteShader(fragmentShader); gl.deleteShader(vertexShader); return; } // *** if (! program) { console.log('Failed to create program'); return; } gl.useProgram(program); gl.program = program; } // ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ // Get the storage location of a_Position var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); if (a_Position < 0) { console.log('Failed to get the storage location of a_Position'); return; } // // Pass vertex position to attribute variable // gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0); // Register function (event handler) to be called on a mouse press canvas.onmousedown = function(ev){ click(ev, gl, canvas, a_Position); }; // ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ // Specify the color for clearing <canvas> gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear <canvas> gl.clear(gl.COLOR_BUFFER_BIT); // // Draw a point // gl.drawArrays(gl.POINTS, 0, 1); }; var g_points = []; // The array for the position of a mouse press function click(ev, gl, canvas, a_Position) { var x = ev.clientX; // x coordinate of a mouse pointer var y = ev.clientY; // y coordinate of a mouse pointer var rect = ev.target.getBoundingClientRect() ; x = ((x - rect.left) - canvas.width/2)/(canvas.width/2); y = (canvas.height/2 - (y - rect.top))/(canvas.height/2); // Store the coordinates to g_points array g_points.push(x); g_points.push(y); // Clear <canvas> gl.clear(gl.COLOR_BUFFER_BIT); // ZC: 绘制全部的点 var len = g_points.length; for(var i = 0; i < len; i += 2) { // Pass the position of a point to a_Position variable gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0); // Draw gl.drawArrays(gl.POINTS, 0, 1); } } --> </script> <!-- <link rel="stylesheet" href="???.css"> --> <style type="text/css"> <!-- --> </style> </head> <body> <canvas id="webgl" width="400" height="400"> Please use a browser that supports "canvas" </canvas> </body> </html>
2.5、02.8_ColoredPoints.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- <script type="text/javascript" src="???.js"></script> --> <script type="text/javascript" > <!-- // Vertex shader program var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' +// ZC: 必须是 全局变量 'void main() {\n' + ' gl_Position = a_Position;\n' + // Set the vertex coordinates of the point ' gl_PointSize = 10.0;\n' + // Set the point size '}\n'; // Fragment shader program var FSHADER_SOURCE = 'precision mediump float;\n' +// ZC: 精度限定词 'uniform vec4 u_FragColor;\n' + // uniform変数 'void main() {\n' + ' gl_FragColor = u_FragColor;\n' + // Set the point color '}\n'; window.onload = function() { var canvas = document.getElementById('webgl'); //var context = canvas.getContext("experimental-webgl"); // Get the rendering context for WebGL var gl = canvas.getContext("experimental-webgl"); if (! gl) { console.log('Failed to get the rendering context for WebGL'); return; } /* // Initialize shaders if (! initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { console.log('Failed to intialize shaders.'); return; } */ { var vertexShader = gl.createShader(gl.VERTEX_SHADER); if (vertexShader == null) { console.log('unable to create shader'); return; } // Set the shader program gl.shaderSource(vertexShader, VSHADER_SOURCE); // Compile the shader gl.compileShader(vertexShader); // Check the result of compilation var compiled_vertex = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS); if (! compiled_vertex) { var error = gl.getShaderInfoLog(vertexShader); console.log('Failed to compile shader: ' + error); gl.deleteShader(vertexShader); return; } // *** var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); if (fragmentShader == null) { console.log('unable to create shader'); return; } gl.shaderSource(fragmentShader, FSHADER_SOURCE); gl.compileShader(fragmentShader); var compiled_fragment = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS); if (! compiled_fragment) { var error = gl.getShaderInfoLog(fragmentShader); console.log('Failed to compile shader: ' + fragmentShader); gl.deleteShader(fragmentShader); return; } // *** if ( (! vertexShader) || (! fragmentShader) ) return; // Create a program object var program = gl.createProgram(); if (! program) return; // Attach the shader objects gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); // Link the program object gl.linkProgram(program); // Check the result of linking var linked = gl.getProgramParameter(program, gl.LINK_STATUS); if (! linked) { var error = gl.getProgramInfoLog(program); console.log('Failed to link program: ' + error); gl.deleteProgram(program); gl.deleteShader(fragmentShader); gl.deleteShader(vertexShader); return; } // *** if (! program) { console.log('Failed to create program'); return; } gl.useProgram(program); gl.program = program; } // ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ // Get the storage location of a_Position var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); if (a_Position < 0) { console.log('Failed to get the storage location of a_Position'); return; } // // Pass vertex position to attribute variable // gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0); // Get the storage location of u_FragColor var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor'); if (!u_FragColor) { console.log('Failed to get the storage location of u_FragColor'); return; } // Register function (event handler) to be called on a mouse press canvas.onmousedown = function(ev){ click(ev, gl, canvas, a_Position, u_FragColor) }; // ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ // Specify the color for clearing <canvas> gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear <canvas> gl.clear(gl.COLOR_BUFFER_BIT); // // Draw a point // gl.drawArrays(gl.POINTS, 0, 1); }; var g_points = []; // The array for the position of a mouse press var g_colors = []; // The array to store the color of a point function click(ev, gl, canvas, a_Position, u_FragColor) { var x = ev.clientX; // x coordinate of a mouse pointer var y = ev.clientY; // y coordinate of a mouse pointer var rect = ev.target.getBoundingClientRect(); x = ((x - rect.left) - canvas.width/2)/(canvas.width/2); y = (canvas.height/2 - (y - rect.top))/(canvas.height/2); // Store the coordinates to g_points array g_points.push([x, y]); // Store the coordinates to g_points array if (x >= 0.0 && y >= 0.0) // First quadrant g_colors.push([1.0, 0.0, 0.0, 1.0]); // Red else if (x < 0.0 && y < 0.0)// Third quadrant g_colors.push([0.0, 1.0, 0.0, 1.0]); // Green else if (x > 0.0 && y < 0.0)// ZC: 我加的，第4象限 g_colors.push([0.0, 0.0, 1.0, 1.0]); // ZC: 蓝色 else // Others g_colors.push([1.0, 1.0, 1.0, 1.0]); // White // Clear <canvas> gl.clear(gl.COLOR_BUFFER_BIT); var len = g_points.length; for(var i = 0; i < len; i++) { var xy = g_points[i]; var rgba = g_colors[i]; // Pass the position of a point to a_Position variable gl.vertexAttrib3f(a_Position, xy[0], xy[1], 0.0); // Pass the color of a point to u_FragColor variable gl.uniform4f(u_FragColor, rgba[0], rgba[1], rgba[2], rgba[3]); // Draw gl.drawArrays(gl.POINTS, 0, 1); } } --> </script> <!-- <link rel="stylesheet" href="???.css"> --> <style type="text/css"> <!-- --> </style> </head> <body> <canvas id="webgl" width="400" height="400"> Please use a browser that supports "canvas" </canvas> </body> </html>
3、
4、
5、
