Skip to content

Commit 8954e43

Browse files
openalgorithmdevelopersopenalgorithmdevelopers
committed
traingle geometry code added
1 parent 404438c commit 8954e43

File tree

2 files changed

+349
-0
lines changed

2 files changed

+349
-0
lines changed

‎Computer Graphics/5_Two_triangle transform.html

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
<html>
2+
<head>
3+
<title>WebGL - Two Triangle Transform Program</title>
4+
</head>
5+
<body>
6+
<canvas id="canvas" width="1200" height="600">
7+
Your browser does not support HTML5
8+
</canvas>
9+
<br/>
10+
<script>
11+
var gl, shaderProgram;
12+
13+
gl = initializeWebGL(gl);
14+
15+
//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.
16+
gl.clearColor(0, 0, 0, 1.0);
17+
gl.clear(gl.COLOR_BUFFER_BIT);
18+
//Note: The default background color in WebGl is white.
19+
20+
//Step 2 (Speficy vertices data): Speficy the coordinates (X,Y,Z) of the geometry and other information related to each coordinates.
21+
var verticesDataArrayJS =
22+
[ // X, Y, Z
23+
-0.3, 0.7, 0, //A
24+
0.3, 0.7, 0, //B
25+
0, 0, 0, //C
26+
0.3, -0.7, 0, //D
27+
-0.3, -0.7, 0 //E
28+
];
29+
30+
//Step 3 (Specify how to connect the points): Specify the order with which the coordinates defined in Step2 will be joined.
31+
var IndicesArrayJS =
32+
[
33+
// A-0, B-1, C-2, D-3, E-4
34+
0, 1, 2, //ABC
35+
//2, 3, 4 //CDE
36+
];
37+
38+
//Step 4 (Create GPU meomry buffer): In the GPU for holding vertices data of type ARRAY_BUFFER.
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+
45+
//Step 6 (Pass the indices data to GPU buffer): repeat the steps 4 and 5 for the indices data but use ELEMENT_ARRAY_BUFFER.
46+
var rectIBO = gl.createBuffer();
47+
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, rectIBO);
48+
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(IndicesArrayJS), gl.STATIC_DRAW);
49+
50+
//Seven Steps Shader side coding in JS to get the shader program.
51+
shaderProgram = getShaderProgram(gl);
52+
53+
//Step 14 (Use the shader program):
54+
gl.useProgram(shaderProgram);
55+
56+
//Step 15 (Get access to GPU's geometry coordinates): Get the pointer to the geometry coordinates defined in vertex shader through the shader program.
57+
var positionAttribLocation = gl.getAttribLocation(shaderProgram, 'geometryCoordinatesGPU');
58+
59+
var GPU_T1 = gl.getUniformLocation(shaderProgram, 'GPU_T1');
60+
var GPU_T2 = gl.getUniformLocation(shaderProgram, 'GPU_T2');
61+
var GPU_T3 = gl.getUniformLocation(shaderProgram, 'GPU_T3');
62+
63+
//Step 16 (Enable Vertex Attribute Array): It enables the pointer defined in Step 8 to access the vertex buffered data.
64+
gl.enableVertexAttribArray(positionAttribLocation);
65+
66+
//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.
67+
gl.vertexAttribPointer(
68+
positionAttribLocation, // Attribute location
69+
3, // Number of elements per attribute
70+
gl.FLOAT, // Type of elements
71+
gl.FALSE,
72+
3 * Float32Array.BYTES_PER_ELEMENT, // Size of an individual vertex
73+
0 // Offset from the beginning of a single vertex to this attribute
74+
);
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+
var angle = 45;
79+
var radian = angle*(3.14/180);
80+
var Sx = 0.5, Sy = 0.5;
81+
var m = 0.5, n = 0.5;
82+
var T1 = new Float32Array(16);
83+
var T2 = new Float32Array(16);
84+
var T3 = new Float32Array(16);
85+
86+
//T1 = [1,0,0,0, 0,1,0,0, 0,0,1,0, -0.5,-0.5,0,1]; //for translation
87+
T1 = [1,0,0,0, 0,1,0,0, 0,0,1,0, 1,1,0,1]; //for translation
88+
T2 = [Math.cos(radian),Math.sin(radian),0,0, -Math.sin(radian),Math.cos(radian),0,0, 0,0,1,0, 0,0,0,1]; //for translation
89+
//T2 = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; //for translation
90+
//T3 = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0.5,0.5,0,1]; //for translation
91+
T3 = [1,0,0,0, 0,1,0,0, 0,0,1,0, -1,-1,0,1]; //for translation
92+
93+
//tranArrayJS = [Math.cos(radian),-Math.sin(radian),0,0, Math.sin(radian),Math.cos(radian),0,0, 0,0,1,0, 0,0,0,1]; //for rotation
94+
//tranArrayJS = [Sx,0,0,0, 0,Sy,0,0, 0,0,1,0, 0,0,0,1]; //for scaling
95+
//tranArrayJS = [Sx*Math.cos(radian),- Sx*Math.sin(radian),0,0, Sy*Math.sin(radian),Sy*Math.cos(radian),0,0, 0,0,1,0, m,n,0,1]; //for composite transformation
96+
97+
gl.uniformMatrix4fv(GPU_T1, gl.FALSE, T1);
98+
gl.uniformMatrix4fv(GPU_T2, gl.FALSE, T2);
99+
gl.uniformMatrix4fv(GPU_T3, gl.FALSE, T3);
100+
101+
gl.drawElements(gl.TRIANGLES, IndicesArrayJS.length, gl.UNSIGNED_SHORT, 0);
102+
103+
function initializeWebGL(gl)
104+
{
105+
var canvas = document.getElementById('canvas');
106+
107+
canvas.width = window.innerWidth;;
108+
canvas.height = window.innerHeight;;
109+
110+
gl = canvas.getContext('webgl');
111+
112+
if (!gl) {
113+
console.log('WebGL not supported, falling back on experimental-webgl');
114+
gl = canvas.getContext('experimental-webgl');
115+
}
116+
117+
if (!gl) {
118+
alert('Your browser does not support WebGL');
119+
return;
120+
}
121+
return gl;
122+
}
123+
124+
//Seven steps of Shader side coding
125+
function getShaderProgram(gl)
126+
{
127+
//Step 7 (Define vertex shader text): Define the code of the vertex shader in the form of JS text.
128+
var vertexShaderText =
129+
' precision mediump float; ' +
130+
' attribute vec3 geometryCoordinatesGPU; ' +
131+
' uniform mat4 GPU_T1; ' +
132+
' uniform mat4 GPU_T2; ' +
133+
' uniform mat4 GPU_T3; ' +
134+
' void main() ' +
135+
' { ' +
136+
' gl_Position = vec4(geometryCoordinatesGPU, 1.0) * GPU_T1 * GPU_T2 * GPU_T3; ' +
137+
' } ';
138+
139+
//Step 8 (Create actual vertex shader): Create the actual vertex shader with the text defined in Step 1.
140+
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
141+
gl.shaderSource(vertexShader, vertexShaderText);
142+
143+
//Step 9 (Compile vertex shader):
144+
gl.compileShader(vertexShader);
145+
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
146+
console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertexShader));
147+
return;
148+
}
149+
150+
//Step 10: Repeat the above 3 steps for fragment shader.
151+
var fragmentShaderText =
152+
' void main() ' +
153+
' { ' +
154+
' gl_FragColor = vec4(0, 1, 0, 1); ' +
155+
' } ';
156+
157+
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
158+
gl.shaderSource(fragmentShader, fragmentShaderText);
159+
160+
gl.compileShader(fragmentShader);
161+
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
162+
console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragmentShader));
163+
return;
164+
}
165+
166+
//Step 11 (Shader program): With the compiled vertex and fragment shader, create the shader program.
167+
var shaderProgram = gl.createProgram();
168+
gl.attachShader(shaderProgram, vertexShader);
169+
gl.attachShader(shaderProgram, fragmentShader);
170+
171+
//Step 12 (Link shader program):
172+
gl.linkProgram(shaderProgram);
173+
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
174+
console.error('ERROR linking program!', gl.getProgramInfoLog(shaderProgram));
175+
return;
176+
}
177+
178+
//Step 13 (Validate Shader program): Checks if the shader program has been succesfully linked and can be used further.
179+
gl.validateProgram(shaderProgram);
180+
if (!gl.getProgramParameter(shaderProgram, gl.VALIDATE_STATUS)) {
181+
console.error('ERROR validating program!', gl.getProgramInfoLog(shaderProgram));
182+
return;
183+
}
184+
return shaderProgram;
185+
}
186+
</script>
187+
</body>
188+
</html>

‎Computer Graphics/5_Two_triangle transform_js.js

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
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+
var rectVBO = gl.createBuffer();
31+
gl.bindBuffer(gl.ARRAY_BUFFER, rectVBO);
32+
33+
//Step 5 (Pass the vertices data to the buffer created previously).
34+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesDataArrayJS), gl.STATIC_DRAW);
35+
36+
//Step 6 (Pass the indices data to GPU buffer): repeat the steps 4 and 5 for the indices data but use ELEMENT_ARRAY_BUFFER.
37+
var rectIBO = gl.createBuffer();
38+
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, rectIBO);
39+
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(IndicesArrayJS), gl.STATIC_DRAW);
40+
41+
//Seven Steps Shader side coding in JS to get the shader program.
42+
shaderProgram = getShaderProgram(gl);
43+
44+
//Step 14 (Use the shader program):
45+
gl.useProgram(shaderProgram);
46+
47+
//Step 15 (Get access to GPU's geometry coordinates): Get the pointer to the geometry coordinates defined in vertex shader through the shader program.
48+
var positionAttribLocation = gl.getAttribLocation(shaderProgram, 'geometryCoordinatesGPU');
49+
var tranMatGPUPointer = gl.getUniformLocation(shaderProgram, 'tranMatGPU');
50+
51+
//Step 16 (Enable Vertex Attribute Array): It enables the pointer defined in Step 8 to access the vertex buffered data.
52+
gl.enableVertexAttribArray(positionAttribLocation);
53+
gl.enableVertexAttribArray(tranMatGPUPointer);
54+
55+
//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.
56+
gl.vertexAttribPointer(
57+
positionAttribLocation, // Attribute location
58+
3, // Number of elements per attribute
59+
gl.FLOAT, // Type of elements
60+
gl.FALSE,
61+
3 * Float32Array.BYTES_PER_ELEMENT, // Size of an individual vertex
62+
0 // Offset from the beginning of a single vertex to this attribute
63+
);
64+
65+
66+
//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.
67+
var angle = 45;
68+
var radian = angle*(3.14/180);
69+
var Sx = 0.5, Sy = 0.5;
70+
var m = 0.5, n = 0.5;
71+
var tranArrayJS = new Float32Array(16);
72+
//tranArrayJS = [1,0,0,0, 0,1,0,0, 0,0,1,0, m,n,0,1]; //for translation
73+
//tranArrayJS = [Math.cos(radian),-Math.sin(radian),0,0, Math.sin(radian),Math.cos(radian),0,0, 0,0,1,0, 0,0,0,1]; //for rotation
74+
//tranArrayJS = [Sx,0,0,0, 0,Sy,0,0, 0,0,1,0, 0,0,0,1]; //for scaling
75+
tranArrayJS = [Sx*Math.cos(radian),- Sx*Math.sin(radian),0,0, Sy*Math.sin(radian),Sy*Math.cos(radian),0,0, 0,0,1,0, m,n,0,1]; //for composite transformation
76+
77+
gl.uniformMatrix4fv(tranMatGPUPointer, gl.FALSE, tranArrayJS);
78+
gl.drawElements(gl.TRIANGLES, 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+
' uniform mat4 tranMatGPU; ' +
110+
' void main() ' +
111+
' { ' +
112+
' gl_Position = tranMatGPU * vec4(geometryCoordinatesGPU, 1.0); ' +
113+
' } ';
114+
115+
//Step 8 (Create actual vertex shader): Create the actual vertex shader with the text defined in Step 1.
116+
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
117+
gl.shaderSource(vertexShader, vertexShaderText);
118+
119+
//Step 9 (Compile vertex shader):
120+
gl.compileShader(vertexShader);
121+
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
122+
console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertexShader));
123+
return;
124+
}
125+
126+
//Step 10: Repeat the above 3 steps for fragment shader.
127+
var fragmentShaderText =
128+
' void main() ' +
129+
' { ' +
130+
' gl_FragColor = vec4(0, 1, 0, 1); ' +
131+
' } ';
132+
133+
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
134+
gl.shaderSource(fragmentShader, fragmentShaderText);
135+
136+
gl.compileShader(fragmentShader);
137+
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
138+
console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragmentShader));
139+
return;
140+
}
141+
142+
//Step 11 (Shader program): With the compiled vertex and fragment shader, create the shader program.
143+
var shaderProgram = gl.createProgram();
144+
gl.attachShader(shaderProgram, vertexShader);
145+
gl.attachShader(shaderProgram, fragmentShader);
146+
147+
//Step 12 (Link shader program):
148+
gl.linkProgram(shaderProgram);
149+
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
150+
console.error('ERROR linking program!', gl.getProgramInfoLog(shaderProgram));
151+
return;
152+
}
153+
154+
//Step 13 (Validate Shader program): Checks if the shader program has been succesfully linked and can be used further.
155+
gl.validateProgram(shaderProgram);
156+
if (!gl.getProgramParameter(shaderProgram, gl.VALIDATE_STATUS)) {
157+
console.error('ERROR validating program!', gl.getProgramInfoLog(shaderProgram));
158+
return;
159+
}
160+
return shaderProgram;
161+
}

0 commit comments

Comments
 (0)