Published
Edited
Oct 11, 2021
renderScene = (sceneProgramInfo, viewMatrix, projectionMatrix) => {
gl.useProgram(sceneProgramInfo.program);
const material = [...hex2rgb(materialProperty.materialColor), materialProperty.diffuseReflectance];
const light = lightParameters.lightType=="point" ? [...lightPosition,1] : [...lightDirection,0];
const uniforms = {
// Add any required uniform variable name and value pair
modelMatrix: m4.identity(),
light,
material,
viewMatrix,
projectionMatrix
};
twgl.setUniforms(sceneProgramInfo, uniforms);
sceneBufferInfoArray.forEach((bufferInfo) => {
twgl.setBuffersAndAttributes(gl, sceneProgramInfo, bufferInfo);
twgl.drawBufferInfo(gl, bufferInfo);
});
}
litSceneProgramInfo = {
const vs = `#version 300 es
precision mediump float;
in vec3 position;
in vec3 normal;
uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;
out vec3 fragNormal;
out vec3 fragPosition;
void main () {
vec4 newPosition = modelMatrix*vec4(position,1);
fragPosition = newPosition.xyz;
gl_Position = projectionMatrix*viewMatrix*modelMatrix*vec4(position,1);
mat4 normalMatrix = transpose(inverse(modelMatrix));
fragNormal = normalize((normalMatrix*vec4(normal,0)).xyz);
}`;
const fs = `#version 300 es
precision mediump float;
out vec4 outColor;
in vec3 fragNormal;
in vec3 fragPosition;
uniform vec4 light;
uniform vec4 material;
void main () {
vec3 N = normalize(fragNormal);
vec3 L;
if(light.w==0.){
L = normalize(light.xyz);
}
else{
L = normalize(light.xyz-fragPosition);
}
vec3 color = material.a*material.rgb*clamp(dot(N,L),0.,1.);//Compute color
outColor = vec4(color, 1);
}`;
errorBlock.style.height = "20px";
errorBlock.innerHTML = "Program Shader compilation successful";
return twgl.createProgramInfo(gl, [vs, fs], (message) => {
errorBlock.style.height = "400px";
errorBlock.innerHTML = "Scene Program Shader compilation error\n" + message;
});
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
