Skip to content

Commit 936bac6

Browse files
openalgorithmdevelopersopenalgorithmdevelopers
authored
Add files via upload
1 parent ee9acec commit 936bac6

File tree

1 file changed

+179
-0
lines changed

1 file changed

+179
-0
lines changed

‎Naive Line Algorithm.html

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

0 commit comments

Comments
 (0)