sawine@73
|
1 |
function main()
|
sawine@73
|
2 |
{
|
sawine@73
|
3 |
var canvas = document.getElementById("machine");
|
sawine@73
|
4 |
var context = new Context(canvas);
|
sawine@73
|
5 |
var gl = context.gl;
|
sawine@73
|
6 |
context.object = new Box(1, context);
|
sawine@73
|
7 |
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
sawine@73
|
8 |
gl.enable(gl.DEPTH_TEST);
|
sawine@73
|
9 |
draw(context);
|
sawine@73
|
10 |
}
|
sawine@73
|
11 |
|
sawine@73
|
12 |
function Context(canvas)
|
sawine@73
|
13 |
{
|
sawine@73
|
14 |
try
|
sawine@73
|
15 |
{
|
sawine@73
|
16 |
this.gl = canvas.getContext("experimental-webgl");
|
sawine@73
|
17 |
this.viewport = {'width': canvas.width,
|
sawine@73
|
18 |
'height': canvas.height};
|
sawine@73
|
19 |
}
|
sawine@73
|
20 |
catch(e)
|
sawine@73
|
21 |
{
|
sawine@73
|
22 |
alert(e);
|
sawine@73
|
23 |
}
|
sawine@73
|
24 |
if (!this.gl) alert("Failed: WebGL init.");
|
sawine@73
|
25 |
this.mvMatrix = mat4.create();
|
sawine@73
|
26 |
this.pMatrix = mat4.create();
|
sawine@73
|
27 |
this.shader = new Shader(this);
|
sawine@73
|
28 |
}
|
sawine@73
|
29 |
Context.prototype.updateMatrixUniforms = function()
|
sawine@73
|
30 |
{
|
sawine@73
|
31 |
var gl = this.gl;
|
sawine@73
|
32 |
var program = this.shader.program;
|
sawine@73
|
33 |
var pMatrix = this.pMatrix;
|
sawine@73
|
34 |
var mvMatrix = this.mvMatrix;
|
sawine@73
|
35 |
gl.uniformMatrix4fv(program.pMatrixUniform, false, pMatrix);
|
sawine@73
|
36 |
gl.uniformMatrix4fv(program.mvMatrixUniform, false, mvMatrix);
|
sawine@73
|
37 |
}
|
sawine@73
|
38 |
|
sawine@73
|
39 |
function Shader(context)
|
sawine@73
|
40 |
{
|
sawine@73
|
41 |
var gl = context.gl;
|
sawine@73
|
42 |
var fragment = loadShader(gl, "shader-fs");
|
sawine@73
|
43 |
var vertex = loadShader(gl, "shader-vs");
|
sawine@73
|
44 |
this.program = gl.createProgram();
|
sawine@73
|
45 |
gl.attachShader(this.program, vertex);
|
sawine@73
|
46 |
gl.attachShader(this.program, fragment);
|
sawine@73
|
47 |
gl.linkProgram(this.program);
|
sawine@73
|
48 |
|
sawine@73
|
49 |
if (!gl.getProgramParameter(this.program, gl.LINK_STATUS))
|
sawine@73
|
50 |
{
|
sawine@73
|
51 |
alert("Failed: Shader init.");
|
sawine@73
|
52 |
}
|
sawine@73
|
53 |
|
sawine@73
|
54 |
gl.useProgram(this.program);
|
sawine@73
|
55 |
this.vertexPosition = gl.getAttribLocation(this.program, "aVertexPosition");
|
sawine@73
|
56 |
gl.enableVertexAttribArray(this.vertexPosition);
|
sawine@73
|
57 |
this.pMatrixUniform = gl.getUniformLocation(this.program, "uPMatrix");
|
sawine@73
|
58 |
this.mvMatrixUniform = gl.getUniformLocation(this.program, "uMVMatrix");
|
sawine@73
|
59 |
|
sawine@73
|
60 |
function loadShader(gl, id)
|
sawine@73
|
61 |
{
|
sawine@73
|
62 |
var script = document.getElementById(id);
|
sawine@73
|
63 |
if (!script) return null;
|
sawine@73
|
64 |
|
sawine@73
|
65 |
var str = "";
|
sawine@73
|
66 |
var child = script.firstChild;
|
sawine@73
|
67 |
while (child)
|
sawine@73
|
68 |
{
|
sawine@73
|
69 |
if (child.nodeType == 3) str += child.textContent;
|
sawine@73
|
70 |
child = child.nextSibling;
|
sawine@73
|
71 |
}
|
sawine@73
|
72 |
|
sawine@73
|
73 |
var shader;
|
sawine@73
|
74 |
var common = "x-shader/x-";
|
sawine@73
|
75 |
if (script.type == common + "fragment") shader = gl.createShader(gl.FRAGMENT_SHADER);
|
sawine@73
|
76 |
else if (script.type == common + "vertex") shader = gl.createShader(gl.VERTEX_SHADER);
|
sawine@73
|
77 |
else return null;
|
sawine@73
|
78 |
|
sawine@73
|
79 |
gl.shaderSource(shader, str);
|
sawine@73
|
80 |
gl.compileShader(shader);
|
sawine@73
|
81 |
|
sawine@73
|
82 |
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
|
sawine@73
|
83 |
{
|
sawine@73
|
84 |
alert(gl.getShaderInfoLog(shader));
|
sawine@73
|
85 |
return null;
|
sawine@73
|
86 |
}
|
sawine@73
|
87 |
|
sawine@73
|
88 |
return shader;
|
sawine@73
|
89 |
}
|
sawine@73
|
90 |
}
|
sawine@73
|
91 |
|
sawine@73
|
92 |
|
sawine@73
|
93 |
function Box(size, context)
|
sawine@73
|
94 |
{
|
sawine@73
|
95 |
var gl = context.gl;
|
sawine@73
|
96 |
this.size = size || 1;
|
sawine@73
|
97 |
this.buffer = gl.createBuffer();
|
sawine@73
|
98 |
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
|
sawine@73
|
99 |
var vertices = [1.0, 1.0, 0.0,
|
sawine@73
|
100 |
-1.0, 1.0, 0.0,
|
sawine@73
|
101 |
1.0, -1.0, 0.0,
|
sawine@73
|
102 |
-1.0, -1.0, 0.0];
|
sawine@73
|
103 |
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
|
sawine@73
|
104 |
this.itemSize = 3;
|
sawine@73
|
105 |
this.numItems = 4;
|
sawine@73
|
106 |
}
|
sawine@73
|
107 |
|
sawine@73
|
108 |
function draw(context)
|
sawine@73
|
109 |
{
|
sawine@73
|
110 |
var gl = context.gl;
|
sawine@73
|
111 |
var viewport = context.viewport;
|
sawine@73
|
112 |
var shader = context.shader;
|
sawine@73
|
113 |
var mvMatrix = context.mvMatrix;
|
sawine@73
|
114 |
var pMatrix = context.pMatrix;
|
sawine@73
|
115 |
var object = context.object;
|
sawine@73
|
116 |
gl.viewport(0, 0, viewport.width, viewport.height);
|
sawine@73
|
117 |
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
sawine@73
|
118 |
mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix);
|
sawine@73
|
119 |
mat4.identity(mvMatrix);
|
sawine@73
|
120 |
mat4.translate(mvMatrix, [0.0, 0.0, -7.0]);
|
sawine@73
|
121 |
gl.bindBuffer(gl.ARRAY_BUFFER, object.buffer);
|
sawine@73
|
122 |
gl.vertexAttribPointer(shader.vertexPosition, object.itemSize, gl.FLOAT, false, 0, 0);
|
sawine@73
|
123 |
gl.uniformMatrix4fv(shader.pMatrixUniform, false, pMatrix);
|
sawine@73
|
124 |
gl.uniformMatrix4fv(shader.mvMatrixUniform, false, mvMatrix);
|
sawine@73
|
125 |
//context.updateMatrixUniforms();
|
sawine@73
|
126 |
gl.drawArrays(gl.TRIANGLE_STRIP, 0, object.numItems);
|
sawine@73
|
127 |
return context;
|
sawine@73
|
128 |
}
|
sawine@73
|
129 |
|
sawine@73
|
130 |
function drawScene(context) {
|
sawine@73
|
131 |
gl.viewport(0, 0, viewport.width, viewport.height);
|
sawine@73
|
132 |
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
sawine@73
|
133 |
|
sawine@73
|
134 |
mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix);
|
sawine@73
|
135 |
|
sawine@73
|
136 |
mat4.identity(mvMatrix);
|
sawine@73
|
137 |
mat4.translate(mvMatrix, [0.0, 0.0, -7.0]);
|
sawine@73
|
138 |
|
sawine@73
|
139 |
gl.bindBuffer(gl.ARRAY_BUFFER, object.buffer);
|
sawine@73
|
140 |
gl.vertexAttribPointer(shader.vertexPosition, object.itemSize, gl.FLOAT, false, 0, 0);
|
sawine@73
|
141 |
gl.uniformMatrix4fv(shader.pMatrixUniform, false, pMatrix);
|
sawine@73
|
142 |
gl.uniformMatrix4fv(shader.mvMatrixUniform, false, mvMatrix);
|
sawine@73
|
143 |
gl.drawArrays(gl.TRIANGLE_STRIP, 0, object.numItems);
|
sawine@73
|
144 |
}
|
sawine@73
|
145 |
|