Public
Edited
Aug 15, 2023
Insert cell
Insert cell
Insert cell
gl = {
const myCanvas = DOM.canvas(900, 600);
const gl = myCanvas.getContext("webgl2");
return gl;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
modelExtents = computeModelExtent(modelObject)
Insert cell
Insert cell
Insert cell
shiftLeftMatrix = {
const mat = m4.translation([-modelExtents.dia/2, 0, 0]);
return mat;
}
Insert cell
shiftRightMatrix = {
const mat = m4.translation([modelExtents.dia/2, 0, 0]);
return mat;
}
Insert cell
## Camera Matrices
Insert cell
Insert cell
Insert cell
Insert cell
## Buffers
Insert cell
bufferInfoArray = vertexAttributes.map((d)=>twgl.createBufferInfoFromArrays(gl, d));
Insert cell
## Light Computation
Insert cell
lightPosition = {
const D = (lightParameters.distanceFactor) / 2;
return v3.add(target, v3.mulScalar(lightDirection, D));
}
Insert cell
lightDirection = m4.transformDirection(
m4.rotationZ(toRadian(lightParameters.orientation)),
[0, 1, 0]
)
Insert cell
Insert cell
shaders = {
const vs = `#version 300 es
in vec3 position; // Attribute
in vec3 normal; // Attribute

uniform mat4 shiftMatrix;

uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projMatrix;
uniform float aspect;

out vec3 fragPosition;
out vec3 fragNormal;

uniform vec3 offsets[3];

void main(){
vec4 newPos = modelMatrix*shiftMatrix*vec4(position,1);
fragPosition = newPos.xyz;
gl_Position = projMatrix*viewMatrix*newPos;

mat4 normalMatrix = transpose(inverse(modelMatrix));
fragNormal = (normalMatrix * vec4(normal, 0.0) ).xyz;

}`;
const fs = `#version 300 es
precision mediump float;

out vec4 outColor;

in vec3 fragPosition;
in vec3 fragNormal;

uniform int instanceID;

uniform vec4 lightPosOrDir;
uniform vec3 eyePosition;
uniform vec3 materialColor;
uniform float ambientIntensity;
uniform vec3 specularColor;
uniform float shininess;
uniform float K_s;
void main(){
vec3 N = normalize(fragNormal);
vec3 L;
if (lightPosOrDir.w==0.0){
L = normalize(lightPosOrDir.xyz);
}
else{
L = normalize(lightPosOrDir.xyz-fragPosition);
}
vec3 V = normalize(eyePosition-fragPosition);
vec3 H = normalize(L+V);
vec3 ambient = ambientIntensity*materialColor;
vec3 diffuse = materialColor * clamp(dot(L,N), 0.0, 1.0);
vec3 specular = specularColor * pow(clamp(dot(H,N),0.0, 1.0), shininess);

vec3 color = (1.-K_s)*diffuse + K_s*specular + ambient;
outColor = vec4(color, 1);
if (instanceID == 0)
{
//outColor = vec4(L, 1.0);
outColor = vec4(diffuse, 1.0);
}
else if (instanceID == 1)
{
outColor = vec4(specular, 1.0);
}
else if (instanceID == 2)
{
outColor = vec4(color, 1.0);
}
else
{
vec3 N = abs(normalize(fragNormal));
outColor = vec4(N, 1.0);
}
}`;
return [vs, fs];
}
Insert cell
errorBlock = html`<textarea style="height : 20px; width : ${width}px; font-size: 0.8em; display: block"></textarea>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
gl.useProgram(programInfo.program);

gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.clearColor(...hex2rgb(sceneParameters.color),1.0);

render(shiftLeftMatrix, 0);
render(m4.identity(), 1);
render(shiftRightMatrix, 2);
return gl.canvas;
}
Insert cell
function render(shiftMatrix, instanceID){
const uniforms = {
shiftMatrix: shiftMatrix,
modelMatrix: modelMatrix,
viewMatrix: viewMatrix,
projMatrix: projMatrix,
lightPosOrDir: lightParameters.lightType == "point"? [...lightPosition, 1] : [...lightDirection, 0],
eyePosition: m4.inverse(viewMatrix).slice(12, 15),

materialColor: hex2rgb(misc.materialColor),
ambientIntensity: misc.ambient / 100,
specularColor: hex2rgb(specularProperty.specularColor),
shininess: specularProperty.shininess,
K_s: specularProperty.K_s,

instanceID: instanceID
};
twgl.setUniforms(programInfo, uniforms);
bufferInfoArray.forEach((bufferInfo)=> {
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.drawBufferInfo(gl, bufferInfo, gl.TRIANGLES, bufferInfo.numElements);
}
);

}
Insert cell
Insert cell
toRadian = glMatrix.glMatrix.toRadian
Insert cell
Insert cell
twgl = require("twgl.js")
Insert cell
m4 = twgl.m4
Insert cell
v3 = twgl.v3
Insert cell
require.resolve("twgl.js")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more