Published
Edited
Oct 18, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
renderScene = (sceneProgramInfo, viewMatrix, projectionMatrix) => {
gl.useProgram(sceneProgramInfo.program);

const lookAt = m4.inverse(viewMatrix);
const eyePosition = [lookAt[12],lookAt[13],lookAt[14]];
const uniforms = {
modelMatrix: m4.identity(),
materialColor: hex2rgb(misc.materialColor),
ambient: misc.ambient/100,
specularColor: hex2rgb(specularProperty.specularColor),
K_s: specularProperty.K_s,
shininess: specularProperty.shininess,
light:
lightParameters.lightType == "point"
? [...lightPosition, 1]
: [...lightDirection, 0],
eyePosition,
viewMatrix,
projectionMatrix
};
twgl.setUniforms(sceneProgramInfo, uniforms);
sceneBufferInfoArray.forEach((bufferInfo) => {
twgl.setBuffersAndAttributes(gl, sceneProgramInfo, bufferInfo);
twgl.drawBufferInfo(gl, bufferInfo);
});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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 vec3 eyePosition;

uniform vec3 materialColor;

uniform float K_s, shininess, ambient;
uniform vec3 specularColor;

void main () {
vec3 N = normalize(fragNormal);

vec3 L;
if (light.w == 1.) L = normalize(light.xyz - fragPosition);
else L = normalize(light.xyz);

vec3 diffuse = materialColor*clamp(dot(L,N), 0.,1.);

vec3 V = normalize(eyePosition - fragPosition);
vec3 H = normalize(L + V);
vec3 specular = specularColor*pow( clamp(dot(H,N),0.,1.),shininess);

vec3 color = materialColor*ambient + (1.-K_s)*diffuse + K_s*specular;
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;
});
}
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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