gl = {
const myCanvas = DOM.canvas(800, 600);
const gl = myCanvas.getContext("webgl2");
return gl;
}
vertexAttributes2 = {
const va = [];
for(let i=0;i< modelObject.length;i++)
{
let obj = {
position: {
numComponents : 3,
data : modelObject[i].sc.positions
},
normal: {
numComponents : 3,
data : modelObject[i].sc.normals
}
}
va.push(obj);
}
return va
}
modelExtents = computeModelExtent(modelObject)
modelMatrix = {
const translationMatrix = m4.translation(modelExtents.center.map(x=>-1*x));
const scaleMatrix = m4.scaling(Array(3).fill(scale/modelExtents.dia));
const zRotationMatrix = m4.rotationZ(toRadian(rotationParameters.zAngle));
const yRotationMatrix = m4.rotationY(toRadian(rotationParameters.yAngle));
const xRotationMatrix = m4.rotationX(toRadian(rotationParameters.xAngle));
const rotationMatrixYX = m4.multiply(yRotationMatrix, xRotationMatrix);
const rotationMatrix = m4.multiply(zRotationMatrix, rotationMatrixYX);
let modelMat = m4.multiply(scaleMatrix, translationMatrix);
modelMat = m4.multiply(rotationMatrix, modelMat);
return modelMat;
}
shaders = {
const vs = `#version 300 es
in vec3 position; // Attribute
in vec3 normal; // Attribute
uniform mat4 modelMatrix;
uniform float aspect;
out vec3 fragNormal;
void main(){
vec4 pos = modelMatrix * vec4(position, 1.0);
gl_Position = vec4(pos.x/aspect, pos.y, pos.z, 1);
mat4 normalMatrix = transpose(inverse(modelMatrix));
fragNormal = (normalMatrix * vec4(normal, 0.0) ).xyz;
}`;
const fs = `#version 300 es
precision mediump float;
in vec3 fragNormal;
out vec4 outColor;
void main(){
vec3 N = abs(normalize(fragNormal));
outColor = vec4(N, 1.0);
//outColor = vec4( 0.5f * ( fragNormal + 1.0f ), 1.0f );
}`;
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;
});
}
{
const uniforms = {
aspect: sceneParameters.useAspectRatio? gl.canvas.width / gl.canvas.height : 1,
modelMatrix: modelMatrix
};
const bufferInfoArray = vertexAttributes.map((d)=>twgl.createBufferInfoFromArrays(gl, d));
gl.useProgram(programInfo.program);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.clearColor(...hex2rgb(sceneParameters.color),1.0);
twgl.setUniforms(programInfo, uniforms);
bufferInfoArray.forEach((bufferInfo)=> {
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
}
);
return gl.canvas;
}
toRadian = glMatrix.glMatrix.toRadian
twgl = require("twgl.js")
m4 = twgl.m4
require.resolve("twgl.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.
