gl = {
const canvas = DOM.canvas(578, 256);
// 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; // Attribute
in vec3 normal; // Attribute
uniform float asp; // Windo aspect ratio: hindow.width/window.height
out vec3 fragNormal; // Variable whose value will be associated with the gl_position.
void main () {
gl_Position = vec4(position.x/asp, position.yz, 1);
// Note: gl_Position is a A predefined vec4 variable. It must be set with a vec4 value.
fragNormal = normalize(normal);
}`;
const fs = `#version 300 es
precision mediump float;
in vec3 fragNormal;
out vec4 outColor; // User-defined output variable for
void main () {
vec3 N = normalize(fragNormal);
//vec3 color = (N+1.0)/2.0;
outColor = vec4(abs(N), 1);
}`;
return [vs, fs];
}
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]
} // Attribtue normal
}
]
md`### Step 3c: **twgl code here**.
- Create vertex attribute buffers.
Use *twgl.createBufferInfoFromArrays* to create buffers under gl context.`
bufferInfoArray = vertexAttributes.map((d) =>
twgl.createBufferInfoFromArrays(gl, d)
)
{
const uniforms = {
asp: useAspectRatio ? gl.canvas.width / gl.canvas.height : 1
};
//const request = requestAnimationFrame(
// function render(time) {
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);
// });
// requestAnimationFrame(render);
});
//invalidation.then(() => cancelAnimationFrame(request));
return gl.canvas;
}
md`### External Libraries`
m4 = twgl.m4
twgl = require("twgl.js")
require.resolve("twgl.js")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.