webgl / webgl_tutorials · Commits

Commit ecd186535fd6106312c1b636e5ac3a40b1eda1f3

Authored by Georg Hopp
1 parent 9582c312

More improvement in style and separation of js and html.

Inline Side-by-side
Showing 8 changed files with 868 additions and 798 deletions
1 <html> 1 <html>
2 <head> 2 <head>
3 - <title>First very simple WebGL example...</title>  
4 -  
5 - <script src="./gl-matrix-min.js" type="text/javascript"></script>  
6 -  
7 - <script type="text/javascript">  
8 - var projectionMatrix, modelViewMatrix;  
9 - var rotationAxis;  
10 - var shaderProgram, shaderVertexPositionAttribute  
11 - var shaderVertexColorAttribute;  
12 - var shaderProjectionMatrixUniform, shaderModelViewMatrixUniform;  
13 -  
14 - var duration = 5000; // ms  
15 - var currentTime = Date.now();  
16 -  
17 - function initWebGL(canvas) {  
18 - var gl = null;  
19 - var msg = "Your browser does not support WebGL, " +  
20 - "or it is not enabled by default.";  
21 - try {  
22 - gl = canvas.getContext("experimental-webgl");  
23 - }  
24 - catch (e) {  
25 - msg = "Error creating WebGL Context!: " + e.toString();  
26 - }  
27 - if (!gl) {  
28 - alert(msg);  
29 - throw new Error(msg);  
30 - }  
31 -  
32 - return gl;  
33 - }  
34 -  
35 - function initViewport(gl, canvas) {  
36 - gl.viewport(0, 0, canvas.width, canvas.height);  
37 - }  
38 -  
39 - // Create the vertex, color, and index data for a  
40 - // multicolored cube  
41 - function createCube(gl) {  
42 - // Vertex Data  
43 - var vertexBuffer;  
44 - vertexBuffer = gl.createBuffer();  
45 - gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);  
46 - var verts = [  
47 - // Front face  
48 - -1.0, -1.0, 1.0,  
49 - 1.0, -1.0, 1.0,  
50 - 1.0, 1.0, 1.0,  
51 - -1.0, 1.0, 1.0,  
52 - // Back face  
53 - -1.0, -1.0, -1.0,  
54 - -1.0, 1.0, -1.0,  
55 - 1.0, 1.0, -1.0,  
56 - 1.0, -1.0, -1.0,  
57 - // Top face  
58 - -1.0, 1.0, -1.0,  
59 - -1.0, 1.0, 1.0,  
60 - 1.0, 1.0, 1.0,  
61 - 1.0, 1.0, -1.0,  
62 - // Bottom face  
63 - -1.0, -1.0, -1.0,  
64 - 1.0, -1.0, -1.0,  
65 - 1.0, -1.0, 1.0,  
66 - -1.0, -1.0, 1.0,  
67 - // Right face  
68 - 1.0, -1.0, -1.0,  
69 - 1.0, 1.0, -1.0,  
70 - 1.0, 1.0, 1.0,  
71 - 1.0, -1.0, 1.0,  
72 - // Left face  
73 - -1.0, -1.0, -1.0,  
74 - -1.0, -1.0, 1.0,  
75 - -1.0, 1.0, 1.0,  
76 - -1.0, 1.0, -1.0  
77 - ];  
78 - gl.bufferData(  
79 - gl.ARRAY_BUFFER,  
80 - new Float32Array(verts),  
81 - gl.STATIC_DRAW);  
82 - // Color data  
83 - var colorBuffer = gl.createBuffer();  
84 - gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);  
85 - var faceColors = [  
86 - [1.0, 0.0, 0.0, 1.0], // Front face  
87 - [0.0, 1.0, 0.0, 1.0], // Back face  
88 - [0.0, 0.0, 1.0, 1.0], // Top face  
89 - [1.0, 1.0, 0.0, 1.0], // Bottom face  
90 - [1.0, 0.0, 1.0, 1.0], // Right face  
91 - [0.0, 1.0, 1.0, 1.0] // Left face  
92 - ];  
93 - var vertexColors = [];  
94 - for (var i in faceColors) {  
95 - var color = faceColors[i];  
96 - for (var j=0; j < 4; j++) {  
97 - vertexColors = vertexColors.concat(color);  
98 - }  
99 - }  
100 - gl.bufferData(  
101 - gl.ARRAY_BUFFER,  
102 - new Float32Array(vertexColors),  
103 - gl.STATIC_DRAW);  
104 - // Index data (defines the triangles to be drawn)  
105 - var cubeIndexBuffer = gl.createBuffer();  
106 - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer);  
107 - var cubeIndices = [  
108 - 0, 1, 2, 0, 2, 3, // Front face  
109 - 4, 5, 6, 4, 6, 7, // Back face  
110 - 8, 9, 10, 8, 10, 11, // Top face  
111 - 12, 13, 14, 12, 14, 15, // Bottom face  
112 - 16, 17, 18, 16, 18, 19, // Right face  
113 - 20, 21, 22, 20, 22, 23 // Left face  
114 - ];  
115 - gl.bufferData(  
116 - gl.ELEMENT_ARRAY_BUFFER,  
117 - new Uint16Array(cubeIndices),  
118 - gl.STATIC_DRAW);  
119 - var cube = {  
120 - buffer:vertexBuffer,  
121 - colorBuffer:colorBuffer,  
122 - indices:cubeIndexBuffer,  
123 - vertSize:3,  
124 - nVerts:24,  
125 - colorSize:4,  
126 - nColors: 24,  
127 - nIndices:36,  
128 - primtype:gl.TRIANGLES};  
129 -  
130 - return cube;  
131 - }  
132 -  
133 - function initMatrices(canvas) {  
134 - modelViewMatrix = mat4.create();  
135 - mat4.translate(  
136 - modelViewMatrix, modelViewMatrix, [0, 0, -8]);  
137 -  
138 - // Create a project matrix with 45 degree field of view  
139 - projectionMatrix = mat4.create();  
140 - mat4.perspective(projectionMatrix, Math.PI / 4,  
141 - canvas.width / canvas.height, 1, 10000);  
142 -  
143 - rotationAxis = vec3.create();  
144 - vec3.normalize(rotationAxis, [1, 1, 1]);  
145 - }  
146 -  
147 - function createShader(gl, id, type) {  
148 - var shader;  
149 - var str = document.getElementById(id).text;  
150 - if (type == "fragment") {  
151 - shader = gl.createShader(gl.FRAGMENT_SHADER);  
152 - } else if (type == "vertex") {  
153 - shader = gl.createShader(gl.VERTEX_SHADER);  
154 - } else {  
155 - return null;  
156 - }  
157 -  
158 - gl.shaderSource(shader, str);  
159 - gl.compileShader(shader);  
160 -  
161 - if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {  
162 - alert(gl.getShaderInfoLog(shader));  
163 - return null;  
164 - }  
165 -  
166 - return shader;  
167 - }  
168 -  
169 - function initShader(gl, vertex, fragment) {  
170 - // load and compile the fragment and vertex shader  
171 - var fragmentShader = createShader(gl, fragment, "fragment");  
172 - var vertexShader = createShader(gl, vertex, "vertex");  
173 -  
174 - // link them together into a new program  
175 - shaderProgram = gl.createProgram();  
176 - gl.attachShader(shaderProgram, vertexShader);  
177 - gl.attachShader(shaderProgram, fragmentShader);  
178 - gl.linkProgram(shaderProgram);  
179 -  
180 - // get pointers to the shader params  
181 - shaderVertexPositionAttribute = gl.getAttribLocation(  
182 - shaderProgram, "vertexPos");  
183 - gl.enableVertexAttribArray(shaderVertexPositionAttribute);  
184 - shaderVertexColorAttribute = gl.getAttribLocation(  
185 - shaderProgram, "vertexColor");  
186 - gl.enableVertexAttribArray(shaderVertexColorAttribute);  
187 -  
188 - shaderProjectionMatrixUniform = gl.getUniformLocation(  
189 - shaderProgram, "projectionMatrix");  
190 - shaderModelViewMatrixUniform = gl.getUniformLocation(  
191 - shaderProgram, "modelViewMatrix");  
192 -  
193 - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {  
194 - alert("Could not initialise shaders");  
195 - }  
196 - }  
197 -  
198 - function draw(gl, obj) {  
199 - // clear the background (transparent)  
200 - gl.clearColor(0.0, 0.0, 0.0, 0.0);  
201 - // // clear the background (black)  
202 - // gl.clearColor(0.0, 0.0, 0.0, 1.0);  
203 - gl.enable(gl.DEPTH_TEST);  
204 - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);  
205 -  
206 - // set the shader to use  
207 - gl.useProgram(shaderProgram);  
208 -  
209 - // connect up the shader parameters: vertex position,  
210 - // color, and projection/model matrices  
211 - // set up the buffers  
212 - gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);  
213 - gl.vertexAttribPointer(shaderVertexPositionAttribute,  
214 - obj.vertSize, gl.FLOAT, false, 0, 0);  
215 - gl.bindBuffer(gl.ARRAY_BUFFER, obj.colorBuffer);  
216 - gl.vertexAttribPointer(shaderVertexColorAttribute,  
217 - obj.colorSize, gl.FLOAT, false, 0, 0);  
218 - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices);  
219 - gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false,  
220 - projectionMatrix);  
221 - gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false,  
222 - modelViewMatrix);  
223 -  
224 - // draw the object  
225 - gl.drawElements(  
226 - obj.primtype, obj.nIndices, gl.UNSIGNED_SHORT, 0);  
227 - }  
228 -  
229 - function animate() {  
230 - var now = Date.now();  
231 - var deltat = now - currentTime;  
232 - currentTime = now;  
233 - var fract = deltat / duration;  
234 - var angle = Math.PI * 2 * fract;  
235 - mat4.rotate(  
236 - modelViewMatrix, modelViewMatrix, angle, rotationAxis);  
237 - }  
238 -  
239 - function run(gl, cube) {  
240 - requestAnimationFrame(function() { run(gl, cube); });  
241 - draw(gl, cube);  
242 - animate();  
243 - }  
244 -  
245 - function startGl() {  
246 - // Get A WebGL context  
247 - var canvas = document.getElementById("cube");  
248 - var gl = initWebGL(canvas);  
249 - var obj = createCube(gl);  
250 -  
251 - initViewport(gl, canvas);  
252 - initMatrices(canvas);  
253 - initShader(  
254 - gl,  
255 - "cube-vertex-shader",  
256 - "cube-fragment-shader");  
257 - run(gl, obj);  
258 - }  
259 - </script> 3 + <title>Colored animated cube.</title>
  4 + <link rel="stylesheet" href="main.css">
  5 + <script src="gl-matrix-min.js" type="text/javascript"></script>
  6 + <script src="cube.js" type="text/javascript"></script>
260 7
261 <script id="cube-vertex-shader" type="x-shader/x-vertex"> 8 <script id="cube-vertex-shader" type="x-shader/x-vertex">
262 attribute vec3 vertexPos; 9 attribute vec3 vertexPos;
@@ -281,10 +28,30 @@ @@ -281,10 +28,30 @@
281 gl_FragColor = vColor; 28 gl_FragColor = vColor;
282 } 29 }
283 </script> 30 </script>
  31 +
  32 + <style>
  33 + .result_container {
  34 + height: 200px;
  35 + }
  36 + </style>
284 </head> 37 </head>
285 38
286 <body onLoad="startGl()"> 39 <body onLoad="startGl()">
287 - <canvas id="cube" width="200" height="200"></canvas> 40 + <div id="background"></div>
  41 + <div id="back" class="text">
  42 + <a href="index.html">back</a>
  43 + </div>
  44 + <div class="content text">
  45 + <h1>Colored animated cube.</h1>
  46 + <p>
  47 + An animated cube. Each side has a different color.
  48 + </p>
  49 + <h2>Result</h2>
  50 + <div class="gl">
  51 + <canvas id="cube" width="200" height="200"></canvas>
  52 + </div>
  53 + <p class="result_container"></p>
  54 + </div>
288 </body> 55 </body>
289 </html> 56 </html>
290 <!-- vim: set ts=4 sw=4: --> 57 <!-- vim: set ts=4 sw=4: -->
  1 +var projectionMatrix, modelViewMatrix;
  2 +var rotationAxis;
  3 +var shaderProgram, shaderVertexPositionAttribute
  4 +var shaderVertexColorAttribute;
  5 +var shaderProjectionMatrixUniform, shaderModelViewMatrixUniform;
  6 +
  7 +var duration = 5000; // ms
  8 +var currentTime = Date.now();
  9 +
  10 +function initWebGL(canvas) {
  11 + var gl = null;
  12 + var msg = "Your browser does not support WebGL, " +
  13 + "or it is not enabled by default.";
  14 + try {
  15 + gl = canvas.getContext("experimental-webgl");
  16 + }
  17 + catch (e) {
  18 + msg = "Error creating WebGL Context!: " + e.toString();
  19 + }
  20 + if (!gl) {
  21 + alert(msg);
  22 + throw new Error(msg);
  23 + }
  24 +
  25 + return gl;
  26 +}
  27 +
  28 +function initViewport(gl, canvas) {
  29 + gl.viewport(0, 0, canvas.width, canvas.height);
  30 +}
  31 +
  32 +// Create the vertex, color, and index data for a
  33 +// multicolored cube
  34 +function createCube(gl) {
  35 + // Vertex Data
  36 + var vertexBuffer;
  37 + vertexBuffer = gl.createBuffer();
  38 + gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  39 + var verts = [
  40 + // Front face
  41 + -1.0, -1.0, 1.0,
  42 + 1.0, -1.0, 1.0,
  43 + 1.0, 1.0, 1.0,
  44 + -1.0, 1.0, 1.0,
  45 + // Back face
  46 + -1.0, -1.0, -1.0,
  47 + -1.0, 1.0, -1.0,
  48 + 1.0, 1.0, -1.0,
  49 + 1.0, -1.0, -1.0,
  50 + // Top face
  51 + -1.0, 1.0, -1.0,
  52 + -1.0, 1.0, 1.0,
  53 + 1.0, 1.0, 1.0,
  54 + 1.0, 1.0, -1.0,
  55 + // Bottom face
  56 + -1.0, -1.0, -1.0,
  57 + 1.0, -1.0, -1.0,
  58 + 1.0, -1.0, 1.0,
  59 + -1.0, -1.0, 1.0,
  60 + // Right face
  61 + 1.0, -1.0, -1.0,
  62 + 1.0, 1.0, -1.0,
  63 + 1.0, 1.0, 1.0,
  64 + 1.0, -1.0, 1.0,
  65 + // Left face
  66 + -1.0, -1.0, -1.0,
  67 + -1.0, -1.0, 1.0,
  68 + -1.0, 1.0, 1.0,
  69 + -1.0, 1.0, -1.0
  70 + ];
  71 + gl.bufferData(
  72 + gl.ARRAY_BUFFER,
  73 + new Float32Array(verts),
  74 + gl.STATIC_DRAW);
  75 + // Color data
  76 + var colorBuffer = gl.createBuffer();
  77 + gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  78 + var faceColors = [
  79 + [1.0, 0.0, 0.0, 1.0], // Front face
  80 + [0.0, 1.0, 0.0, 1.0], // Back face
  81 + [0.0, 0.0, 1.0, 1.0], // Top face
  82 + [1.0, 1.0, 0.0, 1.0], // Bottom face
  83 + [1.0, 0.0, 1.0, 1.0], // Right face
  84 + [0.0, 1.0, 1.0, 1.0] // Left face
  85 + ];
  86 + var vertexColors = [];
  87 + for (var i in faceColors) {
  88 + var color = faceColors[i];
  89 + for (var j=0; j < 4; j++) {
  90 + vertexColors = vertexColors.concat(color);
  91 + }
  92 + }
  93 + gl.bufferData(
  94 + gl.ARRAY_BUFFER,
  95 + new Float32Array(vertexColors),
  96 + gl.STATIC_DRAW);
  97 + // Index data (defines the triangles to be drawn)
  98 + var cubeIndexBuffer = gl.createBuffer();
  99 + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer);
  100 + var cubeIndices = [
  101 + 0, 1, 2, 0, 2, 3, // Front face
  102 + 4, 5, 6, 4, 6, 7, // Back face
  103 + 8, 9, 10, 8, 10, 11, // Top face
  104 + 12, 13, 14, 12, 14, 15, // Bottom face
  105 + 16, 17, 18, 16, 18, 19, // Right face
  106 + 20, 21, 22, 20, 22, 23 // Left face
  107 + ];
  108 + gl.bufferData(
  109 + gl.ELEMENT_ARRAY_BUFFER,
  110 + new Uint16Array(cubeIndices),
  111 + gl.STATIC_DRAW);
  112 + var cube = {
  113 + buffer:vertexBuffer,
  114 + colorBuffer:colorBuffer,
  115 + indices:cubeIndexBuffer,
  116 + vertSize:3,
  117 + nVerts:24,
  118 + colorSize:4,
  119 + nColors: 24,
  120 + nIndices:36,
  121 + primtype:gl.TRIANGLES};
  122 +
  123 + return cube;
  124 +}
  125 +
  126 +function initMatrices(canvas) {
  127 + modelViewMatrix = mat4.create();
  128 + mat4.translate(
  129 + modelViewMatrix, modelViewMatrix, [0, 0, -4.6]);
  130 +
  131 + // Create a project matrix with 45 degree field of view
  132 + projectionMatrix = mat4.create();
  133 + mat4.perspective(projectionMatrix, Math.PI / 4,
  134 + canvas.width / canvas.height, 1, 10000);
  135 +
  136 + rotationAxis = vec3.create();
  137 + vec3.normalize(rotationAxis, [1, 1, 1]);
  138 +}
  139 +
  140 +function createShader(gl, id, type) {
  141 + var shader;
  142 + var str = document.getElementById(id).text;
  143 + if (type == "fragment") {
  144 + shader = gl.createShader(gl.FRAGMENT_SHADER);
  145 + } else if (type == "vertex") {
  146 + shader = gl.createShader(gl.VERTEX_SHADER);
  147 + } else {
  148 + return null;
  149 + }
  150 +
  151 + gl.shaderSource(shader, str);
  152 + gl.compileShader(shader);
  153 +
  154 + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  155 + alert(gl.getShaderInfoLog(shader));
  156 + return null;
  157 + }
  158 +
  159 + return shader;
  160 +}
  161 +
  162 +function initShader(gl, vertex, fragment) {
  163 + // load and compile the fragment and vertex shader
  164 + var fragmentShader = createShader(gl, fragment, "fragment");
  165 + var vertexShader = createShader(gl, vertex, "vertex");
  166 +
  167 + // link them together into a new program
  168 + shaderProgram = gl.createProgram();
  169 + gl.attachShader(shaderProgram, vertexShader);
  170 + gl.attachShader(shaderProgram, fragmentShader);
  171 + gl.linkProgram(shaderProgram);
  172 +
  173 + // get pointers to the shader params
  174 + shaderVertexPositionAttribute = gl.getAttribLocation(
  175 + shaderProgram, "vertexPos");
  176 + gl.enableVertexAttribArray(shaderVertexPositionAttribute);
  177 + shaderVertexColorAttribute = gl.getAttribLocation(
  178 + shaderProgram, "vertexColor");
  179 + gl.enableVertexAttribArray(shaderVertexColorAttribute);
  180 +
  181 + shaderProjectionMatrixUniform = gl.getUniformLocation(
  182 + shaderProgram, "projectionMatrix");
  183 + shaderModelViewMatrixUniform = gl.getUniformLocation(
  184 + shaderProgram, "modelViewMatrix");
  185 +
  186 + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  187 + alert("Could not initialise shaders");
  188 + }
  189 +}
  190 +
  191 +function draw(gl, obj) {
  192 + // clear the background (transparent)
  193 + gl.clearColor(0.0, 0.0, 0.0, 0.0);
  194 + // // clear the background (black)
  195 + // gl.clearColor(0.0, 0.0, 0.0, 1.0);
  196 + gl.enable(gl.DEPTH_TEST);
  197 + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  198 +
  199 + // set the shader to use
  200 + gl.useProgram(shaderProgram);
  201 +
  202 + // connect up the shader parameters: vertex position,
  203 + // color, and projection/model matrices
  204 + // set up the buffers
  205 + gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);
  206 + gl.vertexAttribPointer(shaderVertexPositionAttribute,
  207 + obj.vertSize, gl.FLOAT, false, 0, 0);
  208 + gl.bindBuffer(gl.ARRAY_BUFFER, obj.colorBuffer);
  209 + gl.vertexAttribPointer(shaderVertexColorAttribute,
  210 + obj.colorSize, gl.FLOAT, false, 0, 0);
  211 + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices);
  212 + gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false,
  213 + projectionMatrix);
  214 + gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false,
  215 + modelViewMatrix);
  216 +
  217 + // draw the object
  218 + gl.drawElements(
  219 + obj.primtype, obj.nIndices, gl.UNSIGNED_SHORT, 0);
  220 +}
  221 +
  222 +function animate() {
  223 + var now = Date.now();
  224 + var deltat = now - currentTime;
  225 + currentTime = now;
  226 + var fract = deltat / duration;
  227 + var angle = Math.PI * 2 * fract;
  228 + mat4.rotate(
  229 + modelViewMatrix, modelViewMatrix, angle, rotationAxis);
  230 +}
  231 +
  232 +function run(gl, cube) {
  233 + requestAnimationFrame(function() { run(gl, cube); });
  234 + draw(gl, cube);
  235 + animate();
  236 +}
  237 +
  238 +function startGl() {
  239 + // Get A WebGL context
  240 + var canvas = document.getElementById("cube");
  241 + var gl = initWebGL(canvas);
  242 + var obj = createCube(gl);
  243 +
  244 + initViewport(gl, canvas);
  245 + initMatrices(canvas);
  246 + initShader(
  247 + gl,
  248 + "cube-vertex-shader",
  249 + "cube-fragment-shader");
  250 + run(gl, obj);
  251 +}
  252 +/* vim: set ts=4 sw=4: */
1 <html> 1 <html>
2 <head> 2 <head>
3 <title> Oh my Gosh </title> 3 <title> Oh my Gosh </title>
  4 + <link rel="stylesheet" href="main.css">
4 </head> 5 </head>
5 6
6 <body> 7 <body>
7 - <h1>Some WebGL tests</h1>  
8 - <hr>  
9 - <ul>  
10 - <li><a href="square.html">square</a></li>  
11 - <li><a href="cube.html">cube</a></li>  
12 - <li><a href="texture.html">texture</a></li>  
13 - </ul>  
14 - <hr> 8 + <div id="background"></div>
  9 + <div class="content text">
  10 + <h1>Some WebGL tests</h1>
  11 + <p>
  12 + This is my WebGL playground. The examples are taken from the
  13 + book <a href="http://oreil.ly/program-3d-apps-html5-webGL">
  14 + Programming 3D Applications with HTML5 and WebGL</a> written
  15 + by Tony Parisi and published at O'Reily.
  16 + </p>
  17 + <h2>Examples</h2>
  18 + <p>
  19 + <ul>
  20 + <li><a href="square.html">square</a></li>
  21 + <li><a href="cube.html">cube</a></li>
  22 + <li><a href="texture.html">texture</a></li>
  23 + </ul>
  24 + </p>
  25 + </div>
15 </body> 26 </body>
16 </html> 27 </html>
17 <!-- vim: set ts=4 sw=4: --> 28 <!-- vim: set ts=4 sw=4: -->
  1 +* {
  2 + font-family: Verdana, sans-serif;
  3 +}
  4 +.gl {
  5 + position: absolute;
  6 + left: 50%;
  7 + transform: translate(-50%, 0);
  8 + width: 200px;
  9 + height: 200px;
  10 + z-index: 2;
  11 +}
  12 +.text {
  13 + background: white;
  14 + border-style: solid;
  15 + border-color: rgb(100, 190, 12);
  16 + border-radius: 30px;
  17 + border-width: 3px;
  18 + padding: 10px;
  19 +}
  20 +.content {
  21 + position: fixed;
  22 + top: 50%;
  23 + left: 50%;
  24 + /* bring your own prefixes */
  25 + transform: translate(-50%, -50%);
  26 + width: 800px;
  27 + z-index: 1;
  28 +}
  29 +#background {
  30 + position: absolute;
  31 + left: 0px;
  32 + top: 0px;
  33 + width: 1920px;
  34 + height: 1200px;
  35 + background-image: url(./background1.jpg);
  36 + padding: 0px;
  37 + margin: 0px;
  38 + z-index: -1;
  39 +}
  40 +#back {
  41 + position: fixed;
  42 + border-radius: 15px;
  43 + border-width: 2px;
  44 + z-index: 1;
  45 +}
  46 +h1,h2,h3,h4,h5,h6 {
  47 + font-weight: normal;
  48 +}
  49 +h1,h4 {
  50 + text-decoration: underline;
  51 +}
  52 +h1 {
  53 + font-size: x-large;
  54 +}
  55 +a {
  56 + text-decoration: none;
  57 + color: rgb(110, 210, 12);
  58 +}
  59 +a:visited {
  60 + color: rgb(60, 130, 12);
  61 +}
  62 +/* vim: set ts=4 sw=4: */
1 <html> 1 <html>
2 <head> 2 <head>
3 <title>First very simple WebGL example...</title> 3 <title>First very simple WebGL example...</title>
4 -  
5 - <script src="./gl-matrix-min.js" type="text/javascript"></script>  
6 -  
7 - <script type="text/javascript">  
8 - var projectionMatrix, modelViewMatrix;  
9 - var shaderProgram, shaderVertexPositionAttribute;  
10 - var shaderProjectionMatrixUniform, shaderModelViewMatrixUniform;  
11 -  
12 - function initWebGL(canvas) {  
13 - var gl = null;  
14 - var msg = "Your browser does not support WebGL, " +  
15 - "or it is not enabled by default.";  
16 - try {  
17 - gl = canvas.getContext("experimental-webgl");  
18 - }  
19 - catch (e) {  
20 - msg = "Error creating WebGL Context!: " + e.toString();  
21 - }  
22 - if (!gl) {  
23 - alert(msg);  
24 - throw new Error(msg);  
25 - }  
26 -  
27 - return gl;  
28 - }  
29 -  
30 - function initViewport(gl, canvas) {  
31 - gl.viewport(0, 0, canvas.width, canvas.height);  
32 - }  
33 -  
34 - // Create the vertex data for a square to be drawn  
35 - function createSquare(gl) {  
36 - var vertexBuffer;  
37 - vertexBuffer = gl.createBuffer();  
38 - gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);  
39 - var verts = [  
40 - .5, .5, 0.0,  
41 - -.5, .5, 0.0,  
42 - .5, -.5, 0.0,  
43 - -.5, -.5, 0.0  
44 - ];  
45 - gl.bufferData(  
46 - gl.ARRAY_BUFFER,  
47 - new Float32Array(verts),  
48 - gl.STATIC_DRAW);  
49 - var square = {  
50 - buffer:vertexBuffer,  
51 - vertSize:3,  
52 - nVerts:4,  
53 - primtype:gl.TRIANGLE_STRIP};  
54 - return square;  
55 - }  
56 -  
57 - function initMatrices(canvas) {  
58 - // Create a model view matrix with camera at 0, 0, −3.333  
59 - modelViewMatrix = mat4.create();  
60 - mat4.translate(  
61 - modelViewMatrix, modelViewMatrix, [0, 0, -3.333]);  
62 -  
63 - // Create a project matrix with 45 degree field of view  
64 - projectionMatrix = mat4.create();  
65 - mat4.perspective(projectionMatrix, Math.PI / 4,  
66 - canvas.width / canvas.height, 1, 10000);  
67 - }  
68 -  
69 - function createShader(gl, id, type) {  
70 - var shader;  
71 - var str = document.getElementById(id).text;  
72 - if (type == "fragment") {  
73 - shader = gl.createShader(gl.FRAGMENT_SHADER);  
74 - } else if (type == "vertex") {  
75 - shader = gl.createShader(gl.VERTEX_SHADER);  
76 - } else {  
77 - return null;  
78 - }  
79 -  
80 - gl.shaderSource(shader, str);  
81 - gl.compileShader(shader);  
82 -  
83 - if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {  
84 - alert(gl.getShaderInfoLog(shader));  
85 - return null;  
86 - }  
87 -  
88 - return shader;  
89 - }  
90 -  
91 - function initShader(gl, vertex, fragment) {  
92 - // load and compile the fragment and vertex shader  
93 - var fragmentShader = createShader(gl, fragment, "fragment");  
94 - var vertexShader = createShader(gl, vertex, "vertex");  
95 -  
96 - // link them together into a new program  
97 - shaderProgram = gl.createProgram();  
98 - gl.attachShader(shaderProgram, vertexShader);  
99 - gl.attachShader(shaderProgram, fragmentShader);  
100 - gl.linkProgram(shaderProgram);  
101 -  
102 - // get pointers to the shader params  
103 - shaderVertexPositionAttribute = gl.getAttribLocation(  
104 - shaderProgram, "vertexPos");  
105 - gl.enableVertexAttribArray(shaderVertexPositionAttribute);  
106 -  
107 - shaderProjectionMatrixUniform = gl.getUniformLocation(  
108 - shaderProgram, "projectionMatrix");  
109 - shaderModelViewMatrixUniform = gl.getUniformLocation(  
110 - shaderProgram, "modelViewMatrix");  
111 -  
112 - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {  
113 - alert("Could not initialise shaders");  
114 - }  
115 - }  
116 -  
117 - function draw(gl, obj) {  
118 - // clear the background (with black)  
119 - gl.clearColor(0.0, 0.0, 0.0, 1.0);  
120 - gl.clear(gl.COLOR_BUFFER_BIT);  
121 -  
122 - // set the vertex buffer to be drawn  
123 - gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);  
124 -  
125 - // set the shader to use  
126 - gl.useProgram(shaderProgram);  
127 -  
128 - // connect up the shader parameters: vertex position and  
129 - // projection/model matrices  
130 - gl.vertexAttribPointer(  
131 - shaderVertexPositionAttribute,  
132 - obj.vertSize,  
133 - gl.FLOAT, false, 0, 0);  
134 - gl.uniformMatrix4fv(  
135 - shaderProjectionMatrixUniform,  
136 - false, projectionMatrix);  
137 - gl.uniformMatrix4fv(  
138 - shaderModelViewMatrixUniform, false, modelViewMatrix);  
139 -  
140 - // draw the object  
141 - gl.drawArrays(obj.primtype, 0, obj.nVerts);  
142 - }  
143 -  
144 - function startGl() {  
145 - // Get A WebGL context  
146 - var canvas = document.getElementById("square");  
147 - var gl = initWebGL(canvas);  
148 - var obj = createSquare(gl);  
149 -  
150 - initViewport(gl, canvas);  
151 - initMatrices(canvas);  
152 - initShader(  
153 - gl,  
154 - "square-vertex-shader",  
155 - "square-fragment-shader");  
156 - draw(gl, obj);  
157 - }  
158 - </script> 4 + <link rel="stylesheet" href="main.css">
  5 + <script src="gl-matrix-min.js" type="text/javascript"></script>
  6 + <script src="square.js" type="text/javascript"></script>
159 7
160 <script id="square-vertex-shader" type="x-shader/x-vertex"> 8 <script id="square-vertex-shader" type="x-shader/x-vertex">
161 attribute vec3 vertexPos; 9 attribute vec3 vertexPos;
@@ -174,10 +22,31 @@ @@ -174,10 +22,31 @@
174 gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); 22 gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
175 } 23 }
176 </script> 24 </script>
  25 +
  26 + <style>
  27 + .result_container {
  28 + height: 200px;
  29 + }
  30 + </style>
177 </head> 31 </head>
178 32
179 <body onLoad="startGl()"> 33 <body onLoad="startGl()">
180 - <canvas id="square" width="200" height="200"></canvas> 34 + <div id="background"></div>
  35 + <div id="back" class="text">
  36 + <a href="index.html">back</a>
  37 + </div>
  38 + <div class="content text">
  39 + <h1>First very simple WebGL example...</h1>
  40 + <p>
  41 + This is the beginning, not even 3D. Just initialize the
  42 + GL context and draw a square.
  43 + </p>
  44 + <h2>Result</h2>
  45 + <div class="gl">
  46 + <canvas id="square" width="200" height="200"></canvas>
  47 + </div>
  48 + <p class="result_container"></p>
  49 + </div>
181 </body> 50 </body>
182 </html> 51 </html>
183 <!-- vim: set ts=4 sw=4: --> 52 <!-- vim: set ts=4 sw=4: -->
  1 +var projectionMatrix, modelViewMatrix;
  2 +var shaderProgram, shaderVertexPositionAttribute;
  3 +var shaderProjectionMatrixUniform, shaderModelViewMatrixUniform;
  4 +
  5 +function initWebGL(canvas) {
  6 + var gl = null;
  7 + var msg = "Your browser does not support WebGL, " +
  8 + "or it is not enabled by default.";
  9 + try {
  10 + gl = canvas.getContext("experimental-webgl");
  11 + }
  12 + catch (e) {
  13 + msg = "Error creating WebGL Context!: " + e.toString();
  14 + }
  15 + if (!gl) {
  16 + alert(msg);
  17 + throw new Error(msg);
  18 + }
  19 +
  20 + return gl;
  21 +}
  22 +
  23 +function initViewport(gl, canvas) {
  24 + gl.viewport(0, 0, canvas.width, canvas.height);
  25 +}
  26 +
  27 +// Create the vertex data for a square to be drawn
  28 +function createSquare(gl) {
  29 + var vertexBuffer;
  30 + vertexBuffer = gl.createBuffer();
  31 + gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  32 + var verts = [
  33 + .5, .5, 0.0,
  34 + -.5, .5, 0.0,
  35 + .5, -.5, 0.0,
  36 + -.5, -.5, 0.0
  37 + ];
  38 + gl.bufferData(
  39 + gl.ARRAY_BUFFER,
  40 + new Float32Array(verts),
  41 + gl.STATIC_DRAW);
  42 + var square = {
  43 + buffer:vertexBuffer,
  44 + vertSize:3,
  45 + nVerts:4,
  46 + primtype:gl.TRIANGLE_STRIP};
  47 + return square;
  48 +}
  49 +
  50 +function initMatrices(canvas) {
  51 + // Create a model view matrix with camera at 0, 0, −3.333
  52 + modelViewMatrix = mat4.create();
  53 + mat4.translate(
  54 + modelViewMatrix, modelViewMatrix, [0, 0, -3.333]);
  55 +
  56 + // Create a project matrix with 45 degree field of view
  57 + projectionMatrix = mat4.create();
  58 + mat4.perspective(projectionMatrix, Math.PI / 4,
  59 + canvas.width / canvas.height, 1, 10000);
  60 +}
  61 +
  62 +function createShader(gl, id, type) {
  63 + var shader;
  64 + var str = document.getElementById(id).text;
  65 + if (type == "fragment") {
  66 + shader = gl.createShader(gl.FRAGMENT_SHADER);
  67 + } else if (type == "vertex") {
  68 + shader = gl.createShader(gl.VERTEX_SHADER);
  69 + } else {
  70 + return null;
  71 + }
  72 +
  73 + gl.shaderSource(shader, str);
  74 + gl.compileShader(shader);
  75 +
  76 + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  77 + alert(gl.getShaderInfoLog(shader));
  78 + return null;
  79 + }
  80 +
  81 + return shader;
  82 +}
  83 +
  84 +function initShader(gl, vertex, fragment) {
  85 + // load and compile the fragment and vertex shader
  86 + var fragmentShader = createShader(gl, fragment, "fragment");
  87 + var vertexShader = createShader(gl, vertex, "vertex");
  88 +
  89 + // link them together into a new program
  90 + shaderProgram = gl.createProgram();
  91 + gl.attachShader(shaderProgram, vertexShader);
  92 + gl.attachShader(shaderProgram, fragmentShader);
  93 + gl.linkProgram(shaderProgram);
  94 +
  95 + // get pointers to the shader params
  96 + shaderVertexPositionAttribute = gl.getAttribLocation(
  97 + shaderProgram, "vertexPos");
  98 + gl.enableVertexAttribArray(shaderVertexPositionAttribute);
  99 +
  100 + shaderProjectionMatrixUniform = gl.getUniformLocation(
  101 + shaderProgram, "projectionMatrix");
  102 + shaderModelViewMatrixUniform = gl.getUniformLocation(
  103 + shaderProgram, "modelViewMatrix");
  104 +
  105 + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  106 + alert("Could not initialise shaders");
  107 + }
  108 +}
  109 +
  110 +function draw(gl, obj) {
  111 + // clear the background (with black)
  112 + gl.clearColor(0.0, 0.0, 0.0, 1.0);
  113 + gl.clear(gl.COLOR_BUFFER_BIT);
  114 +
  115 + // set the vertex buffer to be drawn
  116 + gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);
  117 +
  118 + // set the shader to use
  119 + gl.useProgram(shaderProgram);
  120 +
  121 + // connect up the shader parameters: vertex position and
  122 + // projection/model matrices
  123 + gl.vertexAttribPointer(
  124 + shaderVertexPositionAttribute,
  125 + obj.vertSize,
  126 + gl.FLOAT, false, 0, 0);
  127 + gl.uniformMatrix4fv(
  128 + shaderProjectionMatrixUniform,
  129 + false, projectionMatrix);
  130 + gl.uniformMatrix4fv(
  131 + shaderModelViewMatrixUniform, false, modelViewMatrix);
  132 +
  133 + // draw the object
  134 + gl.drawArrays(obj.primtype, 0, obj.nVerts);
  135 +}
  136 +
  137 +function startGl() {
  138 + // Get A WebGL context
  139 + var canvas = document.getElementById("square");
  140 + var gl = initWebGL(canvas);
  141 + var obj = createSquare(gl);
  142 +
  143 + initViewport(gl, canvas);
  144 + initMatrices(canvas);
  145 + initShader(
  146 + gl,
  147 + "square-vertex-shader",
  148 + "square-fragment-shader");
  149 + draw(gl, obj);
  150 +}
  151 +// vim: set ts=4 sw=4:
1 <html> 1 <html>
2 <head> 2 <head>
3 <title>My first animated and textured WebGL content.</title> 3 <title>My first animated and textured WebGL content.</title>
4 -  
5 - <script src="./gl-matrix-min.js" type="text/javascript"></script>  
6 -  
7 - <script type="text/javascript">  
8 - var projectionMatrix, modelViewMatrix;  
9 - var rotationAxis;  
10 - var shaderProgram, shaderVertexPositionAttribute  
11 - var shaderTexCoordAttribute, shaderSamplerUniform;  
12 - var shaderProjectionMatrixUniform, shaderModelViewMatrixUniform;  
13 -  
14 - var duration = 5000; // ms  
15 - var currentTime = Date.now();  
16 -  
17 - var okToRun = false;  
18 - var webGLTexture;  
19 -  
20 - function handleTextureLoaded(gl, texture) {  
21 - gl.bindTexture(gl.TEXTURE_2D, texture);  
22 - gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);  
23 - gl.texImage2D(  
24 - gl.TEXTURE_2D,  
25 - 0,  
26 - gl.RGBA,  
27 - gl.RGBA,  
28 - gl.UNSIGNED_BYTE,  
29 - texture.image);  
30 - gl.texParameteri(  
31 - gl.TEXTURE_2D,  
32 - gl.TEXTURE_MAG_FILTER,  
33 - gl.NEAREST);  
34 - gl.texParameteri(  
35 - gl.TEXTURE_2D,  
36 - gl.TEXTURE_MIN_FILTER,  
37 - gl.NEAREST);  
38 - gl.bindTexture(gl.TEXTURE_2D, null);  
39 - okToRun = true;  
40 - }  
41 -  
42 - function initTexture(gl) {  
43 - webGLTexture = gl.createTexture();  
44 - webGLTexture.image = new Image();  
45 - webGLTexture.image.onload = function () {  
46 - handleTextureLoaded(gl, webGLTexture)  
47 - }  
48 - //webGLTexture.image.src = "P3D/images/webgl-logo-256.jpg";  
49 - webGLTexture.image.src = "gravatar-256.jpg";  
50 - }  
51 -  
52 - function initWebGL(canvas) {  
53 - var gl = null;  
54 - var msg = "Your browser does not support WebGL, " +  
55 - "or it is not enabled by default.";  
56 - try {  
57 - gl = canvas.getContext("experimental-webgl");  
58 - }  
59 - catch (e) {  
60 - msg = "Error creating WebGL Context!: " + e.toString();  
61 - }  
62 - if (!gl) {  
63 - alert(msg);  
64 - throw new Error(msg);  
65 - }  
66 -  
67 - return gl;  
68 - }  
69 -  
70 - function initViewport(gl, canvas) {  
71 - gl.viewport(0, 0, canvas.width, canvas.height);  
72 - }  
73 -  
74 - // Create the vertex, color, and index data for a  
75 - // multicolored cube  
76 - function createCube(gl) {  
77 - // Vertex Data  
78 - var vertexBuffer;  
79 - vertexBuffer = gl.createBuffer();  
80 - gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);  
81 - var verts = [  
82 - // Front face  
83 - -1.0, -1.0, 1.0,  
84 - 1.0, -1.0, 1.0,  
85 - 1.0, 1.0, 1.0,  
86 - -1.0, 1.0, 1.0,  
87 - // Back face  
88 - -1.0, -1.0, -1.0,  
89 - -1.0, 1.0, -1.0,  
90 - 1.0, 1.0, -1.0,  
91 - 1.0, -1.0, -1.0,  
92 - // Top face  
93 - -1.0, 1.0, -1.0,  
94 - -1.0, 1.0, 1.0,  
95 - 1.0, 1.0, 1.0,  
96 - 1.0, 1.0, -1.0,  
97 - // Bottom face  
98 - -1.0, -1.0, -1.0,  
99 - 1.0, -1.0, -1.0,  
100 - 1.0, -1.0, 1.0,  
101 - -1.0, -1.0, 1.0,  
102 - // Right face  
103 - 1.0, -1.0, -1.0,  
104 - 1.0, 1.0, -1.0,  
105 - 1.0, 1.0, 1.0,  
106 - 1.0, -1.0, 1.0,  
107 - // Left face  
108 - -1.0, -1.0, -1.0,  
109 - -1.0, -1.0, 1.0,  
110 - -1.0, 1.0, 1.0,  
111 - -1.0, 1.0, -1.0  
112 - ];  
113 - gl.bufferData(  
114 - gl.ARRAY_BUFFER,  
115 - new Float32Array(verts),  
116 - gl.STATIC_DRAW);  
117 -  
118 - var texCoordBuffer = gl.createBuffer();  
119 - gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);  
120 - var textureCoords = [  
121 - // Front face  
122 - 0.0, 0.0,  
123 - 1.0, 0.0,  
124 - 1.0, 1.0,  
125 - 0.0, 1.0,  
126 -  
127 - // Back face  
128 - 1.0, 0.0,  
129 - 1.0, 1.0,  
130 - 0.0, 1.0,  
131 - 0.0, 0.0,  
132 -  
133 - // Top face  
134 - 0.0, 1.0,  
135 - 0.0, 0.0,  
136 - 1.0, 0.0,  
137 - 1.0, 1.0,  
138 -  
139 - // Bottom face  
140 - 1.0, 1.0,  
141 - 0.0, 1.0,  
142 - 0.0, 0.0,  
143 - 1.0, 0.0,  
144 -  
145 - // Right face  
146 - 1.0, 0.0,  
147 - 1.0, 1.0,  
148 - 0.0, 1.0,  
149 - 0.0, 0.0,  
150 -  
151 - // Left face  
152 - 0.0, 0.0,  
153 - 1.0, 0.0,  
154 - 1.0, 1.0,  
155 - 0.0, 1.0,  
156 - ];  
157 - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);  
158 -  
159 - // Index data (defines the triangles to be drawn)  
160 - var cubeIndexBuffer = gl.createBuffer();  
161 - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer);  
162 - var cubeIndices = [  
163 - 0, 1, 2, 0, 2, 3, // Front face  
164 - 4, 5, 6, 4, 6, 7, // Back face  
165 - 8, 9, 10, 8, 10, 11, // Top face  
166 - 12, 13, 14, 12, 14, 15, // Bottom face  
167 - 16, 17, 18, 16, 18, 19, // Right face  
168 - 20, 21, 22, 20, 22, 23 // Left face  
169 - ];  
170 - gl.bufferData(  
171 - gl.ELEMENT_ARRAY_BUFFER,  
172 - new Uint16Array(cubeIndices),  
173 - gl.STATIC_DRAW);  
174 - var cube = {  
175 - buffer:vertexBuffer,  
176 - texCoordBuffer:texCoordBuffer,  
177 - indices:cubeIndexBuffer,  
178 - vertSize:3,  
179 - nVerts:24,  
180 - texCoordSize:2,  
181 - nTexCoords: 24,  
182 - nIndices:36,  
183 - primtype:gl.TRIANGLES};  
184 -  
185 - return cube;  
186 - }  
187 -  
188 - function initMatrices(canvas) {  
189 - modelViewMatrix = mat4.create();  
190 - mat4.translate(  
191 - modelViewMatrix, modelViewMatrix, [0, 0, -4.6]);  
192 -  
193 - // Create a project matrix with 45 degree field of view  
194 - projectionMatrix = mat4.create();  
195 - mat4.perspective(projectionMatrix, Math.PI / 4,  
196 - canvas.width / canvas.height, 1, 10000);  
197 -  
198 - rotationAxis = vec3.create();  
199 - vec3.normalize(rotationAxis, [1, 1, 1]);  
200 - }  
201 -  
202 - function createShader(gl, id, type) {  
203 - var shader;  
204 - var str = document.getElementById(id).text;  
205 - if (type == "fragment") {  
206 - shader = gl.createShader(gl.FRAGMENT_SHADER);  
207 - } else if (type == "vertex") {  
208 - shader = gl.createShader(gl.VERTEX_SHADER);  
209 - } else {  
210 - return null;  
211 - }  
212 -  
213 - gl.shaderSource(shader, str);  
214 - gl.compileShader(shader);  
215 -  
216 - if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {  
217 - alert(gl.getShaderInfoLog(shader));  
218 - return null;  
219 - }  
220 -  
221 - return shader;  
222 - }  
223 -  
224 - function initShader(gl, vertex, fragment) {  
225 - // load and compile the fragment and vertex shader  
226 - var fragmentShader = createShader(gl, fragment, "fragment");  
227 - var vertexShader = createShader(gl, vertex, "vertex");  
228 -  
229 - // link them together into a new program  
230 - shaderProgram = gl.createProgram();  
231 - gl.attachShader(shaderProgram, vertexShader);  
232 - gl.attachShader(shaderProgram, fragmentShader);  
233 - gl.linkProgram(shaderProgram);  
234 -  
235 - // get pointers to the shader params  
236 - shaderVertexPositionAttribute = gl.getAttribLocation(  
237 - shaderProgram, "vertexPos");  
238 - gl.enableVertexAttribArray(shaderVertexPositionAttribute);  
239 - shaderTexCoordAttribute = gl.getAttribLocation(  
240 - shaderProgram, "texCoord");  
241 - gl.enableVertexAttribArray(shaderTexCoordAttribute);  
242 -  
243 - shaderProjectionMatrixUniform = gl.getUniformLocation(  
244 - shaderProgram, "projectionMatrix");  
245 - shaderModelViewMatrixUniform = gl.getUniformLocation(  
246 - shaderProgram, "modelViewMatrix");  
247 - shaderSamplerUniform = gl.getUniformLocation(  
248 - shaderProgram, "uSampler");  
249 -  
250 - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {  
251 - alert("Could not initialise shaders");  
252 - }  
253 - }  
254 -  
255 - function draw(gl, obj) {  
256 - // clear the background (transparent)  
257 - gl.clearColor(0.0, 0.0, 0.0, 0.0);  
258 - // // clear the background (black)  
259 - // gl.clearColor(0.0, 0.0, 0.0, 1.0);  
260 - gl.enable(gl.DEPTH_TEST);  
261 - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);  
262 -  
263 - // set the shader to use  
264 - gl.useProgram(shaderProgram);  
265 -  
266 - // connect up the shader parameters: vertex position,  
267 - // color, and projection/model matrices  
268 - // set up the buffers  
269 - gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);  
270 - gl.vertexAttribPointer(  
271 - shaderVertexPositionAttribute,  
272 - obj.vertSize,  
273 - gl.FLOAT,  
274 - false, 0, 0);  
275 - gl.bindBuffer(gl.ARRAY_BUFFER, obj.texCoordBuffer);  
276 - gl.vertexAttribPointer(  
277 - shaderTexCoordAttribute,  
278 - obj.texCoordSize,  
279 - gl.FLOAT,  
280 - false, 0, 0);  
281 - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices);  
282 - gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false,  
283 - projectionMatrix);  
284 - gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false,  
285 - modelViewMatrix);  
286 -  
287 - gl.activeTexture(gl.TEXTURE0);  
288 - gl.bindTexture(gl.TEXTURE_2D, webGLTexture);  
289 - gl.uniform1i(shaderSamplerUniform, 0);  
290 -  
291 - // draw the object  
292 - gl.drawElements(  
293 - obj.primtype, obj.nIndices, gl.UNSIGNED_SHORT, 0);  
294 - }  
295 -  
296 - function animate() {  
297 - var now = Date.now();  
298 - var deltat = now - currentTime;  
299 - currentTime = now;  
300 - var fract = deltat / duration;  
301 - var angle = Math.PI * 2 * fract;  
302 - mat4.rotate(  
303 - modelViewMatrix,  
304 - modelViewMatrix,  
305 - angle,  
306 - rotationAxis);  
307 - }  
308 -  
309 - function run(gl, cube) {  
310 - requestAnimationFrame(function() { run(gl, cube); });  
311 - if (okToRun) {  
312 - draw(gl, cube);  
313 - animate();  
314 - }  
315 - }  
316 -  
317 - function startGl() {  
318 - // Get A WebGL context  
319 - var canvas = document.getElementById("cube");  
320 - var gl = initWebGL(canvas);  
321 - var obj = createCube(gl);  
322 -  
323 - initViewport(gl, canvas);  
324 - initMatrices(canvas);  
325 - initShader(  
326 - gl,  
327 - "texture-vertex-shader",  
328 - "texture-fragment-shader");  
329 - initTexture(gl);  
330 - run(gl, obj);  
331 - }  
332 - </script> 4 + <link rel="stylesheet" href="main.css">
  5 + <script src="gl-matrix-min.js" type="text/javascript"></script>
  6 + <script src="texture.js" type="text/javascript"></script>
333 7
334 <script id="texture-vertex-shader" type="x-shader/x-vertex"> 8 <script id="texture-vertex-shader" type="x-shader/x-vertex">
335 attribute vec3 vertexPos; 9 attribute vec3 vertexPos;
@@ -355,60 +29,19 @@ @@ -355,60 +29,19 @@
355 } 29 }
356 </script> 30 </script>
357 <style> 31 <style>
358 - * {  
359 - font-family: Verdana, sans-serif;  
360 - }  
361 - .gl {  
362 - position: absolute; 32 + .texture {
363 top: 130px; 33 top: 130px;
364 - left: 50%;  
365 - transform: translate(-50%, 0);  
366 - width: 200px;  
367 - height: 200px;  
368 - z-index: 2;  
369 - }  
370 - .content {  
371 - position: fixed;  
372 - top: 50%;  
373 - left: 50%;  
374 - /* bring your own prefixes */  
375 - transform: translate(-50%, -50%);  
376 - width: 800px;  
377 - background: white;  
378 - padding: 10px;  
379 - border-style: solid;  
380 - border-color: rgb(100, 190, 12);  
381 - border-radius: 30px;  
382 - border-width: 3px;  
383 - z-index: 1;  
384 - }  
385 - #background {  
386 - position: absolute;  
387 - left: 0px;  
388 - top: 0px;  
389 - width: 1920px;  
390 - height: 1200px;  
391 - background-image: url(./background1.jpg);  
392 - padding: 0px;  
393 - margin: 0px;  
394 - z-index: -1;  
395 - }  
396 - h1,h2,h3,h4,h5,h6 {  
397 - font-weight: normal;  
398 - }  
399 - h1,h4 {  
400 - text-decoration: underline;  
401 - }  
402 - h1 {  
403 - font-size: x-large;  
404 } 34 }
405 </style> 35 </style>
406 </head> 36 </head>
407 37
408 <body onLoad="startGl()"> 38 <body onLoad="startGl()">
409 <div id="background"></div> 39 <div id="background"></div>
410 - <div class="content">  
411 - <div class="gl"> 40 + <div id="back" class="text">
  41 + <a href="index.html">back</a>
  42 + </div>
  43 + <div class="content text">
  44 + <div class="gl texture">
412 <canvas id="cube" width="200", height="200"></canvas> 45 <canvas id="cube" width="200", height="200"></canvas>
413 </div> 46 </div>
414 <h1>My first animated and textured WebGL content.</h1> 47 <h1>My first animated and textured WebGL content.</h1>
  1 +var projectionMatrix, modelViewMatrix;
  2 +var rotationAxis;
  3 +var shaderProgram, shaderVertexPositionAttribute
  4 +var shaderTexCoordAttribute, shaderSamplerUniform;
  5 +var shaderProjectionMatrixUniform, shaderModelViewMatrixUniform;
  6 +
  7 +var duration = 5000; // ms
  8 +var currentTime = Date.now();
  9 +
  10 +var okToRun = false;
  11 +var webGLTexture;
  12 +
  13 +function handleTextureLoaded(gl, texture) {
  14 + gl.bindTexture(gl.TEXTURE_2D, texture);
  15 + gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  16 + gl.texImage2D(
  17 + gl.TEXTURE_2D,
  18 + 0,
  19 + gl.RGBA,
  20 + gl.RGBA,
  21 + gl.UNSIGNED_BYTE,
  22 + texture.image);
  23 + gl.texParameteri(
  24 + gl.TEXTURE_2D,
  25 + gl.TEXTURE_MAG_FILTER,
  26 + gl.NEAREST);
  27 + gl.texParameteri(
  28 + gl.TEXTURE_2D,
  29 + gl.TEXTURE_MIN_FILTER,
  30 + gl.NEAREST);
  31 + gl.bindTexture(gl.TEXTURE_2D, null);
  32 + okToRun = true;
  33 +}
  34 +
  35 +function initTexture(gl) {
  36 + webGLTexture = gl.createTexture();
  37 + webGLTexture.image = new Image();
  38 + webGLTexture.image.onload = function () {
  39 + handleTextureLoaded(gl, webGLTexture)
  40 + }
  41 + //webGLTexture.image.src = "P3D/images/webgl-logo-256.jpg";
  42 + webGLTexture.image.src = "gravatar-256.jpg";
  43 +}
  44 +
  45 +function initWebGL(canvas) {
  46 + var gl = null;
  47 + var msg = "Your browser does not support WebGL, " +
  48 + "or it is not enabled by default.";
  49 + try {
  50 + gl = canvas.getContext("experimental-webgl");
  51 + }
  52 + catch (e) {
  53 + msg = "Error creating WebGL Context!: " + e.toString();
  54 + }
  55 + if (!gl) {
  56 + alert(msg);
  57 + throw new Error(msg);
  58 + }
  59 +
  60 + return gl;
  61 +}
  62 +
  63 +function initViewport(gl, canvas) {
  64 + gl.viewport(0, 0, canvas.width, canvas.height);
  65 +}
  66 +
  67 +// Create the vertex, color, and index data for a
  68 +// multicolored cube
  69 +function createCube(gl) {
  70 + // Vertex Data
  71 + var vertexBuffer;
  72 + vertexBuffer = gl.createBuffer();
  73 + gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  74 + var verts = [
  75 + // Front face
  76 + -1.0, -1.0, 1.0,
  77 + 1.0, -1.0, 1.0,
  78 + 1.0, 1.0, 1.0,
  79 + -1.0, 1.0, 1.0,
  80 + // Back face
  81 + -1.0, -1.0, -1.0,
  82 + -1.0, 1.0, -1.0,
  83 + 1.0, 1.0, -1.0,
  84 + 1.0, -1.0, -1.0,
  85 + // Top face
  86 + -1.0, 1.0, -1.0,
  87 + -1.0, 1.0, 1.0,
  88 + 1.0, 1.0, 1.0,
  89 + 1.0, 1.0, -1.0,
  90 + // Bottom face
  91 + -1.0, -1.0, -1.0,
  92 + 1.0, -1.0, -1.0,
  93 + 1.0, -1.0, 1.0,
  94 + -1.0, -1.0, 1.0,
  95 + // Right face
  96 + 1.0, -1.0, -1.0,
  97 + 1.0, 1.0, -1.0,
  98 + 1.0, 1.0, 1.0,
  99 + 1.0, -1.0, 1.0,
  100 + // Left face
  101 + -1.0, -1.0, -1.0,
  102 + -1.0, -1.0, 1.0,
  103 + -1.0, 1.0, 1.0,
  104 + -1.0, 1.0, -1.0
  105 + ];
  106 + gl.bufferData(
  107 + gl.ARRAY_BUFFER,
  108 + new Float32Array(verts),
  109 + gl.STATIC_DRAW);
  110 +
  111 + var texCoordBuffer = gl.createBuffer();
  112 + gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
  113 + var textureCoords = [
  114 + // Front face
  115 + 0.0, 0.0,
  116 + 1.0, 0.0,
  117 + 1.0, 1.0,
  118 + 0.0, 1.0,
  119 +
  120 + // Back face
  121 + 1.0, 0.0,
  122 + 1.0, 1.0,
  123 + 0.0, 1.0,
  124 + 0.0, 0.0,
  125 +
  126 + // Top face
  127 + 0.0, 1.0,
  128 + 0.0, 0.0,
  129 + 1.0, 0.0,
  130 + 1.0, 1.0,
  131 +
  132 + // Bottom face
  133 + 1.0, 1.0,
  134 + 0.0, 1.0,
  135 + 0.0, 0.0,
  136 + 1.0, 0.0,
  137 +
  138 + // Right face
  139 + 1.0, 0.0,
  140 + 1.0, 1.0,
  141 + 0.0, 1.0,
  142 + 0.0, 0.0,
  143 +
  144 + // Left face
  145 + 0.0, 0.0,
  146 + 1.0, 0.0,
  147 + 1.0, 1.0,
  148 + 0.0, 1.0,
  149 + ];
  150 + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
  151 +
  152 + // Index data (defines the triangles to be drawn)
  153 + var cubeIndexBuffer = gl.createBuffer();
  154 + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer);
  155 + var cubeIndices = [
  156 + 0, 1, 2, 0, 2, 3, // Front face
  157 + 4, 5, 6, 4, 6, 7, // Back face
  158 + 8, 9, 10, 8, 10, 11, // Top face
  159 + 12, 13, 14, 12, 14, 15, // Bottom face
  160 + 16, 17, 18, 16, 18, 19, // Right face
  161 + 20, 21, 22, 20, 22, 23 // Left face
  162 + ];
  163 + gl.bufferData(
  164 + gl.ELEMENT_ARRAY_BUFFER,
  165 + new Uint16Array(cubeIndices),
  166 + gl.STATIC_DRAW);
  167 + var cube = {
  168 + buffer:vertexBuffer,
  169 + texCoordBuffer:texCoordBuffer,
  170 + indices:cubeIndexBuffer,
  171 + vertSize:3,
  172 + nVerts:24,
  173 + texCoordSize:2,
  174 + nTexCoords: 24,
  175 + nIndices:36,
  176 + primtype:gl.TRIANGLES};
  177 +
  178 + return cube;
  179 +}
  180 +
  181 +function initMatrices(canvas) {
  182 + modelViewMatrix = mat4.create();
  183 + mat4.translate(
  184 + modelViewMatrix, modelViewMatrix, [0, 0, -4.6]);
  185 +
  186 + // Create a project matrix with 45 degree field of view
  187 + projectionMatrix = mat4.create();
  188 + mat4.perspective(projectionMatrix, Math.PI / 4,
  189 + canvas.width / canvas.height, 1, 10000);
  190 +
  191 + rotationAxis = vec3.create();
  192 + vec3.normalize(rotationAxis, [1, 1, 1]);
  193 +}
  194 +
  195 +function createShader(gl, id, type) {
  196 + var shader;
  197 + var str = document.getElementById(id).text;
  198 + if (type == "fragment") {
  199 + shader = gl.createShader(gl.FRAGMENT_SHADER);
  200 + } else if (type == "vertex") {
  201 + shader = gl.createShader(gl.VERTEX_SHADER);
  202 + } else {
  203 + return null;
  204 + }
  205 +
  206 + gl.shaderSource(shader, str);
  207 + gl.compileShader(shader);
  208 +
  209 + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  210 + alert(gl.getShaderInfoLog(shader));
  211 + return null;
  212 + }
  213 +
  214 + return shader;
  215 +}
  216 +
  217 +function initShader(gl, vertex, fragment) {
  218 + // load and compile the fragment and vertex shader
  219 + var fragmentShader = createShader(gl, fragment, "fragment");
  220 + var vertexShader = createShader(gl, vertex, "vertex");
  221 +
  222 + // link them together into a new program
  223 + shaderProgram = gl.createProgram();
  224 + gl.attachShader(shaderProgram, vertexShader);
  225 + gl.attachShader(shaderProgram, fragmentShader);
  226 + gl.linkProgram(shaderProgram);
  227 +
  228 + // get pointers to the shader params
  229 + shaderVertexPositionAttribute = gl.getAttribLocation(
  230 + shaderProgram, "vertexPos");
  231 + gl.enableVertexAttribArray(shaderVertexPositionAttribute);
  232 + shaderTexCoordAttribute = gl.getAttribLocation(
  233 + shaderProgram, "texCoord");
  234 + gl.enableVertexAttribArray(shaderTexCoordAttribute);
  235 +
  236 + shaderProjectionMatrixUniform = gl.getUniformLocation(
  237 + shaderProgram, "projectionMatrix");
  238 + shaderModelViewMatrixUniform = gl.getUniformLocation(
  239 + shaderProgram, "modelViewMatrix");
  240 + shaderSamplerUniform = gl.getUniformLocation(
  241 + shaderProgram, "uSampler");
  242 +
  243 + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  244 + alert("Could not initialise shaders");
  245 + }
  246 +}
  247 +
  248 +function draw(gl, obj) {
  249 + // clear the background (transparent)
  250 + gl.clearColor(0.0, 0.0, 0.0, 0.0);
  251 + // // clear the background (black)
  252 + // gl.clearColor(0.0, 0.0, 0.0, 1.0);
  253 + gl.enable(gl.DEPTH_TEST);
  254 + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  255 +
  256 + // set the shader to use
  257 + gl.useProgram(shaderProgram);
  258 +
  259 + // connect up the shader parameters: vertex position,
  260 + // color, and projection/model matrices
  261 + // set up the buffers
  262 + gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);
  263 + gl.vertexAttribPointer(
  264 + shaderVertexPositionAttribute,
  265 + obj.vertSize,
  266 + gl.FLOAT,
  267 + false, 0, 0);
  268 + gl.bindBuffer(gl.ARRAY_BUFFER, obj.texCoordBuffer);
  269 + gl.vertexAttribPointer(
  270 + shaderTexCoordAttribute,
  271 + obj.texCoordSize,
  272 + gl.FLOAT,
  273 + false, 0, 0);
  274 + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices);
  275 + gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false,
  276 + projectionMatrix);
  277 + gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false,
  278 + modelViewMatrix);
  279 +
  280 + gl.activeTexture(gl.TEXTURE0);
  281 + gl.bindTexture(gl.TEXTURE_2D, webGLTexture);
  282 + gl.uniform1i(shaderSamplerUniform, 0);
  283 +
  284 + // draw the object
  285 + gl.drawElements(
  286 + obj.primtype, obj.nIndices, gl.UNSIGNED_SHORT, 0);
  287 +}
  288 +
  289 +function animate() {
  290 + var now = Date.now();
  291 + var deltat = now - currentTime;
  292 + currentTime = now;
  293 + var fract = deltat / duration;
  294 + var angle = Math.PI * 2 * fract;
  295 + mat4.rotate(
  296 + modelViewMatrix,
  297 + modelViewMatrix,
  298 + angle,
  299 + rotationAxis);
  300 +}
  301 +
  302 +function run(gl, cube) {
  303 + requestAnimationFrame(function() { run(gl, cube); });
  304 + if (okToRun) {
  305 + draw(gl, cube);
  306 + animate();
  307 + }
  308 +}
  309 +
  310 +function startGl() {
  311 + // Get A WebGL context
  312 + var canvas = document.getElementById("cube");
  313 + var gl = initWebGL(canvas);
  314 + var obj = createCube(gl);
  315 +
  316 + initViewport(gl, canvas);
  317 + initMatrices(canvas);
  318 + initShader(
  319 + gl,
  320 + "texture-vertex-shader",
  321 + "texture-fragment-shader");
  322 + initTexture(gl);
  323 + run(gl, obj);
  324 +}
  325 +/* vim: set ts=4 sw=4: */
Please register or login to post a comment