Skip to content

Commit ee9acec

Browse files
openalgorithmdevelopersopenalgorithmdevelopers
authored
Content may change later.
1 parent 324612d commit ee9acec

File tree

1 file changed

+168
-0
lines changed

1 file changed

+168
-0
lines changed

‎Hello.html

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +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>
168+
</html>

0 commit comments

Comments
 (0)