Skip to content

Commit ae76869

Browse files
openalgorithmdevelopersopenalgorithmdevelopers
authored
Add files via upload
1 parent 1814060 commit ae76869

File tree

68 files changed

+27890
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+27890
-0
lines changed

‎Book example codes/Chapter 3/1.0/3_First WebGL program.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<html>
2+
<head>
3+
<title>WebGL - First WebGL Program</title>
4+
</head>
5+
<body onload="WebGL();">
6+
<canvas id="canvas" width="1200" height="600">
7+
Your browser does not support HTML5
8+
</canvas>
9+
<br/>
10+
<script src="3_First WebGL program_js.js"></script></body>
11+
</html>

‎Book example codes/Chapter 3/1.0/3_First WebGL program_js.js

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
var WebGL = function () {
2+
var gl, shaderProgram;
3+
4+
gl = initializeWebGL(gl);
5+
6+
//Step 1 (Set background color): First specify the color with the help of Quadlet(R,G,B,Alpha) and the clear the buffer related to background.
7+
gl.clearColor(0, 0, 0, 1.0);
8+
gl.clear(gl.COLOR_BUFFER_BIT);
9+
//Note: The default background color in WebGl is white.
10+
11+
//Step 2 (Speficy vertices data): Speficy the coordinates (X,Y,Z) of the geometry and other information related to each coordinates.
12+
var verticesDataArrayJS =
13+
[ // X, Y, Z
14+
-0.3, 0.7, 0, //A
15+
0.3, 0.7, 0, //B
16+
0, 0, 0, //C
17+
0.3, -0.7, 0, //D
18+
-0.3, -0.7, 0 //E
19+
];
20+
21+
//Step 3 (Specify how to connect the points): Specify the order with which the coordinates defined in Step2 will be joined.
22+
var IndicesArrayJS =
23+
[
24+
// A-0, B-1, C-2, D-3, E-4
25+
0, 1, 2, //ABC
26+
2, 3, 4 //CDE
27+
];
28+
29+
//Step 4 (Create GPU meomry buffer): In the GPU for holding vertices data of type ARRAY_BUFFER.
30+
//gl.ARRAY_BUFFER type is used for holding vertex coordinates, color, texture coordinates or other informations on the GPU memory.
31+
var rectVBO = gl.createBuffer();
32+
gl.bindBuffer(gl.ARRAY_BUFFER, rectVBO);
33+
34+
//Step 5 (Pass the vertices data to the buffer created previously).
35+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesDataArrayJS), gl.STATIC_DRAW);
36+
//Notes: gl.STATIC_DRAW is used to specify that the data is passed once.
37+
//gl.DYNAMIC_DRAW is used to specify that the data may be respecified repeatedly.
38+
//gl.STREAM_DRAW is used to specify that the data may be respecified but not frequently.
39+
40+
//Step 6 (Pass the indices data to GPU buffer): repeat the steps 4 and 5 for the indices data but use ELEMENT_ARRAY_BUFFER.
41+
//ELEMENT_ARRAY_BUFFER is used for holding the indices information on the GPU memory
42+
var rectIBO = gl.createBuffer();
43+
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, rectIBO);
44+
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(IndicesArrayJS), gl.STATIC_DRAW);
45+
46+
//Seven Steps Shader side coding in JS to get the shader program.
47+
shaderProgram = getShaderProgram(gl);
48+
49+
//Step 14 (Use the shader program):
50+
gl.useProgram(shaderProgram);
51+
52+
//Step 15 (Get access to GPU's geometry coordinates): Get the pointer to the geometry coordinates defined in vertex shader through the shader program.
53+
var positionAttribLocation = gl.getAttribLocation(shaderProgram, 'geometryCoordinatesGPU');
54+
55+
56+
//Step 16 (Enable Vertex Attribute Array): It enables the pointer defined in Step 8 to access the vertex buffered data.
57+
gl.enableVertexAttribArray(positionAttribLocation);
58+
59+
//Step 17 (Buffer data definition): Define how the data on the GPU buffer is arranged. SO that the pointer defined in Step 8 can access the data from the buffer.
60+
gl.vertexAttribPointer(
61+
positionAttribLocation, // Attribute location
62+
3, // Number of elements per attribute
63+
gl.FLOAT, // Type of elements
64+
gl.FALSE,
65+
3 * Float32Array.BYTES_PER_ELEMENT, // Size of an individual vertex
66+
0 // Offset from the beginning of a single vertex to this attribute
67+
);
68+
69+
//Step 18 (Draw the geometry): Issue the draw command to generate the geometry as defined by the indices and the type of primitive to create.
70+
//
71+
//gl.drawElements(gl.LINES, IndicesArrayJS.length, gl.UNSIGNED_SHORT, 0);
72+
//gl.drawElements(gl.LINE_STRIP, IndicesArrayJS.length, gl.UNSIGNED_SHORT, 0);
73+
//gl.drawElements(gl.LINE_LOOP, IndicesArrayJS.length, gl.UNSIGNED_SHORT, 0);
74+
gl.drawElements(gl.TRIANGLES, IndicesArrayJS.length, gl.UNSIGNED_SHORT, 0);
75+
};
76+
77+
function initializeWebGL(gl)
78+
{
79+
var canvas = document.getElementById('canvas');
80+
81+
canvas.width = window.innerWidth;;
82+
canvas.height = window.innerHeight;;
83+
84+
gl = canvas.getContext('webgl');
85+
86+
if (!gl) {
87+
console.log('WebGL not supported, falling back on experimental-webgl');
88+
gl = canvas.getContext('experimental-webgl');
89+
}
90+
91+
if (!gl) {
92+
alert('Your browser does not support WebGL');
93+
return;
94+
}
95+
return gl;
96+
}
97+
98+
//Seven steps of Shader side coding
99+
function getShaderProgram(gl)
100+
{
101+
//Step 7 (Define vertex shader text): Define the code of the vertex shader in the form of JS text.
102+
var vertexShaderText =
103+
' precision mediump float; ' +
104+
' attribute vec3 geometryCoordinatesGPU; ' +
105+
' void main() ' +
106+
' { ' +
107+
' gl_Position = vec4(geometryCoordinatesGPU, 1.0); ' +
108+
' } ';
109+
110+
//Step 8 (Create actual vertex shader): Create the actual vertex shader with the text defined in Step 1.
111+
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
112+
gl.shaderSource(vertexShader, vertexShaderText);
113+
114+
//Step 9 (Compile vertex shader):
115+
gl.compileShader(vertexShader);
116+
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
117+
console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertexShader));
118+
return;
119+
}
120+
121+
//Step 10: Repeat the above 3 steps for fragment shader.
122+
var fragmentShaderText =
123+
' void main() ' +
124+
' { ' +
125+
' gl_FragColor = vec4(0, 1, 0, 1); ' +
126+
' } ';
127+
128+
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
129+
gl.shaderSource(fragmentShader, fragmentShaderText);
130+
131+
gl.compileShader(fragmentShader);
132+
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
133+
console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragmentShader));
134+
return;
135+
}
136+
137+
//Step 11 (Shader program): With the compiled vertex and fragment shader, create the shader program.
138+
var shaderProgram = gl.createProgram();
139+
gl.attachShader(shaderProgram, vertexShader);
140+
gl.attachShader(shaderProgram, fragmentShader);
141+
142+
//Step 12 (Link shader program):
143+
gl.linkProgram(shaderProgram);
144+
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
145+
console.error('ERROR linking program!', gl.getProgramInfoLog(shaderProgram));
146+
return;
147+
}
148+
149+
//Step 13 (Validate Shader program): Checks if the shader program has been succesfully linked and can be used further.
150+
gl.validateProgram(shaderProgram);
151+
if (!gl.getProgramParameter(shaderProgram, gl.VALIDATE_STATUS)) {
152+
console.error('ERROR validating program!', gl.getProgramInfoLog(shaderProgram));
153+
return;
154+
}
155+
return shaderProgram;
156+
}

‎Book example codes/Chapter 3/1.0/3_shape_aeroplane.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<html>
2+
<head>
3+
<title>WebGL - 2D Pyramid</title>
4+
</head>
5+
<body onload="WebGL();">
6+
<canvas id="canvas" width="1200" height="600">
7+
Your browser does not support HTML5
8+
</canvas>
9+
<br/>
10+
<script src="3_shape_aeroplane_js.js"></script></body>
11+
</html>

‎Book example codes/Chapter 3/1.0/3_shape_aeroplane_js.js

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
var WebGL = function () {
2+
var gl, shaderProgram;
3+
4+
gl = initializeWebGL(gl);
5+
6+
//Step 1 (Set background color): First specify the color with the help of Quadlet(R,G,B,Alpha) and the clear the buffer related to background.
7+
gl.clearColor(0, 0, 0, 1.0);
8+
gl.clear(gl.COLOR_BUFFER_BIT);
9+
//Note: The default background color in WebGl is white.
10+
11+
//Step 2 (Speficy vertices data): Speficy the coordinates (X,Y,Z) of the paper plane and other information related to each coordinates.
12+
var verticesDataArrayJS =
13+
[ // X, Y, Z
14+
0, 0.75, 0, //A
15+
-0.5, -0.75, 0, //B
16+
0, -0.5, 0, //C
17+
0.5, -0.75, 0, //D
18+
-0.05, -0.45, 0, //E
19+
0.05, -0.45, 0 //F
20+
];
21+
22+
//Step 3 (Specify how to connect the points): Specify the order with which the coordinates defined in Step 2 will be joined.
23+
var IndicesArrayJS =
24+
[
25+
//A-0, B-1, C-2, D-3, E-4, F-5
26+
0, 1, // LINE 1 : AB
27+
0, 3, // LINE 2 : AD
28+
5, 3, // LINE 3 : FD
29+
1, 4, // LINE 4 : BE
30+
0, 4, // LINE 6 : AE
31+
0, 5, // LINE 8 : AF
32+
5, 2, // LINE 7 : FC
33+
4, 2, // LINE 8 : EC
34+
0, 2 // LINE 9 : AC
35+
];
36+
37+
//Step 4 (Create GPU meomry buffer): In the GPU for holding vertices data of type ARRAY_BUFFER.
38+
//gl.ARRAY_BUFFER type is used for holding vertex coordinates, color, texture coordinates or other informations on the GPU memory.
39+
var rectVBO = gl.createBuffer();
40+
gl.bindBuffer(gl.ARRAY_BUFFER, rectVBO);
41+
42+
//Step 5 (Pass the vertices data to the buffer created previously).
43+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesDataArrayJS), gl.STATIC_DRAW);
44+
//Notes: gl.STATIC_DRAW is used to specify that the data is passed once.
45+
//gl.DYNAMIC_DRAW is used to specify that the data may be respecified repeatedly.
46+
//gl.STREAM_DRAW is used to specify that the data may be respecified but not frequently.
47+
48+
//Step 6 (Pass the indices data to GPU buffer): repeat the steps 4 and 5 for the indices data but use ELEMENT_ARRAY_BUFFER.
49+
//ELEMENT_ARRAY_BUFFER is used for holding the indices information on the GPU memory
50+
var rectIBO = gl.createBuffer();
51+
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, rectIBO);
52+
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(IndicesArrayJS), gl.STATIC_DRAW);
53+
54+
//Seven Steps Shader side coding in JS to get the shader program.
55+
shaderProgram = getShaderProgram(gl);
56+
57+
//Step 14 (Use the shader program):
58+
gl.useProgram(shaderProgram);
59+
60+
//Step 15 (Get access to GPU's geometry coordinates): Get the pointer to the geometry coordinates defined in vertex shader through the shader program.
61+
var positionAttribLocation = gl.getAttribLocation(shaderProgram, 'geometryCoordinatesGPU');
62+
63+
64+
//Step 16 (Enable Vertex Attribute Array): It enables the pointer defined in Step 8 to access the vertex buffered data.
65+
gl.enableVertexAttribArray(positionAttribLocation);
66+
67+
//Step 17 (Buffer data definition): Define how the data on the GPU buffer is arranged. SO that the pointer defined in Step 8 can access the data from the buffer.
68+
gl.vertexAttribPointer(
69+
positionAttribLocation, // Attribute location
70+
3, // Number of elements per attribute
71+
gl.FLOAT, // Type of elements
72+
gl.FALSE,
73+
3 * Float32Array.BYTES_PER_ELEMENT, // Size of an individual vertex
74+
0 // Offset from the beginning of a single vertex to this attribute
75+
);
76+
77+
//Step 18 (Draw the geometry): Issue the draw command to generate the geometry as defined by the indices and the type of primitive to create.
78+
gl.drawElements(gl.LINES, IndicesArrayJS.length, gl.UNSIGNED_SHORT, 0);
79+
};
80+
81+
function initializeWebGL(gl)
82+
{
83+
var canvas = document.getElementById('canvas');
84+
85+
canvas.width = window.innerWidth;;
86+
canvas.height = window.innerHeight;;
87+
88+
gl = canvas.getContext('webgl');
89+
90+
if (!gl) {
91+
console.log('WebGL not supported, falling back on experimental-webgl');
92+
gl = canvas.getContext('experimental-webgl');
93+
}
94+
95+
if (!gl) {
96+
alert('Your browser does not support WebGL');
97+
return;
98+
}
99+
return gl;
100+
}
101+
102+
//Seven steps of Shader side coding
103+
function getShaderProgram(gl)
104+
{
105+
//Step 7 (Define vertex shader text): Define the code of the vertex shader in the form of JS text.
106+
var vertexShaderText =
107+
' precision mediump float; ' +
108+
' attribute vec3 geometryCoordinatesGPU; ' +
109+
' void main() ' +
110+
' { ' +
111+
' gl_Position = vec4(geometryCoordinatesGPU, 1.0); ' +
112+
' } ';
113+
114+
//Step 8 (Create actual vertex shader): Create the actual vertex shader with the text defined in Step 1.
115+
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
116+
gl.shaderSource(vertexShader, vertexShaderText);
117+
118+
//Step 9 (Compile vertex shader):
119+
gl.compileShader(vertexShader);
120+
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
121+
console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertexShader));
122+
return;
123+
}
124+
125+
//Step 10: Repeat the above 3 steps for fragment shader.
126+
var fragmentShaderText =
127+
' void main() ' +
128+
' { ' +
129+
' gl_FragColor = vec4(0, 1, 0, 1); ' +
130+
' } ';
131+
132+
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
133+
gl.shaderSource(fragmentShader, fragmentShaderText);
134+
135+
gl.compileShader(fragmentShader);
136+
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
137+
console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragmentShader));
138+
return;
139+
}
140+
141+
//Step 11 (Shader program): With the compiled vertex and fragment shader, create the shader program.
142+
var shaderProgram = gl.createProgram();
143+
gl.attachShader(shaderProgram, vertexShader);
144+
gl.attachShader(shaderProgram, fragmentShader);
145+
146+
//Step 12 (Link shader program):
147+
gl.linkProgram(shaderProgram);
148+
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
149+
console.error('ERROR linking program!', gl.getProgramInfoLog(shaderProgram));
150+
return;
151+
}
152+
153+
//Step 13 (Validate Shader program): Checks if the shader program has been succesfully linked and can be used further.
154+
gl.validateProgram(shaderProgram);
155+
if (!gl.getProgramParameter(shaderProgram, gl.VALIDATE_STATUS)) {
156+
console.error('ERROR validating program!', gl.getProgramInfoLog(shaderProgram));
157+
return;
158+
}
159+
return shaderProgram;
160+
}

‎Book example codes/Chapter 3/1.0/3_shape_fox.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<html>
2+
<head>
3+
<title>WebGL - Fox Shape</title>
4+
</head>
5+
<body onload="WebGL();">
6+
<canvas id="canvas" width="1200" height="600">
7+
Your browser does not support HTML5
8+
</canvas>
9+
<br/>
10+
<script src="3_shape_fox_js.js"></script></body>
11+
</html>

0 commit comments

Comments
 (0)