Update ThreeJS to v105 (#4151)

* update three-js to v105

* update threejs to v106

Author: daniel-wer

frontend/javascripts/oxalis/shaders/main_data_fragment.glsl.js

@@ -162,10 +162,8 @@ void main() {
   // Get Color Value(s)
   vec3 data_color = vec3(0.0);
   vec3 color_value  = vec3(0.0);
-  float fallbackZoomStep;
   <% _.each(colorLayerNames, function(name, layerIndex){ %>
 
-    fallbackZoomStep = min(<%= name %>_maxZoomStep, zoomStep + 1.0);
     // Get grayscale value for <%= name %>
     color_value =
       getMaybeFilteredColorOrFallback(
@@ -186,8 +184,8 @@ void main() {
     <% } else { %>
 
       // Keep the color in bounds of min and max
-      color_value = clamp(color_value, <%= name %>_min, <%= name %>_max); 
-      // Scale interval between min and max up to interval from 0 to 255 
+      color_value = clamp(color_value, <%= name %>_min, <%= name %>_max);
+      // Scale interval between min and max up to interval from 0 to 255
       color_value = (color_value - <%= name %>_min) / (<%= name %>_max - <%= name %>_min);
     <% } %>
 

frontend/javascripts/oxalis/view/rendering_utils.js

@@ -21,8 +21,11 @@ export const setupRenderArea = (
   viewportHeight: number,
   color: number,
 ) => {
-  renderer.setViewport(x, y, viewportWidth, viewportHeight);
-  renderer.setScissor(x, y, viewportWidth, viewportHeight);
+  // In WebGLRenderer.setViewport() and WebGLRenderer.setScissor()
+  // (x, y) is the coordinate of the lower left corner of the rectangular region.
+  const overallHeight = renderer.domElement.height;
+  renderer.setViewport(x, overallHeight - y - viewportHeight, viewportWidth, viewportHeight);
+  renderer.setScissor(x, overallHeight - y - viewportHeight, viewportWidth, viewportHeight);
   renderer.setScissorTest(true);
   renderer.setClearColor(color, 1);
 };
@@ -47,7 +50,7 @@ export function renderToTexture(
   width = Math.round(width);
   height = Math.round(height);
 
-  renderer.setViewport(0, 0, width, height);
+  renderer.setViewport(0, 0 + height, width, height);
   renderer.setScissorTest(false);
   renderer.setClearColor(0x000000, 1);
 
@@ -58,8 +61,10 @@ export function renderToTexture(
     // $FlowFixMe plane cannot be arbitraryViewport
     SceneController.updateSceneForCam(plane);
   }
-  renderer.render(scene, camera, renderTarget);
+  renderer.setRenderTarget(renderTarget);
+  renderer.render(scene, camera);
   renderer.readRenderTargetPixels(renderTarget, 0, 0, width, height, buffer);
+  renderer.setRenderTarget(null);
   return buffer;
 }
 

package.json

@@ -177,7 +177,7 @@
     "react-virtualized": "^9.20.1",
     "redux": "^3.6.0",
     "redux-saga": "^1.0.0",
-    "three": "^0.87.0",
+    "three": "^0.106.0",
     "tween.js": "^16.3.1",
     "url-join": "^4.0.0",
     "whatwg-fetch": "^1.1.0",

yarn.lock

@@ -11808,10 +11808,10 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-three@^0.87.0:
-  version "0.87.1"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.87.1.tgz#466a34edc4543459ced9b9d7d276b65216fe2ba8"
-  integrity sha1-Rmo07cRUNFnO2bnX0na2Uhb+K6g=
+three@^0.106.0:
+  version "0.106.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.106.0.tgz#dacd023c2cd1381e566d8561a226ba97b2fcb45f"
+  integrity sha512-fUMDenzhJDf+DNLPrQqDTbVYbXb/2Q4Y4EDBsDORS3UIR9GairCpFXzn9uOq+htVyagJGBsBpx8eyKQeXs/9YQ==
 
 through2-filter@^3.0.0:
   version "3.0.0"