绘制结果
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>绘制点</title>
</head><body onload="main()"><canvas id="webgl" width="400" height="400"></canvas><!-- Vertex shader program --><script id="VSHADER_SOURCE" type="text/plain">void main() {gl_Position = vec4(0.0, 0.0, 0.0, 1.0);gl_PointSize = 10.0;}</script><!-- Fragment shader program --><script id="FSHADER_SOURCE" type="text/plain">void main() {gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );}</script><script>function main() {// 顶点着色器var VSHADER_SOURCE = document.getElementById("VSHADER_SOURCE").textContent// 片元着色器var FSHADER_SOURCE = document.getElementById("FSHADER_SOURCE").textContent// Retrieve <canvas> elementvar canvas = document.getElementById("webgl");// 获取webgl上下文var gl = canvas.getContext("webgl");// Initialize shadersif (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log("Failed to intialize shaders.");return;}// 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 pointgl.drawArrays(gl.POINTS, 0, 1);}// cuon-utils.js (c) 2012 kanda and matsuda/*** Create a program object and make current* @param gl GL context* @param vshader a vertex shader program (string)* @param fshader a fragment shader program (string)* @return true, if the program object was created and successfully made current*/function initShaders(gl, vshader, fshader) {var program = createProgram(gl, vshader, fshader);if (!program) {console.log("Failed to create program");return false;}gl.useProgram(program);gl.program = program;return true;}/*** Create the linked program object* @param gl GL context* @param vshader a vertex shader program (string)* @param fshader a fragment shader program (string)* @return created program object, or null if the creation has failed*/function createProgram(gl, vshader, fshader) {// Create shader objectvar vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);if (!vertexShader || !fragmentShader) {return null;}// Create a program objectvar program = gl.createProgram();if (!program) {return null;}// Attach the shader objectsgl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);// Link the program objectgl.linkProgram(program);// Check the result of linkingvar 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 null;}return program;}/*** Create a shader object* @param gl GL context* @param type the type of the shader object to be created* @param source shader program (string)* @return created shader object, or null if the creation has failed.*/function loadShader(gl, type, source) {// Create shader objectvar shader = gl.createShader(type);if (shader == null) {console.log("unable to create shader");return null;}// Set the shader programgl.shaderSource(shader, source);// Compile the shadergl.compileShader(shader);// Check the result of compilationvar compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);if (!compiled) {var error = gl.getShaderInfoLog(shader);console.log("Failed to compile shader: " + error);gl.deleteShader(shader);return null;}return shader;}</script>
</body></html>
监控初始化的恢复和转码方法)
