Skip to content

Commit 404438c

Browse files
openalgorithmdevelopersopenalgorithmdevelopers
committed
separated CG specific codes
1 parent 2b95f42 commit 404438c

File tree

3 files changed

+345
-345
lines changed

3 files changed

+345
-345
lines changed

‎Hello.html renamed to ‎Computer Graphics/Hello.html

Lines changed: 167 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -1,168 +1,168 @@
1-
<!DOCTYPE html>
2-
<!--
3-
-----------------------------------------------------------------------------------------------------------------------------------------------------
4-
Version | Date | Author | Description
5-
-----------------------------------------------------------------------------------------------------------------------------------------------------
6-
001 | 18 Jan 2022 | Bhupendra Singh, UPES Dehradun | WebGL is wrapped inside the draw() method. The method can be used to display 2D points.
7-
| | | A part of Computer Graphics Lab work.
8-
-----------------------------------------------------------------------------------------------------------------------------------------------------
9-
-->
10-
<html>
11-
<head>
12-
<title>CG Lab - "Type your sap id here".</title>
13-
</head>
14-
<body>
15-
<canvas id="canvas" width="1200" height="600">
16-
Your browser does not support HTML5
17-
</canvas>
18-
<br/>
19-
<script>
20-
//////////////////////////////// YOUR CODE SHOULD START AFTER THIS LINE //////////////////////
21-
var SCREEN_SIZE = 100; // The size of the coordinate axis, X, Y = [0 SCREEN_SIZE]
22-
var verticesData = []; // The array holds the x,y of all the data points to be drawn on the screen.
23-
24-
25-
draw(verticesData); // This method draws all the points provided in the argument array.
26-
//////////////////////////////// YOUR CODE SHOULD END BEFORE THIS LINE //////////////////////
27-
28-
function XY_mapping(){
29-
let inputVertices = arguments[0];
30-
var SCREEN_SIZE = arguments[1];
31-
for(var i = 0; i < inputVertices.length; i++)
32-
{
33-
inputVertices[i] = -1 + inputVertices[i]/(SCREEN_SIZE/2);
34-
inputVertices[i] = inputVertices[i].toFixed(2);
35-
}
36-
return inputVertices;
37-
}
38-
39-
//////////////////////////////// WebGL code starts from here. Don't touch uncless you have understanding of it.//////////////////////
40-
function draw () {
41-
var verticesData = arguments[0];
42-
verticesDataArrayJS = XY_mapping(verticesData, SCREEN_SIZE);
43-
44-
var gl, shaderProgram;
45-
46-
gl = initializeWebGL(gl);
47-
48-
//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.
49-
gl.clearColor(0, 0, 0, 1.0);
50-
gl.clear(gl.COLOR_BUFFER_BIT);
51-
//Note: The default background color in WebGl is white.
52-
53-
//Step 4 (Create GPU meomry buffer): In the GPU for holding vertices data of type ARRAY_BUFFER.
54-
var rectVBO = gl.createBuffer();
55-
gl.bindBuffer(gl.ARRAY_BUFFER, rectVBO);
56-
57-
//Step 5 (Pass the vertices data to the buffer created previously).
58-
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesDataArrayJS), gl.STATIC_DRAW);
59-
60-
//Seven Steps Shader side coding in JS to get the shader program.
61-
shaderProgram = getShaderProgram(gl);
62-
63-
//Step 14 (Use the shader program):
64-
gl.useProgram(shaderProgram);
65-
66-
//Step 15 (Get access to GPU's geometry coordinates): Get the pointer to the geometry coordinates defined in vertex shader through the shader program.
67-
var coordinatesInfoPoniter = gl.getAttribLocation(shaderProgram, 'geometryCoordinatesGPU');
68-
69-
//Step 16 (Enable Vertex Attribute Array): It enables the pointer defined in Step 8 to access the vertex buffered data.
70-
gl.enableVertexAttribArray(coordinatesInfoPoniter);
71-
72-
//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.
73-
gl.vertexAttribPointer(
74-
coordinatesInfoPoniter, // Vertices pointer
75-
2, // Number of elements per attribute
76-
gl.FLOAT, // Type of elements
77-
gl.FALSE, // Data Normalization
78-
2 * Float32Array.BYTES_PER_ELEMENT, // Size of an individual vertex
79-
0 // Offset from the beginning of a single vertex to this attribute
80-
);
81-
82-
//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.
83-
gl.drawArrays(gl.POINTS, 0, verticesDataArrayJS.length);
84-
};
85-
86-
function initializeWebGL(gl)
87-
{
88-
var canvas = document.getElementById('canvas');
89-
90-
canvas.width = window.innerWidth;;
91-
canvas.height = window.innerHeight;;
92-
93-
gl = canvas.getContext('webgl');
94-
95-
if (!gl) {
96-
console.log('WebGL not supported, falling back on experimental-webgl');
97-
gl = canvas.getContext('experimental-webgl');
98-
}
99-
100-
if (!gl) {
101-
alert('Your browser does not support WebGL');
102-
return;
103-
}
104-
return gl;
105-
}
106-
107-
//Seven steps of Shader side coding
108-
function getShaderProgram(gl)
109-
{
110-
//Step 7 (Define vertex shader text): Define the code of the vertex shader in the form of JS text.
111-
var vertexShaderText =
112-
' attribute vec2 geometryCoordinatesGPU; ' +
113-
' void main() ' +
114-
' { ' +
115-
' gl_Position = vec4(geometryCoordinatesGPU, 1.0, 1.0); ' +
116-
' gl_PointSize = 10.0; '+
117-
' } ';
118-
119-
//Step 8 (Create actual vertex shader): Create the actual vertex shader with the text defined in Step 1.
120-
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
121-
gl.shaderSource(vertexShader, vertexShaderText);
122-
123-
//Step 9 (Compile vertex shader):
124-
gl.compileShader(vertexShader);
125-
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
126-
console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertexShader));
127-
return;
128-
}
129-
130-
//Step 10: Repeat the above 3 steps for fragment shader.
131-
var fragmentShaderText =
132-
' void main() ' +
133-
' { ' +
134-
' gl_FragColor = vec4(1, 1, 1, 1); ' +
135-
' } ';
136-
137-
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
138-
gl.shaderSource(fragmentShader, fragmentShaderText);
139-
140-
gl.compileShader(fragmentShader);
141-
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
142-
console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragmentShader));
143-
return;
144-
}
145-
146-
//Step 11 (Shader program): With the compiled vertex and fragment shader, create the shader program.
147-
var shaderProgram = gl.createProgram();
148-
gl.attachShader(shaderProgram, vertexShader);
149-
gl.attachShader(shaderProgram, fragmentShader);
150-
151-
//Step 12 (Link shader program):
152-
gl.linkProgram(shaderProgram);
153-
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
154-
console.error('ERROR linking program!', gl.getProgramInfoLog(shaderProgram));
155-
return;
156-
}
157-
158-
//Step 13 (Validate Shader program): Checks if the shader program has been succesfully linked and can be used further.
159-
gl.validateProgram(shaderProgram);
160-
if (!gl.getProgramParameter(shaderProgram, gl.VALIDATE_STATUS)) {
161-
console.error('ERROR validating program!', gl.getProgramInfoLog(shaderProgram));
162-
return;
163-
}
164-
return shaderProgram;
165-
}
166-
</script>
167-
</body>
1+
<!DOCTYPE html>
2+
<!--
3+
-----------------------------------------------------------------------------------------------------------------------------------------------------
4+
Version | Date | Author | Description
5+
-----------------------------------------------------------------------------------------------------------------------------------------------------
6+
001 | 18 Jan 2022 | Bhupendra Singh, UPES Dehradun | WebGL is wrapped inside the draw() method. The method can be used to display 2D points.
7+
| | | A part of Computer Graphics Lab work.
8+
-----------------------------------------------------------------------------------------------------------------------------------------------------
9+
-->
10+
<html>
11+
<head>
12+
<title>CG Lab - "Type your sap id here".</title>
13+
</head>
14+
<body>
15+
<canvas id="canvas" width="1200" height="600">
16+
Your browser does not support HTML5
17+
</canvas>
18+
<br/>
19+
<script>
20+
//////////////////////////////// YOUR CODE SHOULD START AFTER THIS LINE //////////////////////
21+
var SCREEN_SIZE = 100; // The size of the coordinate axis, X, Y = [0 SCREEN_SIZE]
22+
var verticesData = []; // The array holds the x,y of all the data points to be drawn on the screen.
23+
24+
25+
draw(verticesData); // This method draws all the points provided in the argument array.
26+
//////////////////////////////// YOUR CODE SHOULD END BEFORE THIS LINE //////////////////////
27+
28+
function XY_mapping(){
29+
let inputVertices = arguments[0];
30+
var SCREEN_SIZE = arguments[1];
31+
for(var i = 0; i < inputVertices.length; i++)
32+
{
33+
inputVertices[i] = -1 + inputVertices[i]/(SCREEN_SIZE/2);
34+
inputVertices[i] = inputVertices[i].toFixed(2);
35+
}
36+
return inputVertices;
37+
}
38+
39+
//////////////////////////////// WebGL code starts from here. Don't touch uncless you have understanding of it.//////////////////////
40+
function draw () {
41+
var verticesData = arguments[0];
42+
verticesDataArrayJS = XY_mapping(verticesData, SCREEN_SIZE);
43+
44+
var gl, shaderProgram;
45+
46+
gl = initializeWebGL(gl);
47+
48+
//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.
49+
gl.clearColor(0, 0, 0, 1.0);
50+
gl.clear(gl.COLOR_BUFFER_BIT);
51+
//Note: The default background color in WebGl is white.
52+
53+
//Step 4 (Create GPU meomry buffer): In the GPU for holding vertices data of type ARRAY_BUFFER.
54+
var rectVBO = gl.createBuffer();
55+
gl.bindBuffer(gl.ARRAY_BUFFER, rectVBO);
56+
57+
//Step 5 (Pass the vertices data to the buffer created previously).
58+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesDataArrayJS), gl.STATIC_DRAW);
59+
60+
//Seven Steps Shader side coding in JS to get the shader program.
61+
shaderProgram = getShaderProgram(gl);
62+
63+
//Step 14 (Use the shader program):
64+
gl.useProgram(shaderProgram);
65+
66+
//Step 15 (Get access to GPU's geometry coordinates): Get the pointer to the geometry coordinates defined in vertex shader through the shader program.
67+
var coordinatesInfoPoniter = gl.getAttribLocation(shaderProgram, 'geometryCoordinatesGPU');
68+
69+
//Step 16 (Enable Vertex Attribute Array): It enables the pointer defined in Step 8 to access the vertex buffered data.
70+
gl.enableVertexAttribArray(coordinatesInfoPoniter);
71+
72+
//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.
73+
gl.vertexAttribPointer(
74+
coordinatesInfoPoniter, // Vertices pointer
75+
2, // Number of elements per attribute
76+
gl.FLOAT, // Type of elements
77+
gl.FALSE, // Data Normalization
78+
2 * Float32Array.BYTES_PER_ELEMENT, // Size of an individual vertex
79+
0 // Offset from the beginning of a single vertex to this attribute
80+
);
81+
82+
//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.
83+
gl.drawArrays(gl.POINTS, 0, verticesDataArrayJS.length);
84+
};
85+
86+
function initializeWebGL(gl)
87+
{
88+
var canvas = document.getElementById('canvas');
89+
90+
canvas.width = window.innerWidth;;
91+
canvas.height = window.innerHeight;;
92+
93+
gl = canvas.getContext('webgl');
94+
95+
if (!gl) {
96+
console.log('WebGL not supported, falling back on experimental-webgl');
97+
gl = canvas.getContext('experimental-webgl');
98+
}
99+
100+
if (!gl) {
101+
alert('Your browser does not support WebGL');
102+
return;
103+
}
104+
return gl;
105+
}
106+
107+
//Seven steps of Shader side coding
108+
function getShaderProgram(gl)
109+
{
110+
//Step 7 (Define vertex shader text): Define the code of the vertex shader in the form of JS text.
111+
var vertexShaderText =
112+
' attribute vec2 geometryCoordinatesGPU; ' +
113+
' void main() ' +
114+
' { ' +
115+
' gl_Position = vec4(geometryCoordinatesGPU, 1.0, 1.0); ' +
116+
' gl_PointSize = 10.0; '+
117+
' } ';
118+
119+
//Step 8 (Create actual vertex shader): Create the actual vertex shader with the text defined in Step 1.
120+
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
121+
gl.shaderSource(vertexShader, vertexShaderText);
122+
123+
//Step 9 (Compile vertex shader):
124+
gl.compileShader(vertexShader);
125+
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
126+
console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertexShader));
127+
return;
128+
}
129+
130+
//Step 10: Repeat the above 3 steps for fragment shader.
131+
var fragmentShaderText =
132+
' void main() ' +
133+
' { ' +
134+
' gl_FragColor = vec4(1, 1, 1, 1); ' +
135+
' } ';
136+
137+
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
138+
gl.shaderSource(fragmentShader, fragmentShaderText);
139+
140+
gl.compileShader(fragmentShader);
141+
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
142+
console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragmentShader));
143+
return;
144+
}
145+
146+
//Step 11 (Shader program): With the compiled vertex and fragment shader, create the shader program.
147+
var shaderProgram = gl.createProgram();
148+
gl.attachShader(shaderProgram, vertexShader);
149+
gl.attachShader(shaderProgram, fragmentShader);
150+
151+
//Step 12 (Link shader program):
152+
gl.linkProgram(shaderProgram);
153+
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
154+
console.error('ERROR linking program!', gl.getProgramInfoLog(shaderProgram));
155+
return;
156+
}
157+
158+
//Step 13 (Validate Shader program): Checks if the shader program has been succesfully linked and can be used further.
159+
gl.validateProgram(shaderProgram);
160+
if (!gl.getProgramParameter(shaderProgram, gl.VALIDATE_STATUS)) {
161+
console.error('ERROR validating program!', gl.getProgramInfoLog(shaderProgram));
162+
return;
163+
}
164+
return shaderProgram;
165+
}
166+
</script>
167+
</body>
168168
</html>

0 commit comments

Comments
 (0)