原生态webgl--DEMO,以后可能选择Three.JS来代替了,代码网上找的,参考引用-CSDN博客

// 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()
});

除了上述代码,什么也不想说,但会把我看过的文章列表贴出来,

http://www.c3dl.org/index.php/tutorials/tutorial-1-browsers/

http://blogoben.wordpress.com/2011/03/20/webgl-basics-2-white-2d-triangle/

http://blogoben.googlecode.com/svn/trunk/webgl-basics/part-2-white-triangle.html

http://www.khronos.org/registry/gles/

https://github.com/mrdoob/three.js

http://www.rozengain.com/files/webgl/tunnel/

http://codedstructure.net/projects/webgl_shader_lab/

http://www.iquilezles.org/apps/shadertoy/

http://www.nihilogic.dk/labs/worlds_of_webgl/

http://mrdoob.com/blog/post/714

http://learningwebgl.com/blog/