CubeMap - Six square images all around a point, the world far away: what reflective surfaces reflect as
render3D.environment, and the sky as render3D.skyBox
- makeCubeMap paints one from a function of direction, loadCubeMap loads six images
- Made with no faces it is drawn from the scene: capture(pos3D) draws everything around that point into it in the
next frame's 3D pass, six views of the whole scene, so capture once for a still scene or now and then for one
that moves
- Its faces are in WebGL's order and lay out, +x, -x, +y, -y, +z, -z: WebGL's cube is left handed, so in this right
handed world a face seen from the middle is mirrored; loadCubeMap turns a sky box set's images to it
Make a cube map from its six faces, as makeCubeMap and loadCubeMap do, or with none to capture the scene into
size numberPixels a side of each face
faces Array<(Uint8Array|HTMLImageElement|HTMLCanvasElement|ImageBitmap|OffscreenCanvas)> optional+x, -x,
+y, -y, +z and -z, RGBA pixels row by row or images; none for a cube map drawn by capture
render3D.environment = render3D.skyBox = makeCubeMap(64, (d)=> hsl(.6, .8, .4 + d.y * .4));
// a chrome ball that reflects the scene around it, captured once
const ball = new EngineObject3D(vec3(0, 1, 0), render3D.sphereMesh, undefined, BLACK);
ball.reflectivity = 1;
ball.shininess = 1e4;
render3D.environment = new CubeMap(128);
render3D.environment.capture(ball.pos3D);
Where it was last captured from, and is captured from again after a lost
context
faces : Array<(Uint8Array|HTMLImageElement|HTMLCanvasElement|ImageBitmap|OffscreenCanvas)>|undefinedrender3d.js:2051Its faces, kept to upload again after a lost context, undefined for one drawn by capture
Pixels a side of each face
Draw the scene around a point into a cube map made with no faces, in the next frame's 3D pass
- Every object of the layer render3D.renderAfter2D picks is drawn, with the sky and the render callbacks; the
camera's near and far planes, the lights and the fog are the scene's
- It is six more draws of the scene, so capture once for a still scene, or every few frames for a moving one
- A closed mesh around the point, like the ball that reflects it, is not seen from inside, so it hides nothing
- While it is drawn, what would reflect it reflects the sky's colors in its place
- It is seen from one point, so it suits what is near that point best, give each mirror its own with
obj.environment
pos3D Vector3The point it is seen from
Free its texture, which is made again if it is used after
LittleJS