#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)
  }