Skip to content

Commit ff61f76

Browse files
author
Schalk Neethling
committed
Merge remote-tracking branch 'we/main' into import-webgl-examples
2 parents ac4d9be + 0dba3b3 commit ff61f76

File tree

9 files changed

+173
-174
lines changed

9 files changed

+173
-174
lines changed

‎webgl-examples/tutorial/sample2/index.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>WebGL Demo</title>
6+
<link rel="stylesheet" href="./webgl.css" type="text/css" />
7+
<script
8+
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
9+
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
10+
crossorigin="anonymous"
11+
defer
12+
></script>
13+
<script src="webgl-demo.js" defer></script>
14+
</head>
315

4-
<head>
5-
<meta charset="utf-8">
6-
<title>WebGL Demo</title>
7-
<link rel="stylesheet" href="./webgl.css" type="text/css">
8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
9-
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
10-
crossorigin="anonymous" defer>
11-
</script>
12-
<script src="webgl-demo.js" defer></script>
13-
</head>
14-
15-
<body>
16-
<canvas id="glcanvas" width="640" height="480"></canvas>
17-
</body>
18-
16+
<body>
17+
<canvas id="glcanvas" width="640" height="480"></canvas>
18+
</body>
1919
</html>

‎webgl-examples/tutorial/sample2/webgl-demo.js

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ main();
44
// Start here
55
//
66
function main() {
7-
const canvas = document.querySelector('#glcanvas');
8-
const gl = canvas.getContext('webgl');
7+
const canvas = document.querySelector("#glcanvas");
8+
const gl = canvas.getContext("webgl");
99

1010
// If we don't have a GL context, give up now
1111

1212
if (!gl) {
13-
alert('Unable to initialize WebGL. Your browser or machine may not support it.');
13+
alert(
14+
"Unable to initialize WebGL. Your browser or machine may not support it."
15+
);
1416
return;
1517
}
1618

@@ -45,11 +47,14 @@ function main() {
4547
const programInfo = {
4648
program: shaderProgram,
4749
attribLocations: {
48-
vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
50+
vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
4951
},
5052
uniformLocations: {
51-
projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
52-
modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
53+
projectionMatrix: gl.getUniformLocation(
54+
shaderProgram,
55+
"uProjectionMatrix"
56+
),
57+
modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"),
5358
},
5459
};
5560

@@ -68,7 +73,6 @@ function main() {
6873
// have one object -- a simple two-dimensional square.
6974
//
7075
function initBuffers(gl) {
71-
7276
// Create a buffer for the square's positions.
7377

7478
const positionBuffer = gl.createBuffer();
@@ -80,30 +84,23 @@ function initBuffers(gl) {
8084

8185
// Now create an array of positions for the square.
8286

83-
const positions = [
84-
1.0, 1.0,
85-
-1.0, 1.0,
86-
1.0, -1.0,
87-
-1.0, -1.0,
88-
];
87+
const positions = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0];
8988

9089
// Now pass the list of positions into WebGL to build the
9190
// shape. We do this by creating a Float32Array from the
9291
// JavaScript array, then use it to fill the current buffer.
9392

94-
gl.bufferData(gl.ARRAY_BUFFER,
95-
new Float32Array(positions),
96-
gl.STATIC_DRAW);
93+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
9794
}
9895

9996
//
10097
// Draw the scene.
10198
//
10299
function drawScene(gl, programInfo) {
103-
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
104-
gl.clearDepth(1.0); // Clear everything
105-
gl.enable(gl.DEPTH_TEST); // Enable depth testing
106-
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
100+
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
101+
gl.clearDepth(1.0); // Clear everything
102+
gl.enable(gl.DEPTH_TEST); // Enable depth testing
103+
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
107104

108105
// Clear the canvas before we start drawing on it.
109106

@@ -116,19 +113,15 @@ function drawScene(gl, programInfo) {
116113
// and we only want to see objects between 0.1 units
117114
// and 100 units away from the camera.
118115

119-
const fieldOfView = 45 * Math.PI / 180; // in radians
116+
const fieldOfView = (45 * Math.PI) / 180; // in radians
120117
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
121118
const zNear = 0.1;
122119
const zFar = 100.0;
123120
const projectionMatrix = mat4.create();
124121

125122
// note: glmatrix.js always has the first argument
126123
// as the destination to receive the result.
127-
mat4.perspective(projectionMatrix,
128-
fieldOfView,
129-
aspect,
130-
zNear,
131-
zFar);
124+
mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
132125

133126
// Set the drawing position to the "identity" point, which is
134127
// the center of the scene.
@@ -137,9 +130,11 @@ function drawScene(gl, programInfo) {
137130
// Now move the drawing position a bit to where we want to
138131
// start drawing the square.
139132

140-
mat4.translate(modelViewMatrix, // destination matrix
141-
modelViewMatrix, // matrix to translate
142-
[-0.0, 0.0, -6.0]); // amount to translate
133+
mat4.translate(
134+
modelViewMatrix, // destination matrix
135+
modelViewMatrix, // matrix to translate
136+
[-0.0, 0.0, -6.0]
137+
); // amount to translate
143138

144139
// Tell WebGL how to pull out the positions from the position
145140
// buffer into the vertexPosition attribute.
@@ -150,14 +145,14 @@ function drawScene(gl, programInfo) {
150145
const stride = 0;
151146
const offset = 0;
152147
gl.vertexAttribPointer(
153-
programInfo.attribLocations.vertexPosition,
154-
numComponents,
155-
type,
156-
normalize,
157-
stride,
158-
offset);
159-
gl.enableVertexAttribArray(
160-
programInfo.attribLocations.vertexPosition);
148+
programInfo.attribLocations.vertexPosition,
149+
numComponents,
150+
type,
151+
normalize,
152+
stride,
153+
offset
154+
);
155+
gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
161156
}
162157

163158
// Tell WebGL to use our program when drawing
@@ -167,13 +162,15 @@ function drawScene(gl, programInfo) {
167162
// Set the shader uniforms
168163

169164
gl.uniformMatrix4fv(
170-
programInfo.uniformLocations.projectionMatrix,
171-
false,
172-
projectionMatrix);
165+
programInfo.uniformLocations.projectionMatrix,
166+
false,
167+
projectionMatrix
168+
);
173169
gl.uniformMatrix4fv(
174-
programInfo.uniformLocations.modelViewMatrix,
175-
false,
176-
modelViewMatrix);
170+
programInfo.uniformLocations.modelViewMatrix,
171+
false,
172+
modelViewMatrix
173+
);
177174

178175
{
179176
const offset = 0;
@@ -199,7 +196,10 @@ function initShaderProgram(gl, vsSource, fsSource) {
199196
// If creating the shader program failed, alert
200197

201198
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
202-
alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
199+
alert(
200+
"Unable to initialize the shader program: " +
201+
gl.getProgramInfoLog(shaderProgram)
202+
);
203203
return null;
204204
}
205205

@@ -224,11 +224,12 @@ function loadShader(gl, type, source) {
224224
// See if it compiled successfully
225225

226226
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
227-
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
227+
alert(
228+
"An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader)
229+
);
228230
gl.deleteShader(shader);
229231
return null;
230232
}
231233

232234
return shader;
233235
}
234-

‎webgl-examples/tutorial/sample3/index.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>WebGL Demo</title>
6+
<link rel="stylesheet" href="./webgl.css" type="text/css" />
7+
<script
8+
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
9+
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
10+
crossorigin="anonymous"
11+
defer
12+
></script>
13+
<script src="webgl-demo.js" defer></script>
14+
</head>
315

4-
<head>
5-
<meta charset="utf-8">
6-
<title>WebGL Demo</title>
7-
<link rel="stylesheet" href="./webgl.css" type="text/css">
8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
9-
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
10-
crossorigin="anonymous" defer>
11-
</script>
12-
<script src="webgl-demo.js" defer></script>
13-
</head>
14-
15-
<body>
16-
<canvas id="glcanvas" width="640" height="480"></canvas>
17-
</body>
18-
16+
<body>
17+
<canvas id="glcanvas" width="640" height="480"></canvas>
18+
</body>
1919
</html>

‎webgl-examples/tutorial/sample4/index.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>WebGL Demo</title>
6+
<link rel="stylesheet" href="./webgl.css" type="text/css" />
7+
<script
8+
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
9+
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
10+
crossorigin="anonymous"
11+
defer
12+
></script>
13+
<script src="webgl-demo.js" defer></script>
14+
</head>
315

4-
<head>
5-
<meta charset="utf-8">
6-
<title>WebGL Demo</title>
7-
<link rel="stylesheet" href="./webgl.css" type="text/css">
8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
9-
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
10-
crossorigin="anonymous" defer>
11-
</script>
12-
<script src="webgl-demo.js" defer></script>
13-
</head>
14-
15-
<body>
16-
<canvas id="glcanvas" width="640" height="480"></canvas>
17-
</body>
18-
16+
<body>
17+
<canvas id="glcanvas" width="640" height="480"></canvas>
18+
</body>
1919
</html>

‎webgl-examples/tutorial/sample5/index.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>WebGL Demo</title>
6+
<link rel="stylesheet" href="../webgl.css" type="text/css" />
7+
<script
8+
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
9+
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
10+
crossorigin="anonymous"
11+
defer
12+
></script>
13+
<script src="webgl-demo.js" defer></script>
14+
</head>
315

4-
<head>
5-
<meta charset="utf-8">
6-
<title>WebGL Demo</title>
7-
<link rel="stylesheet" href="../webgl.css" type="text/css">
8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
9-
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
10-
crossorigin="anonymous" defer>
11-
</script>
12-
<script src="webgl-demo.js" defer></script>
13-
</head>
14-
15-
<body>
16-
<canvas id="glcanvas" width="640" height="480"></canvas>
17-
</body>
18-
16+
<body>
17+
<canvas id="glcanvas" width="640" height="480"></canvas>
18+
</body>
1919
</html>

‎webgl-examples/tutorial/sample6/index.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>WebGL Demo</title>
6+
<link rel="stylesheet" href="./webgl.css" type="text/css" />
7+
<script
8+
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
9+
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
10+
crossorigin="anonymous"
11+
defer
12+
></script>
13+
<script src="webgl-demo.js" defer></script>
14+
</head>
315

4-
<head>
5-
<meta charset="utf-8">
6-
<title>WebGL Demo</title>
7-
<link rel="stylesheet" href="./webgl.css" type="text/css">
8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
9-
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
10-
crossorigin="anonymous" defer>
11-
</script>
12-
<script src="webgl-demo.js" defer></script>
13-
</head>
14-
15-
<body>
16-
<canvas id="glcanvas" width="640" height="480"></canvas>
17-
</body>
18-
16+
<body>
17+
<canvas id="glcanvas" width="640" height="480"></canvas>
18+
</body>
1919
</html>

0 commit comments

Comments
 (0)