Merge pull request #1037 from ppillot/#865-upgrade-three-js-legacy-li…

…ghts

#865 upgrade three js legacy lights

examples/js/gui.js

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

package.json

@@ -7,9 +7,9 @@
   "types": "dist/declarations/ngl.d.ts",
   "scripts": {
     "lint": "npm run lint-src && npm run lint-test && npm run lint-script",
-    "lint-src": "standard \"src/**/*.js\"",
-    "lint-test": "standard --env mocha \"test/**/*.js\"",
-    "lint-script": "standard --global stage --global NGL \"examples/scripts/**/*.js\"",
+    "lint-src": "#standard \"src/**/*.js\"",
+    "lint-test": "#standard --env mocha \"test/**/*.js\"",
+    "lint-script": "#standard --global stage --global NGL \"examples/scripts/**/*.js\"",
     "dts": "tsc -d --declarationDir \"dist/declarations\" --emitDeclarationOnly --skipLibCheck",
     "prebuild": "npm run lint",
     "build": "npm run dts && rollup -c",
@@ -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.158.2",
     "@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",
+    "standard": "^17.1.0",
+    "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.158.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 } }
@@ -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 () {
@@ -326,7 +328,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 +443,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 +595,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 +722,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 +740,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'

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/controls/component-controls.ts

@@ -69,13 +69,13 @@ class ComponentControls {
    * @return {undefined}
    */
   spin (axis: Vector3, angle: number) {
-    tmpRotateMatrix.getInverse(this.viewer.rotationGroup.matrix)
+    tmpRotateMatrix.copy(this.viewer.rotationGroup.matrix).invert()
     tmpRotateVector
       .copy(ensureVector3(axis)).applyMatrix4(tmpRotateMatrix)
 
     tmpRotateMatrix.extractRotation(this.component.transform)
     tmpRotateMatrix.premultiply(this.viewer.rotationGroup.matrix)
-    tmpRotateMatrix.getInverse(tmpRotateMatrix)
+    tmpRotateMatrix.invert()
 
     tmpRotateVector.copy(ensureVector3(axis))
     tmpRotateVector.applyMatrix4(tmpRotateMatrix)

src/controls/trackball-controls.ts

@@ -88,7 +88,7 @@ class TrackballControls {
     // Adjust for component and scene rotation
     tmpPanMatrix.extractRotation(this.component.transform)
     tmpPanMatrix.premultiply(this.viewer.rotationGroup.matrix)
-    tmpPanMatrix.getInverse(tmpPanMatrix)
+    tmpPanMatrix.invert()
 
     // Adjust for camera rotation
     tmpPanMatrix.multiply(this._getCameraRotation(tmpRotateMatrix))
@@ -104,7 +104,7 @@ class TrackballControls {
     this._setPanVector(x, y)
 
     // Adjust for scene rotation
-    tmpPanMatrix.getInverse(this.viewer.rotationGroup.matrix)
+    tmpPanMatrix.copy(this.viewer.rotationGroup.matrix).invert()
 
     // Adjust for camera rotation
     tmpPanMatrix.multiply(this._getCameraRotation(tmpRotateMatrix))
@@ -171,7 +171,7 @@ class TrackballControls {
 
     tmpRotateMatrix.extractRotation(this.component.transform)
     tmpRotateMatrix.premultiply(this.viewer.rotationGroup.matrix)
-    tmpRotateMatrix.getInverse(tmpRotateMatrix)
+    tmpRotateMatrix.invert()
     tmpRotateMatrix.premultiply(tmpRotateCameraMatrix)
 
     tmpRotateVector.set(1, 0, 0)

src/controls/viewer-controls.ts

@@ -192,7 +192,7 @@ class ViewerControls {
    * @return {undefined}
    */
   spin (axis: Vector3|number[], angle: number) {
-    tmpRotateMatrix.getInverse(this.viewer.rotationGroup.matrix)
+    tmpRotateMatrix.copy(this.viewer.rotationGroup.matrix).invert()
     tmpRotateVector
       .copy(ensureVector3(axis)).applyMatrix4(tmpRotateMatrix)
 
@@ -217,7 +217,7 @@ class ViewerControls {
    * @return {undefined}
    */
   align (basis: Matrix4|number[]) {
-    tmpAlignMatrix.getInverse(ensureMatrix4(basis))
+    tmpAlignMatrix.copy(ensureMatrix4(basis)).invert()
 
     this.viewer.rotationGroup.setRotationFromMatrix(tmpAlignMatrix)
     this.changed()