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 1 <html>
2 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 8 <script id="cube-vertex-shader" type="x-shader/x-vertex">
262 9 attribute vec3 vertexPos;
... ... @@ -281,10 +28,30 @@
281 28 gl_FragColor = vColor;
282 29 }
283 30 </script>
  31 +
  32 + <style>
  33 + .result_container {
  34 + height: 200px;
  35 + }
  36 + </style>
284 37 </head>
285 38
286 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 55 </body>
289 56 </html>
290 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 1 <html>
2 2 <head>
3 3 <title> Oh my Gosh </title>
  4 + <link rel="stylesheet" href="main.css">
4 5 </head>
5 6
6 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 26 </body>
16 27 </html>
17 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 1 <html>
2 2 <head>
3 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 8 <script id="square-vertex-shader" type="x-shader/x-vertex">
161 9 attribute vec3 vertexPos;
... ... @@ -174,10 +22,31 @@
174 22 gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
175 23 }
176 24 </script>
  25 +
  26 + <style>
  27 + .result_container {
  28 + height: 200px;
  29 + }
  30 + </style>
177 31 </head>
178 32
179 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 50 </body>
182 51 </html>
183 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 1 <html>
2 2 <head>
3 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 8 <script id="texture-vertex-shader" type="x-shader/x-vertex">
335 9 attribute vec3 vertexPos;
... ... @@ -355,60 +29,19 @@
355 29 }
356 30 </script>
357 31 <style>
358   - * {
359   - font-family: Verdana, sans-serif;
360   - }
361   - .gl {
362   - position: absolute;
  32 + .texture {
363 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 35 </style>
406 36 </head>
407 37
408 38 <body onLoad="startGl()">
409 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 45 <canvas id="cube" width="200", height="200"></canvas>
413 46 </div>
414 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