Published
Edited
Oct 11, 2021
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 materialColor = hex2rgb(materialProperty.materialColor);
var difRef =materialProperty.diffuseReflectance ;
const lightType = lightParameters.lightType == "point" ? 1 : 0;
var lightDistance = lightParameters.lightDistance;
const uniforms = {
// Add any required uniform variable name and value pair
modelMatrix: m4.identity(),
materialColor,
lightType,
lightDistance,
difRef,
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
litSceneProgramInfo = {
const vs = `#version 300 es
precision mediump float;
in vec3 position;
in vec3 normal;
out vec4 v_position;
out vec3 fragPosition;
out vec3 vLighting;

uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;
out vec3 fragNormal;
uniform float lightDistance;
uniform int lightType;
void main () {
vec4 newPosition = modelMatrix*vec4(position,1);
fragPosition = newPosition.xyz;
gl_Position = projectionMatrix*viewMatrix*modelMatrix*vec4(position,1);
v_position = projectionMatrix*viewMatrix*modelMatrix*vec4(position,1);
mat4 normalMatrix = transpose(inverse(modelMatrix));
fragNormal = normalize((normalMatrix*vec4(normal,0)).xyz);

vec3 directionalLightColor = vec3(1, 1, 1);
vec3 directionalVector = normalize(vec3(0.85, 0.8, 0.75));
vec3 pointLightColor =vec3(1,1,1);
vec3 pointVector = normalize(vec3(0.55, 0.5, 0.45));

vec4 transformedNormal = normalMatrix * vec4(normal, 1.0);
float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
if(lightType==0){
vec3 ambientLight = vec3(0, 0, 0);
vLighting = ambientLight + (directionalLightColor * directional);
}else{
vec3 ambientLight = vec3(0.3, 0.3, 0.3);
vLighting = ambientLight + (pointLightColor * directional);
}
}`;
const fs = `#version 300 es
precision mediump float;
out vec4 outColor;
in vec3 fragNormal;

in vec4 v_position;
in vec3 vLighting;
in vec3 fragPosition;

uniform vec3 materialColor;
uniform float difRef;
uniform float lightDistance;
void main () {
vec3 N = normalize(fragNormal);
vec3 color = materialColor;//Compute color
outColor = vec4(color*vLighting, difRef);
}`;
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