Webgl Triangle
External Libraries
twgl = require("twgl.js")
require.resolve("twgl.js")
m4 = twgl.m4
gl = {
const canvas = DOM.canvas(600, 400);
// or html`<canvas width="578", height="256"></canvas>`
const gl = canvas.getContext("webgl2");
gl.clearColor(0.25, 0.25, 0.25, 1);
gl.enable(gl.DEPTH_TEST);
return gl;
}
shaders = {
const vs = `#version 300 es
in vec3 position;
in vec3 normal;
uniform float aspectR; // window aspect ratio: width/height
out vec3 fragNormal;
void main(){
gl_Position = vec4(position.x/aspectR, position.yz, 1);
fragNormal = normalize(normal);
}
`;
const fs = `#version 300 es
precision mediump float;
in vec3 fragNormal;
out vec4 outColor;
void main(){
vec3 N = normalize(fragNormal);
outColor = vec4(abs(N), 1);
}
`;
return [vs, fs]
}
errorBlock = html`<textarea style="height : 20px; width : ${width}px; font-size: 0.8em; display: block"></textarea>`
programInfo = {
errorBlock.style.height = "20px";
errorBlock.innerHTML = "Program Shader compilation successful";
return twgl.createProgramInfo(gl, shaders, (message) => { // Combile the shaders and create a shader program.
errorBlock.style.height = "400px";
errorBlock.innerHTML = "Program Shader compilation error\n" + message;
});
}
vertexAttributes = [
{
position: {
numComponents: 3,
data: [1,0,0, 0,1,0, -1,-1,0]
}, // Attribute position
normal: {
numComponents: 3,
data: [1,0,1, 0,1,1, -1,-1,-1]
} // Attribute normal
}
]
bufferInfoArray = vertexAttributes.map((d)=>twgl.createBufferInfoFromArrays(gl, d));
viewof useAspectRatio = Inputs.toggle({ label: "Use Window Aspect Ratio" })
{
const uniforms = {
aspectR: useAspectRatio? gl.canvas.width / gl.canvas.height : 1
};
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.useProgram(programInfo.program);
bufferInfoArray.forEach((bufferInfo)=> {
twgl.setUniforms(programInfo, uniforms);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.drawBufferInfo(gl, bufferInfo);
}
);
return gl.canvas
}
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.
