Starting the exercises

[?]

Jul 8, 2021, 12:02 PM

LZ2M7LF5SWQM5DXYT5ONBTRQG7NTTHFBS3JYQCZYLSG4AUBZZSYAC

Dependencies

Change contents

file addition: index.js (----------)

[1.0]

const vertex_shader_2d = `
attribute vec4 a_position;

void main() {
gl_Position = a_position;
}`

const fragment_shader_2d = `
precision mediump float;

void main() {
gl_FragColor = vec4(1,0,0.5,1);
}`

function createShader(gl, type, source) {
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (success) {
return shader;
}
console.log(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
}

function createProgram(gl, vertexShader, fragmentShader) {
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
var success = gl.getProgramParameter(program, gl.LINK_STATUS);
if (success) {
return program;
}
console.log(gl.getProgramInfoLog(program));
gl.deleteProgram(program);
}

self.addEventListener('load', (event) => {
var canvas = document.querySelector('#c');
var gl = canvas.getContext("webgl");
if (!gl) {
alert("Canvas did not yield WebGL context!");
} else {
self.gl = gl;
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertex_shader_2d);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragment_shader_2d);
}
})
file addition: index.html (----------)

[1.0]

<!DOCTYPE html>
<html><head>
<meta charset = "UTF-8">
<title>Exercises while learning WebGL</title>
<script src="./index.js"></script>
</script>
</head>
<body>
<canvas id="c"></canvas>
<p>Learning WebGL from <a href="https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html">https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html</a></p>
</body>
</html>