//experimental-webgl
$(document).ready(function () {
// Gets canvas from the HTML page
var canvas = document.getElementById('viewport');
// Creates GL context
gl = null;
try {
gl = canvas.getContext('experimental-webgl');
}
catch (e) {
alert('Exception catched in getContext: ' + e.toString()); return;
}
// If no exception but context creation failed, alerts user
if (!gl) {
alert('Unable to create Web GL context'); return;
}
// Sets clear color to non-transparent dark blue and clears context
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
//---------------- end of part 1 -----------------
// Creates fragment shader (returns white color for any position)
var fshader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fshader, 'void main(void) {gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);}');
gl.compileShader(fshader);
if (!gl.getShaderParameter(fshader, gl.COMPILE_STATUS)) {
alert('Error during fragment shader compilation:\n' + gl.getShaderInfoLog(fshader)); return;
}
// Creates vertex shader (converts 2D point position to coordinates)
var vshader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vshader, 'attribute vec2 ppos; void main(void) { gl_Position = vec4(ppos.x, ppos.y, 0.0, 1.0);}');
gl.compileShader(vshader);
if (!gl.getShaderParameter(vshader, gl.COMPILE_STATUS))
{
alert('Error during vertex shader compilation:\n' + gl.getShaderInfoLog(vshader)); return;
}
// Creates program and links shaders to it
var program = gl.createProgram();
gl.attachShader(program, fshader);
gl.attachShader(program, vshader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
alert('Error during program linking:\n' + gl.getProgramInfoLog(program)); return;
}
// Validates and uses program in the GL context
gl.validateProgram(program);
if (!gl.getProgramParameter(program, gl.VALIDATE_STATUS)) {
alert('Error during program validation:\n' + gl.getProgramInfoLog(program)); return;
}
gl.useProgram(program);
// Gets address of the input 'attribute' of the vertex shader
var vattrib = gl.getAttribLocation(program, 'ppos');
if (vattrib == -1) {
alert('Error during attribute address retrieval'); return;
}
gl.enableVertexAttribArray(vattrib);
// Initializes the vertex buffer and sets it as current one
var vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
// Puts vertices to buffer and links it to attribute variable 'ppos'
var vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
gl.vertexAttribPointer(vattrib, 2, gl.FLOAT, false, 0, 0);
// Draws the object
gl.drawArrays(gl.TRIANGLES, 0, 3);
gl.flush()
});
除了上述代码,什么也不想说,但会把我看过的文章列表贴出来,