You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
1.5 KiB
JavaScript
78 lines
1.5 KiB
JavaScript
let gl = null;
|
|
|
|
function compileShader(id, type) {
|
|
const code = document.getElementById(id).innerHTML
|
|
const shader = gl.createShader(type);
|
|
|
|
gl.shaderSource(shader, code);
|
|
gl.compileShader(shader);
|
|
|
|
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
console.log('theres an error');
|
|
console.log(gl.getShaderInfoLog(shader));
|
|
}
|
|
|
|
return shader;
|
|
}
|
|
|
|
function buildShaderProgram(shaderInfo) {
|
|
const program = gl.createProgram();
|
|
|
|
shaderInfo.forEach((desc) => {
|
|
const shader = compileShader(desc.id, desc.type);
|
|
|
|
if (shader) {
|
|
console.log('attach')
|
|
gl.attachShader(program, shader);
|
|
}
|
|
});
|
|
|
|
gl.linkProgram(program);
|
|
|
|
|
|
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
console.log("Error linking shader program");
|
|
console.log(gl.getProgramInfoLog(program));
|
|
}
|
|
|
|
return program;
|
|
}
|
|
|
|
function main() {
|
|
var canvas = document.getElementById('gl-canvas');
|
|
gl = canvas.getContext('webgl');
|
|
var program;
|
|
|
|
if (!gl) {
|
|
console.log('no gl');
|
|
return;
|
|
}
|
|
|
|
const shaderSet = [
|
|
{
|
|
type: gl.VERTEX_SHADER,
|
|
id: "vertex-shader",
|
|
},
|
|
{
|
|
type: gl.FRAGMENT_SHADER,
|
|
id: "fragment-shader",
|
|
},
|
|
];
|
|
|
|
program = buildShaderProgram(shaderSet);
|
|
|
|
var a_Position = gl.getAttribLocation(program, 'a_Position');
|
|
if (a_Position < 0) {
|
|
console.log('couldnt get position');
|
|
return;
|
|
}
|
|
|
|
gl.vertexAttrib3f(a_Position, 0.0, 0.5, 0.0);
|
|
|
|
gl.useProgram(program);
|
|
|
|
gl.clearColor(0.5, 0.0, 0.0, 1.0);
|
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
gl.drawArrays(gl.POINTS, 0, 1);
|
|
}
|