Published
Edited
Sep 12, 2021
Version2
gl = {
const canvas = DOM.canvas(500, 500);
// or html`<canvas width="378", height="256"></canvas>`
const gl = canvas.getContext("webgl2");
gl.clearColor(0.25, 0.25, 0.25, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);
return gl;
}
md`### Shaders`
shaders = {
const vs = `#version 300 es
in vec3 position; // Attribute
in vec3 normal; // Attribute
uniform vec3 center;
uniform float dia;
uniform float aspect; // Windo aspect ratio: hindow.width/window.height
out vec3 fragNormal; // Variable whose value will be associated with the gl_position.
void main () {
vec3 newPosition = (2./dia) * (position-center);
vec3 finalPosition = vec3(1./aspect, 1., 1.)*newPosition;
gl_Position = vec4(finalPosition, 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];
}
raymanSCs = createSCs(raymanObject)
raymanObject = loadObjObject(rayman_url)
rayman_url =await FileAttachment("rayman_2_mdl.obj").url()
modelExtents = computeModelExtent(raymanSCs)
vertexAttributes = {
const vertexArray = []
for(var i = 0; i < 8; i++)
{
var obj = {position: {numComponents: 3, data: new Float32Array(56880)},
normal: {numComponents: 3, data: new Float32Array(56880)}}
vertexArray.push(obj)
}
return vertexArray
}
bufferInfoArray = vertexAttributes.map((d) =>
twgl.createBufferInfoFromArrays(gl, d)
)
viewof useAspectRatio = Inputs.toggle({ label: "Use Window Aspect Ratio" })
{
yield gl.canvas;
const uniforms = {
aspect: useAspectRatio ? gl.canvas.width / gl.canvas.height : 1,
center: modelExtents.center,
dia: modelExtents.dia
};
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));
}
md`### Useful functions`
loadObjObject = (url)=> loadObject(url, new THREE.OBJLoader())
m4 = twgl.m4
twgl = require("twgl.js")
require.resolve("twgl.js")
vec3 = twgl.v3
THREE = {
const THREE = (window.THREE = await require("three"));
await require("three/examples/js/loaders/ColladaLoader.js").catch(
() => {}
);
await require("three/examples/js/loaders/OBJLoader.js").catch(
() => {}
);
await require("three/examples/js/loaders/STLLoader.js").catch(
() => {}
);
await require("three/examples/js/loaders/GLTFLoader.js").catch(
() => {}
);
await require("three/examples/js/loaders/TDSLoader.js").catch(
() => {}
);
return THREE;
}// require("three/build/three.min.js")
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.
