fov_Y = cameraParameters.fov_Y
renderScene = (sceneProgramInfo, viewMatrix, projectionMatrix) => {
gl.useProgram(sceneProgramInfo.program);
const eyePosition = m4.inverse(viewMatrix).slice(12, 15);
const uniforms = {
n2c: 0,
modelMatrix: m4.identity(),
eyePosition,
viewMatrix,
projectionMatrix
};
twgl.setUniforms(sceneProgramInfo, uniforms);
sceneBufferInfoArray.forEach((bufferInfo) => {
twgl.setBuffersAndAttributes(gl, sceneProgramInfo, bufferInfo);
twgl.drawBufferInfo(gl, bufferInfo);
});
}
md`** Compute Matrices**`
aspect = canvasWidth / canvasHeight
litSceneProgramInfo = {
if(wow == "Texture Mapping"){
const vs = `#version 300 es
precision mediump float;
in vec3 position;
in vec3 normal;
in vec2 uv;
uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;
out vec3 fragNormal;
out vec3 fragPosition;
out vec2 fragUV;
void main () {
vec4 newPosition = modelMatrix*vec4(position,1);
fragPosition = newPosition.xyz;
gl_Position = projectionMatrix*viewMatrix*newPosition;
mat4 normalMatrix = transpose(inverse(modelMatrix));
fragNormal = normalize((normalMatrix*vec4(normal,0)).xyz);
fragUV = uv;
}`;
const fs = `#version 300 es
precision mediump float;
out vec4 outColor;
in vec3 fragNormal;
in vec3 fragPosition;
in vec2 fragUV;
uniform vec4 light;
uniform vec3 eyePosition;
uniform vec3 materialColor, interiorColor;
uniform float ambientIntensity;
uniform vec3 specularColor;
uniform float shininess;
uniform float K_s;
uniform sampler2D tex;
uniform int wows;
uniform samplerCube cubeMapTex;
void main () {
vec3 N = normalize(fragNormal);
vec3 V = normalize(eyePosition-fragPosition);
vec3 R = reflect(-V,N);
vec3 color = texture(tex,fragUV).rgb;
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;
});
}
else{
const vs = `#version 300 es
precision mediump float;
in vec3 position;
in vec3 normal;
in vec2 uv;
uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;
out vec3 fragNormal;
out vec3 fragPosition;
out vec2 fragUV;
void main () {
vec4 newPosition = modelMatrix*vec4(position,1);
fragPosition = newPosition.xyz;
gl_Position = projectionMatrix*viewMatrix*newPosition;
mat4 normalMatrix = transpose(inverse(modelMatrix));
fragNormal = normalize((normalMatrix*vec4(normal,0)).xyz);
fragUV = uv;
}`;
const fs = `#version 300 es
precision mediump float;
out vec4 outColor;
in vec3 fragNormal;
in vec3 fragPosition;
in vec2 fragUV;
uniform vec4 light;
uniform vec3 eyePosition;
uniform vec3 materialColor, interiorColor;
uniform float ambientIntensity;
uniform vec3 specularColor;
uniform float shininess;
uniform float K_s;
uniform sampler2D tex;
uniform int wows;
uniform samplerCube cubeMapTex;
void main () {
vec3 N = normalize(fragNormal);
vec3 V = normalize(eyePosition-fragPosition);
vec3 R = reflect(-V,N);
vec3 color = texture(cubeMapTex,R).rgb;
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;
});
}
}
cubemapImages = cubeimagesCroppedFromHCrossShape(testurl, 128)
cubeimagesCroppedFromHCrossShape = (url, size) => {
return new Promise(resolve => {
const im = new Image();
im.crossOrigin = "anonymous";
im.src = url;
im.onload = () => {
resolve([[size*2,size],[0,size],[size,0],[size,size*2],[size,size],[size*3,size]].map(xy=>{
const ctx = DOM.context2d(size,size);
ctx.drawImage(im, xy[0], xy[1], size, size, 0, 0, size, size);
return ctx.canvas;
}))
}
})
}
texture = twgl.createTexture(gl, {
// see more info on options from: https://twgljs.org/docs/module-twgl.html#.TextureOptions
// Also see https://twgljs.org/docs/
src: image,
flipY: true,
wrap: gl.REPEAT,
mag: gl.LINEAR,
min: gl.MIPMAP
})
cubeMapTexture = twgl.createTexture(gl, {
target: gl.TEXTURE_CUBE_MAP,
flipY: false,
src: cubemapImages
})
uniforms = ({
tex: texture,
cubeMapTex: cubeMapTexture,
aspectRatio
})
aspectRatio = {
const ar = canvasWidth / canvasHeight;
return ar > 1 ? [ar, 1] : [1, 1 / ar];
}
image = image_from_URL(imageURL)
imageURL = FileAttachment("Rayman.png").url()
testurl = FileAttachment("cubemaps_skybox.png").url()
raymanObj = loadModelFromURL(
await FileAttachment("raymanModel.obj").url(),
"obj"
)
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.
