A self contained class for drawing a skybox for three.js. This feature now exists in three.js (Scene.background) but uses matrices to compute the camera. This one has a slightly different approach, since the cameraPosition is available in shaders as a uniform by default, we can avoid some computation that happens with the backgroundBoxCamera in THREE.WebGLRenderer.
The shader here does one addition and 2 matrix multiplications:
vec4 wp = vec4( position + cameraPosition , 1. );
vViewDir = position; //no normalization
gl_Position = projectionMatrix * viewMatrix * wp;
It probably doesnt really affect anything since the cube has a few vertices, but it saves one multiplication and the normalization at the cost of one addition ( the original has 3 multiplications and a normalization ).
Where it could provide some performance saving is by removing the need for the Scene.background logic. There is no need to copy the properties into a different camera, and no need to obtain the mvp matrix since it already cuts on one multiplication in the shader:
backgroundBoxCamera.projectionMatrix.copy( camera.projectionMatrix ); //no need to copy
backgroundBoxCamera.matrixWorld.extractRotation( camera.matrixWorld ); //these are somewhat expensive operations
backgroundBoxCamera.matrixWorldInverse.getInverse( backgroundBoxCamera.matrixWorld );
backgroundBoxMesh.modelViewMatrix.multiplyMatrices( backgroundBoxCamera.matrixWorldInverse, backgroundBoxMesh.matrixWorld );-
SkyBox( renderer:[ THREE.WebGLRenderer ] , (opt) cubemap:[ THREE.TextureCube ] )
The renderer is required for construction, the cubemap can be assigned later.
-
cubemap:[ THREE.TextureCube ]
the cubemap currently assigned to the skybox
-
void render( camera:[THREE.Camera] )
renders the skybox to the window frame buffer, call it before rendering the main scene
$ npm install three-skybox
var SkyBox = require('three-skybox')(THREE);
var skybox = new SkyBox( renderer , myTextureCube );
function render(){
skybox.render( camera );
renderer.render( scene , camera )
}