//

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()

});

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

 

OK,That's all