{
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`
setMaskingParameters = (ref) => {
// drawMask function from https://observablehq.com/@esperanc/stencil-buffer
gl.enable(gl.STENCIL_TEST);
gl.stencilFunc(
gl.ALWAYS, // the test
ref, // reference value
0xff // mask
);
gl.stencilOp(
gl.REPLACE, // what to do if the stencil test fails
gl.REPLACE, // what to do if the depth test fails
gl.REPLACE // what to do if both tests pass
);
gl.colorMask(false, false, false, false);
gl.enable(gl.DEPTH_TEST);
gl.depthMask(false);
}
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);
}
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.
