{
// Create the shaders
let shaderv = gl.createShader(gl.VERTEX_SHADER);
let shaderf = gl.createShader(gl.FRAGMENT_SHADER);
// Compile vertex shader
gl.shaderSource(shaderv, vertex_shader);
gl.compileShader(shaderv);
if (!gl.getShaderParameter(shaderv, gl.COMPILE_STATUS)) {
throw gl.getShaderInfoLog(shaderv);
}
// Compile fragment shader
gl.shaderSource(shaderf, fragment_shader);
gl.compileShader(shaderf);
if (!gl.getShaderParameter(shaderf, gl.COMPILE_STATUS)) {
throw gl.getShaderInfoLog(shaderf);
}
// Link vertex and fragment stage to a full shader program
let shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, shaderv);
gl.attachShader(shaderProgram, shaderf);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
throw "Could not initialise shaders";
}
// Set the shader to active to use it for our drawing
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
// Init buffers
let squareVertexBuffer;
squareVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);
let vertices = [
0.5, 0.5, 0.0,
-0.5, 0.5, 0.0,
0.5, -0.5, 0.0,
-0.5, -0.5, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexBuffer.itemSize = 3; // 3 coordinates per vertex
squareVertexBuffer.numItems = 4; // 4 vertices in the buffer
let squareVertexColorBuffer;
squareVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
let colors = [
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
0.0, 0.0, 1.0,
1.0, 0.0, 0.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
squareVertexColorBuffer.itemSize = 3;
squareVertexColorBuffer.numItems = 4;
gl.viewport(0, 0, width, height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
let offset = 0, stride = 0
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexBuffer.itemSize, gl.FLOAT, false, stride, offset);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexColorBuffer.itemSize, gl.FLOAT, false, offset, stride);
// By using the draw type TRANGLE_STRIP instead of TRIANGLES we are able to draw a series of connected triangles.
// The first three vertices constitute the starting shape.
// Each subsequent vertex forms a new triangle in the strip together with its two predecessors
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexBuffer.numItems);
return "OK"
}
{
// Create the shaders
let shaderv = gl.createShader(gl.VERTEX_SHADER);
let shaderf = gl.createShader(gl.FRAGMENT_SHADER);
// Compile vertex shader
gl.shaderSource(shaderv, vertex_shader);
gl.compileShader(shaderv);
if (!gl.getShaderParameter(shaderv, gl.COMPILE_STATUS)) {
throw gl.getShaderInfoLog(shaderv);
}
// Compile fragment shader
gl.shaderSource(shaderf, fragment_shader);
gl.compileShader(shaderf);
if (!gl.getShaderParameter(shaderf, gl.COMPILE_STATUS)) {
throw gl.getShaderInfoLog(shaderf);
}
// Link vertex and fragment stage to a full shader program
let shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, shaderv);
gl.attachShader(shaderProgram, shaderf);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
throw "Could not initialise shaders";
}
// Set the shader to active to use it for our drawing
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
// Init buffers
let squareVertexBuffer;
let vertices = [];
squareVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);
// below is how you interleave positions and colors into a single array and then VBO
vertices.push(-.5); vertices.push(-.5); vertices.push(0.0); // v1 positions
vertices.push(1.0); vertices.push(0.0); vertices.push(0.0); // v1 colors
vertices.push(.5); vertices.push(.5); vertices.push(0.0); // v2 positions
vertices.push(0.0); vertices.push(0.0); vertices.push(1.0); // v2 colors
vertices.push(-.5); vertices.push(.5); vertices.push(0.0); // v3 positions
vertices.push(0.0); vertices.push(0.0); vertices.push(0.0); // v3 colors
vertices.push(-.5); vertices.push(-.5); vertices.push(0.0); // v4 positions
vertices.push(1.0); vertices.push(0.0); vertices.push(0.0); // v4 colors
vertices.push(.5); vertices.push(-.5); vertices.push(0.0); // v5 positions
vertices.push(0.0); vertices.push(1.0); vertices.push(0.0); // v5 colors
vertices.push(.5); vertices.push(.5); vertices.push(0.0); // v6 positions
vertices.push(0.0); vertices.push(0.0); vertices.push(1.0); // v6 colors
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // use 4 bytes float
squareVertexBuffer.numFloats = 3; // three floats per vertex
squareVertexBuffer.numVertices = 6; // number of vertices in the buffer
gl.viewport(0, 0, width, height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
let offset = 0, stride = 2 * 3 * 4 // 4 is the size of a float in bytes
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexBuffer.numFloats, gl.FLOAT, false, stride, offset);
offset = 3 * 4 // 4 is the size of a float in bytes
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexBuffer.numFloats, gl.FLOAT, false, stride, offset);
offset = 0;
gl.drawArrays(gl.TRIANGLES, offset, squareVertexBuffer.numVertices);
return "OK"
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
