Day 1 - Canvas and WebGL

Vaibhavgodara02 · Jul 4, 2022 · 138528d · 138528d
1 parent 5559ca5
commit 138528d
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 0 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/Wisflux Internship.iml b/.idea/Wisflux Internship.iml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/canvas_webgl/gl.js b/canvas_webgl/gl.js
@@ -0,0 +1,44 @@
+const canvas = document.querySelector('#gl');
+const gl = canvas.getContext('webgl');
+
+if (!gl) {
+	throw new Error('WebGL not supported');
+}
+const vertexData = [
+	0, 1, 0,
+	1, -1, 0,
+	-1, -1, 0,
+];
+
+const buffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
+
+const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(vertexShader, `
+attribute vec3 position;
+void main() {
+    gl_Position = vec4(position, 1);
+}
+`);
+gl.compileShader(vertexShader);
+
+const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+gl.shaderSource(fragmentShader, `
+void main() {
+    gl_FragColor = vec4(1, 0, 0, 1);
+}
+`);
+gl.compileShader(fragmentShader);
+
+const program = gl.createProgram();
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+gl.linkProgram(program);
+
+const positionLocation = gl.getAttribLocation(program, `position`);
+gl.enableVertexAttribArray(positionLocation);
+gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
+
+gl.useProgram(program);
+gl.drawArrays(gl.TRIANGLES, 0, 3);
diff --git a/canvas_webgl/index.html b/canvas_webgl/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Canvas and WebGL</title>
+    <script src="gl.js" defer></script>
+    <script src="native.js" defer></script>
+</head>
+<body>
+    <h1>The Empty Triangle is Rendered Through Canvas and Red Triangle is Rendered Through WebGL</h1>
+    <br><br><br><br>
+    <canvas id="native"></canvas>
+    <canvas id="gl"></canvas>
+
+    <p>
+        References :-
+        <ol>
+            <li>https://www.educative.io/answers/how-to-draw-triangles-in-html-canvas</li>
+            <li>https://www.youtube.com/watch?v=zbS4a10xBk8</li>
+        </ol>
+    </p>
+
+</body>
+</html>
diff --git a/canvas_webgl/native.js b/canvas_webgl/native.js
@@ -0,0 +1,10 @@
+const canvas_native = document.querySelector("#native")
+
+const context = canvas_native.getContext("2d")
+context.beginPath()
+context.moveTo(0, 50)
+context.lineTo(50, 0)
+context.lineTo(100, 50)
+context.lineTo(0, 50)
+context.stroke()
+context.closePath()