Merge pull request #502 from epam/miew-438

Bump threejs to version 0.153.0
epam · Nov 29, 2023 · e79870b · e79870b
2 parents f669354 + cb6520f
commit e79870b
Show file tree

Hide file tree

Showing 32 changed files with 290 additions and 284 deletions.
diff --git a/packages/lib/examples/api.html b/packages/lib/examples/api.html
@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>
 <body>

diff --git a/packages/lib/examples/empty.html b/packages/lib/examples/empty.html
@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>
 <body>

diff --git a/packages/lib/examples/events.html b/packages/lib/examples/events.html
@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>
 <body>

diff --git a/packages/lib/examples/fullscreen.html b/packages/lib/examples/fullscreen.html
@@ -38,7 +38,7 @@
   </style>
 
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>
 <body>

diff --git a/packages/lib/examples/grid.html b/packages/lib/examples/grid.html
@@ -92,7 +92,7 @@ <h2>Adverse effects</h2>
 
 
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
   <script>
     (function() {

diff --git a/packages/lib/examples/labels.html b/packages/lib/examples/labels.html
@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>
 <body>

diff --git a/packages/lib/examples/load_from_string.html b/packages/lib/examples/load_from_string.html
@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.js"></script>
 </head>
 <body>

diff --git a/packages/lib/examples/miew_via_global.html b/packages/lib/examples/miew_via_global.html
@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>
 <body>

diff --git a/packages/lib/examples/miew_via_require.html b/packages/lib/examples/miew_via_require.html
@@ -15,7 +15,7 @@ <h1>Use Miew via Require.js</h1>
     require.config({
       paths: {
         'lodash': 'https://unpkg.com/lodash@^4.17.15/lodash',
-        'three': 'https://unpkg.com/three@0.125.0/build/three.min',
+        'three': 'https://unpkg.com/three@0.153.0/build/three.min',
       }
     });
     require(['../dist/Miew.min'], function(Miew) {

diff --git a/packages/lib/examples/multiple.html b/packages/lib/examples/multiple.html
@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>
 <body>

diff --git a/packages/lib/examples/options.html b/packages/lib/examples/options.html
@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>
 <body>

diff --git a/packages/lib/examples/options_fromAttr.html b/packages/lib/examples/options_fromAttr.html
@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>
 <body>

diff --git a/packages/lib/examples/options_fromURL.html b/packages/lib/examples/options_fromURL.html
@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>
 <body>

diff --git a/packages/lib/examples/projected.html b/packages/lib/examples/projected.html
@@ -26,7 +26,7 @@
   </style>
 
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>
 <body>

diff --git a/packages/lib/examples/sequence.html b/packages/lib/examples/sequence.html
@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" href="../dist/Miew.min.css">
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
   <style>
     .miew-container {

diff --git a/packages/lib/examples/terminal.html b/packages/lib/examples/terminal.html
@@ -20,7 +20,7 @@
   <script src="https://unpkg.com/jquery@3/dist/jquery.min.js"></script>
   <script src="https://unpkg.com/jquery.terminal@2/js/jquery.terminal.min.js"></script>
   <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-  <script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+  <script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
   <script src="../dist/Miew.min.js"></script>
 </head>
 <body>

diff --git a/packages/lib/examples/transparent_background.html b/packages/lib/examples/transparent_background.html
@@ -35,7 +35,7 @@ <h1>Use transparent background</h1>
 </div>
 
 <script src="https://unpkg.com/lodash@^4.17.15/lodash.js"></script>
-<script src="https://unpkg.com/three@0.125.0/build/three.min.js"></script>
+<script src="https://unpkg.com/three@0.153.0/build/three.min.js"></script>
 <script src="../dist/Miew.min.js"></script>
 <script>
   (function() {

diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -82,7 +82,7 @@
   },
   "dependencies": {
     "lodash": "^4.17.15",
-    "three": "0.125.0"
+    "three": "0.153.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.20",

diff --git a/packages/lib/src/Miew.js b/packages/lib/src/Miew.js
@@ -57,6 +57,10 @@ const EDIT_MODE = { COMPLEX: 0, COMPONENT: 1, FRAGMENT: 2 };
 const LOADER_NOT_FOUND = 'Could not find suitable loader for this source';
 const PARSER_NOT_FOUND = 'Could not find suitable parser for this source';
 
+// Color management changed a lot in threejs 152+ version.
+// To keep miew colors we disable the new color management system
+THREE.ColorManagement.enabled = false;
+
 const { createElement } = utils;
 
 function updateFogRange(fog, center, radius) {

diff --git a/packages/lib/src/gfx/geometries/ChunkedObjectsGeometry.js b/packages/lib/src/gfx/geometries/ChunkedObjectsGeometry.js
@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import * as THREE from 'three';
 import utils from '../../utils';
-import RaycastableBufferGeometry from './RaycastableBufferGeometry';
 
 const MAX_IDC_16BIT = 65535;
 const VEC_SIZE = 3;
@@ -14,7 +13,7 @@ const tmpColor = new THREE.Color();
  * @constructor
  */
 
-class ChunkedObjectsGeometry extends RaycastableBufferGeometry {
+class ChunkedObjectsGeometry extends THREE.BufferGeometry {
   constructor(chunkGeo, chunksCount) {
     super();
 
@@ -66,7 +65,12 @@ class ChunkedObjectsGeometry extends RaycastableBufferGeometry {
 
   raycast(raycaster, intersects) {
     const inters = [];
-    super.raycast(raycaster, inters);
+    // use THREE.Mesh raycasting interface for the Geometry. The Mesh is
+    // created with existed geometry and default material, so it doesn't slowdown.
+    const mesh = new THREE.Mesh();
+    mesh.geometry = this;
+    mesh.raycast(raycaster, inters);
+
     const facesPerChunk = this._chunkGeo.index.count / 3;
     for (let i = 0, n = inters.length; i < n; ++i) {
       if (!inters[i].hasOwnProperty('faceIndex')) {

diff --git a/packages/lib/src/gfx/geometries/CylinderCollisionGeo.js b/packages/lib/src/gfx/geometries/CylinderCollisionGeo.js
@@ -9,7 +9,7 @@ const normMtx = new THREE.Matrix3();
 
 class CylinderCollisionGeo extends ChunkedObjectsGeometry {
   constructor(instanceCount, polyComplexity) {
-    const cylGeometry = new THREE.CylinderBufferGeometry(1, 1, 1.0, Math.max(3, polyComplexity), 2, true);
+    const cylGeometry = new THREE.CylinderGeometry(1, 1, 1.0, Math.max(3, polyComplexity), 2, true);
     super(cylGeometry, instanceCount);
 
     const chunkSize = this._chunkSize;

diff --git a/packages/lib/src/gfx/geometries/Instanced2CCylindersGeometry.js b/packages/lib/src/gfx/geometries/Instanced2CCylindersGeometry.js
@@ -70,7 +70,7 @@ class Instanced2CCylindersGeometry extends THREE.InstancedBufferGeometry {
   constructor(instanceCount, polyComplexity, useZSprites, openEnded) {
     super();
     this._useZSprites = useZSprites;
-    this._cylGeometry = useZSprites ? new THREE.PlaneBufferGeometry(2, 2, 1, 1)
+    this._cylGeometry = useZSprites ? new THREE.PlaneGeometry(2, 2, 1, 1)
       : new CylinderBufferGeometry(1, 1, 1.0, Math.max(3, polyComplexity), 2, openEnded);
     this._init(instanceCount, this._cylGeometry, this._useZSprites);
 

diff --git a/packages/lib/src/gfx/geometries/InstancedSpheresGeometry.js b/packages/lib/src/gfx/geometries/InstancedSpheresGeometry.js
@@ -24,7 +24,7 @@ function setArrayXYZW(arr, idx, x, y, z, w) {
 class InstancedSpheresGeometry extends SphereCollisionGeo(THREE.InstancedBufferGeometry) {
   constructor(spheresCount, sphereComplexity, useZSprites) {
     super(spheresCount);
-    this._sphGeometry = useZSprites ? new THREE.PlaneBufferGeometry(2, 2, 1, 1)
+    this._sphGeometry = useZSprites ? new THREE.PlaneGeometry(2, 2, 1, 1)
       : new THREE.SphereBufferGeometry(1, sphereComplexity * 2, sphereComplexity, 0, Math.PI * 2, 0, Math.PI);
     this._init(spheresCount, this._sphGeometry);
   }

diff --git a/packages/lib/src/gfx/geometries/IsoSurfaceGeometry.js b/packages/lib/src/gfx/geometries/IsoSurfaceGeometry.js
@@ -1,6 +1,5 @@
 import * as THREE from 'three';
 import utils from '../../utils';
-import RaycastableBufferGeometry from './RaycastableBufferGeometry';
 
 const POS_RAD_SIZE = 4;
 const COLOR_SIZE = 3;
@@ -12,7 +11,7 @@ const tmpColor = new THREE.Color();
  * @param opts - geometry specific options
  * @constructor
  */
-class IsoSurfaceGeometry extends RaycastableBufferGeometry {
+class IsoSurfaceGeometry extends THREE.BufferGeometry {
   constructor(spheresCount, opts) {
     super();
 

diff --git a/packages/lib/src/gfx/geometries/Simple2CCylindersGeometry.js b/packages/lib/src/gfx/geometries/Simple2CCylindersGeometry.js
@@ -10,7 +10,7 @@ const normMtx = new THREE.Matrix3();
 
 class Simple2CCylindersGeometry extends ChunkedObjectsGeometry {
   constructor(instanceCount, polyComplexity) {
-    const cylGeometry = new THREE.CylinderBufferGeometry(1, 1, 1.0, Math.max(3, polyComplexity), 2, true);
+    const cylGeometry = new THREE.CylinderGeometry(1, 1, 1.0, Math.max(3, polyComplexity), 2, true);
     super(cylGeometry, 2 * instanceCount);
 
     const chunkSize = this._chunkSize;

diff --git a/packages/lib/src/gfx/gfxutils.js b/packages/lib/src/gfx/gfxutils.js
@@ -48,7 +48,7 @@ THREE.WebGLRenderer.prototype.renderDummyQuad = (function () {
   const _material = new THREE.MeshBasicMaterial({ transparent: true, opacity: 0.0, depthWrite: false });
 
   const _scene = new THREE.Scene();
-  const _quad = new THREE.Mesh(new THREE.PlaneBufferGeometry(0.01, 0.01), _material);
+  const _quad = new THREE.Mesh(new THREE.PlaneGeometry(0.01, 0.01), _material);
   _scene.add(_quad);
 
   const _camera = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5, -10000, 10000);
@@ -61,7 +61,7 @@ THREE.WebGLRenderer.prototype.renderDummyQuad = (function () {
 
 THREE.WebGLRenderer.prototype.renderScreenQuad = (function () {
   const _scene = new THREE.Scene();
-  const _quad = new THREE.Mesh(new THREE.PlaneBufferGeometry(1.0, 1.0));
+  const _quad = new THREE.Mesh(new THREE.PlaneGeometry(1.0, 1.0));
   _scene.add(_quad);
 
   const _camera = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5, -10000, 10000);
@@ -301,7 +301,7 @@ function _buildDistorionMesh(widthSegments, heightSegements, coef) {
     return 1.0 / dr;
   }
 
-  const geo = new THREE.PlaneBufferGeometry(2.0, 2.0, widthSegments, heightSegements);
+  const geo = new THREE.PlaneGeometry(2.0, 2.0, widthSegments, heightSegements);
 
   const pos = geo.getAttribute('position');
   for (let i = 0; i < pos.count; ++i) {

diff --git a/packages/lib/src/gfx/noiseTexture.js b/packages/lib/src/gfx/noiseTexture.js
@@ -3,10 +3,10 @@ import * as THREE from 'three';
 const noiseWidth = 4;
 const noiseHeight = 4;
 const _noiseData = new Uint8Array([
-  24, 52, 0, 254, 145, 0, 122, 0, 0, 7, 170, 0,
-  34, 214, 0, 173, 8, 0, 86, 249, 0, 160, 4, 0,
-  226, 46, 0, 224, 211, 0, 3, 157, 0, 174, 247, 0,
-  12, 182, 0, 220, 216, 0, 1, 109, 0, 253, 154, 0,
+  24, 52, 0, 255, 254, 145, 0, 255, 122, 0, 0, 255, 7, 170, 0, 255,
+  34, 214, 0, 255, 173, 8, 0, 255, 86, 249, 0, 255, 160, 4, 0, 255,
+  226, 46, 0, 255, 224, 211, 0, 255, 3, 157, 0, 255, 174, 247, 0, 255,
+  12, 182, 0, 255, 220, 216, 0, 255, 1, 109, 0, 255, 253, 154, 0, 255,
 ]);
 const _noiseWrapS = THREE.RepeatWrapping;
 const _noiseWrapT = THREE.RepeatWrapping;
@@ -17,7 +17,7 @@ const noiseTexture = new THREE.DataTexture(
   _noiseData,
   noiseWidth,
   noiseHeight,
-  THREE.RGBFormat,
+  THREE.RGBAFormat,
   THREE.UnsignedByteType,
   _noiseMapping,
   _noiseWrapS,

diff --git a/packages/lib/src/gfx/shaders/Uber.frag b/packages/lib/src/gfx/shaders/Uber.frag
@@ -58,7 +58,6 @@ uniform float clipPlaneValue;
   varying vec3 viewNormal;
 #endif
 
-#define PI 3.14159265359
 #define RECIPROCAL_PI 0.31830988618
 #define saturate(a) clamp( a, 0.0, 1.0 )
 
@@ -447,7 +446,7 @@ float unpackRGBAToDepth( const in vec4 v ) {
       }
     #endif
 
-    vec3 irradiance = dotNL * directLight.color * PI;
+    vec3 irradiance = dotNL * directLight.color;
     reflectedLight.directDiffuse += penumbra * irradiance * BRDF_Diffuse_Lambert( material.diffuseColor );
     reflectedLight.directSpecular += penumbra * irradiance * BRDF_Specular_BlinnPhong( directLight, geometry, material.specularColor, material.specularShininess );
   }
@@ -458,7 +457,7 @@ float unpackRGBAToDepth( const in vec4 v ) {
 
   vec3 calcLighting(const in GeometricContext geometry, const in BlinnPhongMaterial material, vec3 vViewPosition) {
     ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ));
-    vec3 irradiance = ambientLightColor * PI;
+    vec3 irradiance = ambientLightColor;
 
     float shadowMask = 1.0;
     // see THREE.WebGLProgram.unrollLoops