{
gl.viewport(0, 0, canvasWidth, canvasHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
renderLight();
renderScene(false);
if (receiver.shadowed) renderShadow();
if (misc.showReceiver) {
renderReceiver(1);
}
if (misc.skyboxFlag) renderSkybox();
return gl.canvas;
}
renderShadow = () => {
if (misc.stencilFlag) {
gl.clearStencil(0);
gl.clear(gl.STENCIL_BUFFER_BIT);
setMaskingParameters(1);
renderReceiver(1);
setStencilingParameters(1);
//Render with stencil testing
}
renderScene(true);
if (misc.stencilFlag) setDefaultParameters(); // Undo all that was done to do stenciling.
}
md`### Variables and Functions`
setStencilingParameters = (ref) => {
// drawMask function from https://observablehq.com/@esperanc/stencil-buffer
gl.enable(gl.STENCIL_TEST);
gl.stencilFunc(
gl.EQUAL, // the test
ref, // reference value
0xff // mask
);
gl.stencilOp(
gl.KEEP, // what to do if the stencil test fails
gl.KEEP, // what to do if the depth test fails
gl.KEEP // what to do if both tests pass
);
gl.colorMask(true, true, true, true);
gl.depthMask(true);
}
setDefaultParameters = () => {
gl.disable(gl.STENCIL_TEST);
gl.enable(gl.DEPTH_TEST);
gl.colorMask(true, true, true, true);
gl.depthMask(true);
}
modelObj = raymanObj //houseObj //boyObj //
projectionMatrix = getProjectionMatrix(fov_Y, near, far)
fov_Y = 45
near = 0.1
far = 5
aspect = canvasWidth/canvasHeight
deg2rad = (deg) => (Math.PI * deg) / 180
modelDim = computeModelExtent(modelObj)
mutable debug = 0
textureURL = FileAttachment("Rayman.png").url()
textureImg = FileAttachment("Rayman.png").image()
renderScene = (shadowFlag) => {
const eyePosition = m4.inverse(viewMatrix).slice(12, 15);
const uniforms = {
modelMatrix: m4.identity(),
eyePosition,
lightPosition,
tex,
viewMatrix: viewMatrix,
projectionMatrix: projectionMatrix,
shadowFlag: shadowFlag,
planeNormal: receiverNormal,
Q: receiverCenter
};
mutable debug = uniforms;
gl.useProgram(sceneProgramInfo.program);
twgl.setUniforms(sceneProgramInfo, uniforms);
sceneBufferInfoArray.forEach((bufferInfo) => {
twgl.setBuffersAndAttributes(gl, sceneProgramInfo, bufferInfo);
twgl.drawBufferInfo(gl, bufferInfo);
});
}
renderReceiver = (alpha) => {
const eyePosition = m4.inverse(viewMatrix).slice(12, 15);
const uniforms = {
modelMatrix: receiverRotationMatrix, //m4.identity(),
eyePosition,
viewMatrix: viewMatrix,
projectionMatrix: projectionMatrix,
lightPosition,
planeNormal: receiverNormal,
alpha
};
gl.useProgram(receiverProgramInfo.program);
twgl.setUniforms(receiverProgramInfo, uniforms);
twgl.setBuffersAndAttributes(gl, receiverProgramInfo, receiverBufferInfo);
twgl.drawBufferInfo(gl, receiverBufferInfo);
}
cubemapImages = cubeimagesCroppedFromHCrossShape(cubemapurl, 512)
receiverSize = modelDim.dia
md`### Shaders and ProgramInfo`
import { image_from_URL } from "@spattana/webgl-texturing-using-twgl"
import { hex2rgb } from "@spattana/cap-4720-introduction-to-observable"
v3 = twgl.v3
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.
