WebGL - Was du unbedingt wissen musst

// Initialisierung des WebGL-Kontextes

var canvas = document.getElementById("myCanvas");

var gl = canvas.getContext("webgl");

// Definition der Vertex- und Fragment-Shaders

var vertexShaderSource = `

void main(void) {

gl_Position = vec4(0.0, 0.0, 0.0, 1.0);

}

`;

var fragmentShaderSource = `

void main(void) {

gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);

}

`;

// Kompilierung der Shaders

var vertexShader = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource(vertexShader, vertexShaderSource);

gl.compileShader(vertexShader);

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(fragmentShader, fragmentShaderSource);

gl.compileShader(fragmentShader);

// Verknüpfung der Shaders zu einem Programm

var shaderProgram = gl.createProgram();

gl.attachShader(shaderProgram, vertexShader);

gl.attachShader(shaderProgram, fragmentShader);

gl.linkProgram(shaderProgram);

gl.useProgram(shaderProgram);

// Zeichnen eines Punktes

gl.clearColor(0.0, 0.0, 0.0, 1.0);

gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.POINTS, 0, 1);