Nose Picking Mechanisms

    three-skybox

    0.0.2 • Public • Published

    SkyBox

    stable

    NPM

    A self contained class for drawing a skybox. 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 );
    

    Constructor

    • SkyBox( renderer:[ THREE.WebGLRenderer ] , (opt) cubemap:[ THREE.TextureCube ] )

      The renderer is required for construction, the cubemap can be assigned later.

    Properties

    • cubemap:[ THREE.TextureCube ]

      the cubemap currently assigned to the skybox

    Methods

    • void render( camera:[THREE.Camera] )

      renders the skybox to the window frame buffer, call it before rendering the main scene

    Install

    $ npm install three-skybox
    

    Usage

     
    var SkyBox = require('three-skybox')(THREE);
     
    var skybox = new SkyBox( renderer , myTextureCube );
     
     
    function render(){
     
        skybox.render( camera );
     
        renderer.render( scene , camera )
     
    }

    Install

    npm i three-skybox

    DownloadsWeekly Downloads

    6

    Version

    0.0.2

    License

    MIT

    Last publish

    Collaborators

    • pailhead