Computer-Graphics-Lab-Work-Practice/Application_1.html at main · Yasir-Arafah/Computer-Graphics-Lab-Work-Practice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<html>
<title>LAB-1: Intro</title>
<canvas id="webglcanvas" width="500" height="500"></canvas>

<script>

    var canvas = document.getElementById("webglcanvas");
    var  gl = canvas.getContext("webgl");

    var vertexShaderSource =
       `attribute vec3 a_coords;
        void main() {
            gl_Position = vec4(a_coords, 1.0);
        }`;


    var fragmentShaderSource =
       `void main() {
            gl_FragColor = vec4(0.0, 0.24, 0.95, 0.95);
        }`;

    var vsh = gl.createShader( gl.VERTEX_SHADER );
    gl.shaderSource( vsh, vertexShaderSource );
    gl.compileShader( vsh );

    var fsh = gl.createShader( gl.FRAGMENT_SHADER );
    gl.shaderSource( fsh, fragmentShaderSource );
    gl.compileShader( fsh );

    var prog = gl.createProgram();

    gl.attachShader( prog, vsh );
    gl.attachShader( prog, fsh );
    gl.linkProgram( prog );
    gl.useProgram(prog);

    var a_coords_location = gl.getAttribLocation(prog, "a_coords");

    var coords = new Float32Array( [-0.2, 0.0, 0.0,
				    0.2, 0.0, 0.0,
				    0.0, 0.2, 0.0,

				    0.0001, 0.215, 0.0,
				    0.2, 0.015, 0.0,
				    0.4, 0.3, 0.0,

				   -0.2, -0.01, 0.0,
				    0.2, -0.01, 0.0,
				    0.15, -0.16, 0.0,

				    0.4, -0.26, 0.0,
				    0.21, -0.01, 0.0,
				    0.16, -0.165, 0.0,

				   -0.2, 0.02, 0.0,
				   -0.11, 0.11, 0.0,
				   -0.34, 0.19, 0.0,

				   -0.25, 0.06, 0.0,
				   -0.45, 0.09, 0.0,
				   -0.35, 0.18, 0.0] );

    var a_coords_buffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, a_coords_buffer);
    gl.bufferData(gl.ARRAY_BUFFER, coords, gl.STATIC_DRAW);
    gl.vertexAttribPointer(a_coords_location, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(a_coords_location);

    gl.clearColor(0.81, 0.89, 0.98, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 18);


</script>

</html>