#865-upgrade-three-js

examples/js/gui.js

@@ -105,9 +105,9 @@ NGL.Preferences = function (id, defaultParams) {
     cameraFov: 40,
     cameraType: 'perspective',
     lightColor: 0xdddddd,
-    lightIntensity: 1.0,
+    lightIntensity: 3.14,
     ambientColor: 0xdddddd,
-    ambientIntensity: 0.2,
+    ambientIntensity: 0.63,
     hoverTimeout: 0
   }
 

package.json

@@ -59,7 +59,7 @@
     "science"
   ],
   "devDependencies": {
-    "@babel/preset-env": "^7.17.10",
+    "@babel/preset-env": "^7.23.3",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
@@ -71,13 +71,14 @@
     "@types/offscreencanvas": "^2019.6.4",
     "@types/signals": "1.0.1",
     "@types/sprintf-js": "^1.1.2",
+    "@types/three": "^0.163.0",
     "@yushijinhun/three-minifier-rollup": "^0.3.1",
     "babel-plugin-array-includes": "^2.0.3",
-    "jest": "^28.1.0",
-    "jest-environment-jsdom": "^28.1.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "rollup": "^2.38.5",
     "standard": "^11.0.1",
-    "ts-jest": "^28.0.2",
+    "ts-jest": "^29.1.1",
     "tslib": "^2.3.1",
     "typedoc": "^0.22.15",
     "typescript": "^4.5.4"
@@ -86,6 +87,6 @@
     "chroma-js": "^1.3.7",
     "signals": "^1.0.0",
     "sprintf-js": "^1.1.2",
-    "three": "^0.118.0"
+    "three": "^0.163.0"
   }
 }

src/align/superposition.ts

@@ -219,7 +219,7 @@ class Superposition {
         //update transformation matrices for each assembly
 
         const invertTrasform = new Matrix4()
-        invertTrasform.getInverse(transform)
+        invertTrasform.copy(transform).invert()
 
         const biomolDict = atoms.biomolDict
 

src/buffer/box-buffer.ts

@@ -4,7 +4,7 @@
  * @private
  */
 
-import { BoxBufferGeometry, Vector3, Matrix4 } from 'three'
+import { BoxGeometry, Vector3, Matrix4 } from 'three'
 
 import { BufferRegistry } from '../globals'
 import GeometryBuffer from './geometry-buffer'
@@ -41,7 +41,7 @@ class BoxBuffer extends GeometryBuffer {
   _size: Float32Array
 
   constructor (data: BoxBufferData, params: Partial<BufferParameters> = {}) {
-    super(data, params, new BoxBufferGeometry(1, 1, 1))
+    super(data, params, new BoxGeometry(1, 1, 1))
 
     this.setAttributes(data, true)
   }

src/buffer/buffer.ts

@@ -12,12 +12,14 @@ import {
   BufferGeometry, BufferAttribute,
   UniformsUtils, UniformsLib, Uniform,
   Group, LineSegments, Points, Mesh, Object3D,
-  ShaderMaterial
+  ShaderMaterial,
+  DynamicDrawUsage,
+  StaticDrawUsage
 } from 'three'
 
 import { Log } from '../globals'
 import { createParams, getTypedArray, getUintArray } from '../utils'
-import { GenericColor, NumberArray } from '../types'
+import { GenericColor, TypedArray } from '../types'
 import { getShader, ShaderDefines } from '../shader/shader-utils'
 import { serialArray } from '../math/array-utils'
 import { Picker } from '../utils/picker'
@@ -51,7 +53,7 @@ export type BufferMaterials = 'material'|'wireframeMaterial'|'pickingMaterial'
 
 export interface _BufferAttribute {
   type: 'f'|'v2'|'v3'|'c'
-  value?: NumberArray
+  value?: TypedArray
 }
 
 export type Uniforms = { [k: string]: Uniform|{ value: any } }
@@ -179,13 +181,13 @@ class Buffer {
         emissive: { value: new Color(0x000000) },
         roughness: { value: this.parameters.roughness },
         metalness: { value: this.parameters.metalness },
-        interiorColor: { value: new Color(this.parameters.interiorColor) },
+        interiorColor: { value: new Color(this.parameters.interiorColor).convertSRGBToLinear() },
         interiorDarkening: { value: this.parameters.interiorDarkening },
       },
       UniformsLib.lights
     ])
 
-    this.uniforms.diffuse.value.set(this.parameters.diffuse)
+    this.uniforms.diffuse.value.set(new Color(this.parameters.diffuse).convertSRGBToLinear())
 
     this.pickingUniforms = {
       clipNear: { value: 0.0 },
@@ -255,7 +257,7 @@ class Buffer {
     )
     const nindex = this.geometry.getIndex();
     if (!nindex) { Log.error('Index is null'); return; }
-    nindex.setUsage(this.dynamic ? WebGLRenderingContext.DYNAMIC_DRAW : 0)
+    nindex.setUsage(this.dynamic ? DynamicDrawUsage : StaticDrawUsage)
   }
 
   makeMaterial () {
@@ -273,8 +275,6 @@ class Buffer {
       side: side
     })
     m.vertexColors = true
-    m.extensions.derivatives = true
-    m.extensions.fragDepth = this.isImpostor
 
     const wm = new ShaderMaterial({
       uniforms: this.uniforms,
@@ -302,7 +302,6 @@ class Buffer {
       blending: NoBlending
     })
     pm.vertexColors = true
-    pm.extensions.fragDepth = this.isImpostor
 
     ;(m as any).clipNear = this.parameters.clipNear
     ;(wm as any).clipNear = this.parameters.clipNear
@@ -326,7 +325,7 @@ class Buffer {
     wireframeGeometry.attributes = geometry.attributes
     if (wireframeIndex) {
       wireframeGeometry.setIndex(
-        new BufferAttribute(wireframeIndex, 1).setUsage(this.dynamic ? WebGLRenderingContext.DYNAMIC_DRAW : 0)
+        new BufferAttribute(wireframeIndex, 1).setUsage(this.dynamic ? DynamicDrawUsage : StaticDrawUsage)
       )
       wireframeGeometry.setDrawRange(0, this.wireframeIndexCount)
     }
@@ -441,7 +440,7 @@ class Buffer {
     if (this.wireframeGeometry.index &&
         this.wireframeIndex.length > this.wireframeGeometry.index.array.length) {
       this.wireframeGeometry.setIndex(
-        new BufferAttribute(this.wireframeIndex, 1).setUsage(this.dynamic ? WebGLRenderingContext.DYNAMIC_DRAW : 0)
+        new BufferAttribute(this.wireframeIndex, 1).setUsage(this.dynamic ? DynamicDrawUsage : StaticDrawUsage)
       )
     } else {
       const index = this.wireframeGeometry.getIndex()
@@ -593,7 +592,7 @@ class Buffer {
 
       this.geometry.setAttribute(
         name,
-        new BufferAttribute(buf, itemSize[ a.type ]).setUsage(this.dynamic ? WebGLRenderingContext.DYNAMIC_DRAW : 0)
+        new BufferAttribute(buf, itemSize[ a.type ]).setUsage(this.dynamic ? DynamicDrawUsage : StaticDrawUsage)
       )
     }
   }
@@ -720,11 +719,10 @@ class Buffer {
         if (length > index.array.length) {
           geometry.setIndex(
             new BufferAttribute(array, 1)
-              .setUsage(this.dynamic ? WebGLRenderingContext.DYNAMIC_DRAW : 0)
+              .setUsage(this.dynamic ? DynamicDrawUsage : StaticDrawUsage)
           )
         } else {
           index.set(array)
-          index.count = length
           index.needsUpdate = length > 0
           index.updateRange.count = length
           geometry.setDrawRange(0, length)
@@ -739,7 +737,7 @@ class Buffer {
           geometry.setAttribute(
             name,
             new BufferAttribute(array, attribute.itemSize)
-              .setUsage(this.dynamic ? WebGLRenderingContext.DYNAMIC_DRAW : 0)
+              .setUsage(this.dynamic ? DynamicDrawUsage : StaticDrawUsage)
           )
         } else {
           attributes[ name ].set(array)

src/buffer/cone-buffer.ts

@@ -4,7 +4,7 @@
  * @private
  */
 
-import { Matrix4, Vector3, ConeBufferGeometry } from 'three'
+import { Matrix4, Vector3, ConeGeometry } from 'three'
 
 import { BufferRegistry } from '../globals'
 import { defaults } from '../utils'
@@ -18,7 +18,7 @@ const target = new Vector3()
 const up = new Vector3(0, 1, 0)
 
 function getGeo (params: Partial<ConeBufferParameters> = {}) {
-  const geo = new ConeBufferGeometry(
+  const geo = new ConeGeometry(
     1,  // radius
     1,  // height
     defaults(params.radialSegments, 60),  // radialSegments

src/buffer/cylindergeometry-buffer.ts

@@ -4,7 +4,7 @@
  * @private
  */
 
-import { Matrix4, Vector3, CylinderBufferGeometry } from 'three'
+import { Matrix4, Vector3, CylinderGeometry } from 'three'
 
 import { defaults } from '../utils'
 import { calculateCenterArray, serialBlockArray } from '../math/array-utils'
@@ -47,7 +47,7 @@ function getGeo (params: Partial<CylinderGeometryBufferParameters> = {}) {
   const openEnded = defaults(params.openEnded, true)
   const matrix = new Matrix4().makeRotationX(Math.PI / 2)
 
-  const geo = new CylinderBufferGeometry(
+  const geo = new CylinderGeometry(
     1,  // radiusTop,
     1,  // radiusBottom,
     1,  // height,

src/buffer/ellipsoid-buffer.ts

@@ -4,7 +4,7 @@
  * @private
  */
 
-import { IcosahedronBufferGeometry, Vector3, Matrix4 } from 'three'
+import { IcosahedronGeometry, Vector3, Matrix4 } from 'three'
 
 import { BufferRegistry } from '../globals'
 import { defaults } from '../utils'
@@ -50,7 +50,7 @@ class EllipsoidBuffer extends GeometryBuffer {
   _radius: Float32Array
 
   constructor (data: EllipsoidBufferData, params: Partial<EllipsoidBufferParameters> = {}) {
-    super(data, params, new IcosahedronBufferGeometry(1, defaults(params.sphereDetail, 2)))
+    super(data, params, new IcosahedronGeometry(1, defaults(params.sphereDetail, 2)))
 
     this.setAttributes(data, true)
   }

src/buffer/octahedron-buffer.ts

@@ -4,7 +4,7 @@
  * @private
  */
 
-import { OctahedronBufferGeometry, Vector3, Matrix4 } from 'three'
+import { OctahedronGeometry, Vector3, Matrix4 } from 'three'
 import { BufferRegistry } from '../globals'
 import GeometryBuffer from './geometry-buffer'
 import { BufferData, BufferParameters } from './buffer'
@@ -40,7 +40,7 @@ class OctahedronBuffer extends GeometryBuffer {
   _size: Float32Array
 
   constructor (data: OctahedronBufferData, params: Partial<BufferParameters> = {}) {
-    super(data, params, new OctahedronBufferGeometry(1, 0))
+    super(data, params, new OctahedronGeometry(1, 0))
 
     this.setAttributes(data, true)
   }

src/buffer/point-buffer.ts

@@ -84,7 +84,7 @@ const PointBufferParameterTypes = Object.assign({
   pointSize: { uniform: 'size' },
   sizeAttenuation: { updateShader: true },
   sortParticles: {},
-  alphaTest: { updateShader: true },
+  alphaTest: { uniform: true },
   useTexture: { updateShader: true },
   forceTransparent: {},
   edgeBleach: { uniform: true }
@@ -123,7 +123,8 @@ class PointBuffer extends Buffer {
       'size': { value: this.parameters.pointSize },
       'canvasHeight': { value: 1.0 },
       'pixelRatio': { value: 1.0 },
-      'map': { value: null }
+      'map': { value: null },
+      'alphaTest': {value: this.parameters.alphaTest}
     })
   }
 
@@ -163,7 +164,7 @@ class PointBuffer extends Buffer {
     }
 
     if (this.parameters.alphaTest > 0 && this.parameters.alphaTest <= 1) {
-      defines.ALPHATEST = this.parameters.alphaTest.toPrecision(2)
+      defines.USE_ALPHATEST = 1
     }
 
     return defines

src/buffer/spheregeometry-buffer.ts

@@ -4,7 +4,7 @@
  * @private
  */
 
-import { IcosahedronBufferGeometry, Vector3, Matrix4 } from 'three'
+import { IcosahedronGeometry, Vector3, Matrix4 } from 'three'
 import { defaults } from '../utils'
 import GeometryBuffer from './geometry-buffer'
 import { SphereBufferData } from './sphere-buffer'
@@ -42,7 +42,7 @@ class SphereGeometryBuffer extends GeometryBuffer {
    * @param {BufferParameters} params - parameter object
    */
   constructor (data: SphereBufferData, params: Partial<SphereGeometryBufferParameters> = {}) {
-    super(data, params, new IcosahedronBufferGeometry(1, defaults(params.sphereDetail, 1)))
+    super(data, params, new IcosahedronGeometry(1, defaults(params.sphereDetail, 1)))
 
     this.setAttributes(data, true)
   }

src/buffer/tetrahedron-buffer.ts

@@ -4,7 +4,7 @@
  * @private
  */
 
-import { TetrahedronBufferGeometry, Vector3, Matrix4 } from 'three'
+import { TetrahedronGeometry, Vector3, Matrix4 } from 'three'
 import { BufferRegistry } from '../globals'
 import GeometryBuffer from './geometry-buffer'
 import { BufferData, BufferParameters } from './buffer'
@@ -40,7 +40,7 @@ class TetrahedronBuffer extends GeometryBuffer {
   _size: Float32Array
 
   constructor (data: TetrahedronBufferData, params: Partial<BufferParameters> = {}) {
-    super(data, params, new TetrahedronBufferGeometry(1, 0))
+    super(data, params, new TetrahedronGeometry(1, 0))
 
     this.setAttributes(data, true)
   }

src/buffer/text-buffer.ts

@@ -101,7 +101,7 @@ export class TextAtlas {
     canvas.width = maxWidth
     canvas.height = lineHeight
 
-    const ctx = this.context = this.canvas.getContext('2d')!
+    const ctx = this.context = this.canvas.getContext('2d', { willReadFrequently: true})!
     ctx.font = `${p.style} ${p.variant} ${p.weight} ${p.size}px ${p.font}`
     ctx.fillStyle = 'black'
     ctx.textAlign = 'left'
@@ -431,20 +431,17 @@ class TextBuffer extends MappedQuadBuffer {
 
     const m = this.material
     m.transparent = true
-    m.extensions.derivatives = true
     m.lights = false
     m.uniforms.fontTexture.value = tex
     m.needsUpdate = true
 
     const wm = this.wireframeMaterial
     wm.transparent = true
-    wm.extensions.derivatives = true
     wm.lights = false
     wm.uniforms.fontTexture.value = tex
     wm.needsUpdate = true
 
     const pm = this.pickingMaterial
-    pm.extensions.derivatives = true
     pm.lights = false
     pm.uniforms.fontTexture.value = tex
     pm.needsUpdate = true

src/buffer/torus-buffer.ts

@@ -4,7 +4,7 @@
  * @private
  */
 
-import { TorusBufferGeometry, Vector3, Matrix4 } from 'three'
+import { TorusGeometry, Vector3, Matrix4 } from 'three'
 
 import { BufferRegistry } from '../globals'
 import { defaults } from '../utils'
@@ -52,7 +52,7 @@ class TorusBuffer extends GeometryBuffer {
   _radius: Float32Array
 
   constructor (data: TorusBufferData, params: Partial<TorusBufferParameters> = {}) {
-    super(data, params, new TorusBufferGeometry(
+    super(data, params, new TorusGeometry(
       1,
       defaults(params.radiusRatio, 0.2),
       defaults(params.radialSegments, 16),

src/color/atomindex-colormaker.ts

@@ -6,7 +6,7 @@
 
 import { ColormakerRegistry } from '../globals'
 import { defaults } from '../utils'
-import Colormaker, { StuctureColormakerParams, ColormakerScale, manageColor } from './colormaker'
+import Colormaker, { StuctureColormakerParams, ColormakerScale } from './colormaker'
 import AtomProxy from '../proxy/atom-proxy'
 import ModelProxy from '../proxy/model-proxy'
 
@@ -47,7 +47,6 @@ class AtomindexColormaker extends Colormaker {
    * @param  {AtomProxy} atom - atom to get color for
    * @return {Integer} hex atom color
    */
-  @manageColor
   atomColor (atom: AtomProxy) {
     return this.scalePerModel[ atom.modelIndex ](atom.index)
   }