Three.js: Viewports Misplaced going from Rev 82 to Rev 89

Question

Using three.js Rev 82 my experimental flight simulator app showed this display (which appears as desired and supports object picking):-

When I altered the app to use three.js Rev 89 there were (pleasingly) zero execution errors but it produced this display (which is wrong due to misplaced viewports and consequent failures in object picking):-

The app uses five (5) rectangular viewports to present graphic data:- (1) An underlying viewport covering whole screen with flat black and blue rectangles; (3) Three mid-level viewports arranged left to right showing views of external world; (1) An overlying "Control Panel" viewport with textboxes, keyboard and buttons.

In going from Rev 82 to Rev 89 that the vertical positions of the mid-level and upper viewports have changed. For example the three "mid-level" viewports have moved from the upper part of the screen to the lower part. And the "Control Panel" viewport - which should be towards the bottom of the screen - has moved to near the top of the screen.

I have looked at the Migration Summary but cannot see any relevant changes. Looking at the Renderer documentation nothing obvious jumps out at me - but there is no revision history therein.

---

The code I am using (to define, update and render viewports) is as follows:-

function F_Render() 
{

    //... Discover the current window dimensions (usable)
    var WINDOW_USABLE_PIXELS_WIDTH = window.innerWidth;
    var WINDOW_USABLE_PIXELS_HEIGHT = window.innerHeight;

    var Fudge = 0;
    var FIXED_DOXELS_WIDTH  = 1024; 
    var FIXED_DOXELS_HEIGHT = 576; 
    var elastic_viewports = false;
    if (elastic_viewports)
        {
            var SLATE_DOXELS_WIDTH  = WINDOW_USABLE_PIXELS_WIDTH  - Fudge;
            var SLATE_DOXELS_HEIGHT = WINDOW_USABLE_PIXELS_HEIGHT - Fudge;
        }
    else
        {
            var SLATE_DOXELS_WIDTH  = FIXED_DOXELS_WIDTH  -Fudge;
            var SLATE_DOXELS_HEIGHT = FIXED_DOXELS_HEIGHT -Fudge;
        }       

    //**** NB SCREEN COORDS ORIGIN IS TOP LEFT CORNER so Y values increase DOWNWARDS *****

    //**** BUT RENDERER VIEWPORT COORDS INCREASE FROM BOTTOM LEFT

    var numMidPanels = 3;
    var mar = Math.floor( SLATE_DOXELS_HEIGHT/16 );   //...careful, changing this has knock-on effects! 
    midPanelX1min = mar;
    var fudge = SLATE_DOXELS_WIDTH*0.06;
    var fudge = 0;

    //...gives a common width value to be used by all mid panels
    var midPanelWidth        = fudge +(1/numMidPanels) * (SLATE_DOXELS_WIDTH - ((numMidPanels+1)* mar)) ;
    var midPanelAverageWidth = fudge +(1/numMidPanels) * (SLATE_DOXELS_WIDTH - ((numMidPanels+1)* mar)) ;

    var midPanelX1_Width = midPanelAverageWidth *2/3;
    var midPanelX2_Width = midPanelAverageWidth *5/3;
    var midPanelX3_Width = midPanelAverageWidth *2/3;

    //---

    var bottomPanelXmin = mar;  
    var bottomPanelYmin = mar;  
    var bottomPanelHeight = (1/3)* (SLATE_DOXELS_HEIGHT - (3*mar)); //...bottom third of screen height
    var bottomPanelWidth = (SLATE_DOXELS_WIDTH - (2*mar));  
    var midPanelHeight = (2/3)* (SLATE_DOXELS_HEIGHT - (3*mar));        
    midPanelX2min = mar + midPanelWidth + mar ;
    midPanelX3min = mar + midPanelWidth + mar + midPanelWidth + mar;    
    midPanelX2min = mar + midPanelX1_Width + mar ;
    midPanelX3min = mar + midPanelX1_Width + mar + midPanelX2_Width + mar;  
    midPanelYmin = mar + bottomPanelHeight + mar;
    midPanelYmax = mar + bottomPanelHeight + mar + midPanelHeight;  

    //... set ASPECT RATIOS

        //... BASE LAYER Scene111
        var BaseLayer_AspectRatio = SLATE_DOXELS_WIDTH/SLATE_DOXELS_HEIGHT;

        //... MIDDLE LAYER Scene222 Middle Panels

        var MidPanelX1_AspectRatio = midPanelX1_Width/midPanelHeight;
        var MidPanelX2_AspectRatio = midPanelX2_Width/midPanelHeight;
        var MidPanelX3_AspectRatio = midPanelX3_Width/midPanelHeight;

        //... TOP LAYER
        var BottomPanel_AspectRatio = bottomPanelWidth/bottomPanelHeight;

    //------------------------------------------------------------------------------------------

    //... do CAMERA UPDATES if required due to recent change
    if ( scene111camera01._SW_needsUpdate == true)
    {
    scene111camera01.aspect = BaseLayer_AspectRatio;
    scene111camera01.updateProjectionMatrix(); //...is this really neccy?
    scene111camera01._SW_needsUpdate = false;
    }

    //... MIDDLE LAYER Scene222 Middle Panels

    if ( scene222camera02._SW_needsUpdate == true)
    {
    scene222camera02.aspect = MidPanelX1_AspectRatio;
    scene222camera02.updateProjectionMatrix();
    scene222camera02._SW_needsUpdate = false;
    }

    if ( scene222camera03._SW_needsUpdate == true)
    {
    scene222camera03.aspect = MidPanelX2_AspectRatio;
    scene222camera03.updateProjectionMatrix();
    scene222camera03._SW_needsUpdate = false;
    }

    if ( scene222camera04._SW_needsUpdate == true)
    {
    scene222camera04.aspect = MidPanelX3_AspectRatio;
    scene222camera04.updateProjectionMatrix();
    scene222camera04._SW_needsUpdate = false;
    }

    //... TOP LAYER (DashBoard) Scene333

    if ( scene333camera05._SW_needsUpdate == true)
    {
    scene333camera05.aspect = BottomPanel_AspectRatio;
    scene333camera05.updateProjectionMatrix();  
    scene333camera05._SW_needsUpdate = false;
    }

    //==========================================================================================================

    //... Clear the entire raster area

    var Control_Panel_Num = 0;
    Renderer_ZERO.setViewport( 0, 0, SLATE_DOXELS_WIDTH, SLATE_DOXELS_HEIGHT );
    Renderer_ZERO.clear();

    //=========================================================================================================

    //... BASE LAYER, scene111  ... Single Panel (viewport)

    Renderer_ZERO.setViewport( 0, 0, SLATE_DOXELS_WIDTH, SLATE_DOXELS_HEIGHT ); 
    Renderer_ZERO.render( scene111, scene111camera01 );

    Control_Panel_Num = Control_Panel_Num+1;

    ObjectPickingActive=true;

    xxx = SOW_F_sim_Update_Panel_Data ( Control_Panel_Num,"BasePlane",0, 0, SLATE_DOXELS_WIDTH, SLATE_DOXELS_HEIGHT , ObjectPickingActive, scene111, scene111camera01  );   


    //===========================================================================================================

    //... MIDDLE LAYER, scene222 ... three panels (view-ports)

    Renderer_ZERO.clearDepth();


    //... MIDDLE LAYER, LEFT PANEL
    //showVP_scene222camera02  = true; //...now set elsewhere

    if (showVP_scene222camera02 == true)
    {
        Renderer_ZERO.setViewport( midPanelX1min, midPanelYmin, midPanelX1_Width , midPanelHeight  );
        Renderer_ZERO.render( scene222, scene222camera02 );

        Control_Panel_Num = Control_Panel_Num+1;
        ObjectPickingActive=true;
        xxx = SOW_F_sim_Update_Panel_Data (Control_Panel_Num,"Middle_Left",midPanelX1min, midPanelYmin, midPanelX1_Width , midPanelHeight, ObjectPickingActive, scene222, scene222camera02  );  
    }

    //... MIDDLE LAYER, CENTRE PANEL

    if (showVP_scene222camera03 == true)
    {
        var midPanelY2min = midPanelYmin  //-150 //*** JUST FOR TESTING ***
        Renderer_ZERO.setViewport( midPanelX2min, midPanelY2min, midPanelX2_Width, midPanelHeight );    
        Renderer_ZERO.render( scene222, scene222camera03 ); 

        Control_Panel_Num = Control_Panel_Num+1;
        ObjectPickingActive=true;
        xxx = SOW_F_sim_Update_Panel_Data (Control_Panel_Num,"Middle_Centre",midPanelX2min, midPanelY2min, midPanelX2_Width, midPanelHeight, ObjectPickingActive, scene222, scene222camera03  );    
    }

    if (showVP_scene222camera04 == true)
    {
        //... MIDDLE LAYER, RIGHT PANEL
        Renderer_ZERO.setViewport( midPanelX3min, midPanelYmin, midPanelX3_Width, midPanelHeight ); 
        Renderer_ZERO.render( scene222, scene222camera04 );     

        Control_Panel_Num = Control_Panel_Num+1;
        ObjectPickingActive=true;
        xxx = SOW_F_sim_Update_Panel_Data (Control_Panel_Num,"Middle_Right",midPanelX3min, midPanelYmin, midPanelX3_Width, midPanelHeight, ObjectPickingActive, scene222, scene222camera04  );  
    }

    //================================================================================================

    //... TOP LAYER Scene333
    //... THIS LAYER CONTAINS BUTTONS WHICH OVERPLOT MID LAYER 
    //... (Multi-renderers only: display stack sequence controlled by html div declaration sequence).
    //... UPPER LAYER (C)
    //   (DASHBOARD) ...BOTTOM STRIP

    //TEST
    //bottomPanelXmin
    //bottomPanelYmin=100; 
    //bottomPanelWidth
    //bottomPanelHeight= 300 ;
    //END TEST

    //TEST makes bottom panel viewport overlap upwards over the middle panels just to demo that we can do this
    // and thus we can stick objects in a high viewport which display in front of objects from a lower viewport
    // but NOTE WELL this only works reliably when VPs are from different scenes/renderers
    // otherwise conflicts can occur.

    var Fudged_bottomPanelHeight=bottomPanelHeight+40;

    Renderer_ZERO.clearDepth();
    Renderer_ZERO.setViewport( bottomPanelXmin, bottomPanelYmin, bottomPanelWidth, Fudged_bottomPanelHeight );  
    Renderer_ZERO.render( scene333, scene333camera05 );

    Control_Panel_Num = Control_Panel_Num+1;
    ObjectPickingActive=true;
    xxx = SOW_F_sim_Update_Panel_Data (Control_Panel_Num,"Bottom_Strip",bottomPanelXmin, bottomPanelYmin, bottomPanelWidth, Fudged_bottomPanelHeight, ObjectPickingActive, scene333, scene333camera05  );   

} //... END OF F_Render

---

I'd be grateful if anyone can suggest what changes in three.js may have caused this problem?

Answer 1

As of r.86, WebGLRenderer.setViewport() and WebGLRenderer.setScissor() assume a coordinate systems where ( 0,0 ) is the top left. Previously, it was bottom left.

three.js r.89