@damienmortini/three 0.1.131

package/material/THREEShaderMaterial.js

@@ -0,0 +1,95 @@
+import { ShaderMaterial } from '../../../three/src/materials/ShaderMaterial.js'
+import { ShaderLib } from '../../../three/src/renderers/shaders/ShaderLib.js'
+import { UniformsUtils } from '../../../three/src/renderers/shaders/UniformsUtils.js'
+import DEFAULT_VERTEX from '../../../three/src/renderers/shaders/ShaderChunk/default_vertex.glsl.js'
+import DEFAULT_FRAGMENT from '../../../three/src/renderers/shaders/ShaderChunk/default_fragment.glsl.js'
+
+import Shader from '../../core/3d/Shader.js'
+
+const toWebGL1 = (source, type) => {
+  source = source.replace(/#version.*?\n/g, '')
+  source = source.replace(/\btexture\b/g, 'texture2D')
+  if (type === 'vertex') {
+    source = source.replace(/(^\s*)\bin\b/gm, '$1attribute')
+    source = source.replace(/(^\s*)\bout\b/gm, '$1varying')
+  } else {
+    source = source.replace(/(^\s*)\bin\b/gm, '$1varying')
+    const results = /out vec4 (.*?);/.exec(source)
+    if (results) {
+      const fragColorName = results[1]
+      source = source.replace(/out.*?;/, '')
+      source = source.replace(new RegExp(`\\b${fragColorName}\\b`, 'g'), 'gl_FragColor')
+    }
+  }
+  return source
+}
+
+export default class THREEShaderMaterial extends ShaderMaterial {
+  constructor({
+    type = '',
+    vertex = undefined,
+    fragment = undefined,
+    vertexChunks = [],
+    fragmentChunks = [],
+    uniforms = {},
+    ...options
+  } = {}) {
+    const shader = new Shader({
+      vertex: vertex || (type ? ShaderLib[type].vertexShader : DEFAULT_VERTEX),
+      fragment: fragment || (type ? ShaderLib[type].fragmentShader : DEFAULT_FRAGMENT),
+      uniforms,
+      vertexChunks,
+      fragmentChunks,
+    })
+
+    const threeUniforms = {}
+    for (const [key, value] of Object.entries(shader.uniforms)) {
+      if (value.value !== undefined) {
+        continue
+      }
+      threeUniforms[key] = {
+        value,
+      }
+    }
+
+    super({
+      fragmentShader: toWebGL1(shader.fragment, 'fragment'),
+      vertexShader: toWebGL1(shader.vertex, 'vertex'),
+      uniforms: {
+        ...(type ? UniformsUtils.clone(ShaderLib[type].uniforms) : {}),
+        ...threeUniforms,
+      },
+      ...options,
+    })
+
+    this.lights = /lambert|phong|standard/.test(type)
+
+    for (const key of Object.keys(this.uniforms)) {
+      Object.defineProperty(this, key, {
+        configurable: true,
+        get: function () {
+          return this.uniforms[key].value
+        },
+        set: function (value) {
+          this.uniforms[key].value = value
+        },
+      })
+    }
+  }
+
+  clone() {
+    const clone = super.clone()
+    for (const key of Object.keys(clone.uniforms)) {
+      Object.defineProperty(clone, key, {
+        configurable: true,
+        get: function () {
+          return this.uniforms[key].value
+        },
+        set: function (value) {
+          this.uniforms[key].value = value
+        },
+      })
+    }
+    return clone
+  }
+}

package/object/THREELine.js

@@ -0,0 +1,113 @@
+import FrenetSerretFrame from '../../core/math/FrenetSerretFrame.js'
+
+import THREEShaderMaterial from './THREEShaderMaterial.js'
+
+export default class THREELine extends THREE.Mesh {
+  constructor({
+    points = [new THREE.Vector3(0, -1, 0), new THREE.Vector3(0, 1, 0)],
+    material = new THREEShaderMaterial(),
+    detail = 3,
+    thickness = .1,
+    geometry = new THREE.CylinderBufferGeometry(1, 1, points.length - 1, detail, points.length - 1),
+  } = {}) {
+    super(geometry, material)
+
+    this.points = points
+
+    this.userData._thickness = thickness
+    this.userData._lineNormals = new Float32Array(this.points.length * 3)
+    this.userData._linePositions = new Float32Array(this.points.length * 3)
+
+    this.frustumCulled = false
+
+    const positions = this.geometry.getAttribute('position').array
+    const verticesNumber = positions.length / 3
+    const ids = new Float32Array(verticesNumber)
+    const offsetY = (points.length - 1) / 2
+    for (let i = 0; i < verticesNumber; i++) {
+      ids[i] = positions[i * 3 + 1] + offsetY
+    }
+
+    this.geometry.addAttribute('linePointId', new THREE.BufferAttribute(ids, 1))
+
+    if (!material.linePositions) {
+      material.add({
+        vertexShaderChunks: [
+          ['start', `
+            uniform float lineThickness;
+            uniform vec3 linePositions[${this.points.length}];
+            uniform vec3 lineNormals[${this.points.length}];
+
+            attribute float linePointId;
+          `],
+          ['main', `
+            vec3 position = position;
+            vec3 normal = normal;
+
+            vec3 linePosition = linePositions[int(linePointId)];
+            vec3 lineDirection = normalize(linePointId == ${this.points.length - 1}. ? linePosition - linePositions[int(linePointId) - 1] : linePositions[int(linePointId) + 1] - linePosition);
+            vec3 lineNormal = lineNormals[int(linePointId)];
+            vec3 lineBinormal = cross(lineNormal, lineDirection);
+
+            mat3 lineRotationMatrix = mat3(
+              lineNormal,
+              lineDirection,
+              lineBinormal
+            );
+            position.y = 0.;
+            position = linePosition + lineRotationMatrix * position * lineThickness;
+            normal = lineRotationMatrix * normal;
+          `],
+        ],
+      })
+    }
+
+    this.update()
+  }
+
+  onBeforeRender(renderer, scene, camera, geometry, material, group) {
+    this.material.lineThickness = this.userData._thickness
+    this.material.lineNormals = this.userData._lineNormals
+    this.material.linePositions = this.userData._linePositions
+
+    const threeProgram = renderer.properties.get(material).program
+
+    if (!threeProgram) {
+      return
+    }
+
+    const gl = renderer.getContext()
+    const uniforms = threeProgram.getUniforms()
+
+    gl.useProgram(threeProgram.program)
+    uniforms.setValue(gl, 'lineThickness', this.userData._thickness)
+    uniforms.setValue(gl, 'lineNormals', this.userData._lineNormals)
+    uniforms.setValue(gl, 'linePositions', this.userData._linePositions)
+  }
+
+  set thickness(value) {
+    this.userData._thickness = value
+  }
+
+  get thickness() {
+    return this.userData._thickness
+  }
+
+  update({
+    range = [0, this.points.length - 1],
+  } = {}) {
+    const end = range[1]
+    for (let i = range[0]; i <= end; i++) {
+      const point = this.points[i]
+      this.userData._linePositions[i * 3] = point.x
+      this.userData._linePositions[i * 3 + 1] = point.y
+      this.userData._linePositions[i * 3 + 2] = point.z
+    }
+
+    FrenetSerretFrame.compute({
+      positions: this.userData._linePositions,
+      normals: this.userData._lineNormals,
+      range,
+    })
+  }
+}

package/object/THREEMotionVectorObject.js

@@ -0,0 +1,284 @@
+import { Object3D, BufferGeometry, BufferAttribute, AnimationMixer, DataTexture, RGBAFormat, FloatType, RGBFormat, Points, Color, Matrix4 } from '../../../three/src/Three.js'
+import TransformShader from '../../core/shader/TransformShader.js'
+import THREEGPGPUSystem from '../../three/gpgpu/THREEGPGPUSystem.js'
+import THREEShaderMaterial from '../../three/material/THREEShaderMaterial.js'
+
+export default class THREEMotionVectorObject extends Object3D {
+  constructor({
+    renderer,
+    gltfData,
+    pointsAttributes = undefined,
+    material = new THREEShaderMaterial({
+      skinning: true,
+      type: 'basic',
+      uniforms: {
+        diffuse: new Color('#ff0000'),
+      },
+      vertexChunks: [
+        ['main', `
+          gl_PointSize = 2.;
+        `],
+      ],
+    }),
+    pointCount = undefined,
+  }) {
+    super()
+
+    this.loop = false
+
+    this._pointCount = pointCount
+
+    this._initialized = false
+
+    const object = gltfData.scene
+    this._mesh = object
+    object.traverse((object) => {
+      if (object.skeleton) {
+        this._mesh = object
+        this._mesh.frustumCulled = false
+      }
+    })
+    // this._mesh.visible = false;
+    this._mesh.scale.set(0, 0, 0)
+    if (!pointsAttributes) {
+      pointsAttributes = new Map()
+      for (const [name, value] of Object.entries(this._mesh.geometry.attributes)) {
+        pointsAttributes.set(name, {
+          data: value.array,
+          size: value.itemSize,
+        })
+      }
+    }
+    this.add(object)
+
+    if (this._pointCount) {
+      for (const attributeData of pointsAttributes.values()) {
+        const newArray = new attributeData.data.constructor(this._pointCount * attributeData.size)
+        const stride = attributeData.size
+        const difference = Math.floor(attributeData.data.length / newArray.length)
+        for (let index = 0; index < this._pointCount; index++) {
+          for (let componentIndex = 0; componentIndex < stride; componentIndex++) {
+            newArray[index * stride + componentIndex] = attributeData.data[index * stride * difference + componentIndex]
+          }
+        }
+        attributeData.data = newArray
+      }
+    } else {
+      const firstAttribute = pointsAttributes.values().next().value
+      this._pointCount = firstAttribute.data.length / firstAttribute.size
+    }
+
+    this._skeleton = this._mesh.skeleton
+
+    // Create bonesTexture manually
+    // https://github.com/mrdoob/three.js/blob/cd41804aa436bb2cfd79797c04985f75c4c63e63/src/renderers/WebGLRenderer.js#L1632
+
+    // let size = Math.sqrt(this._skeleton.bones.length * 4); // 4 pixels needed for 1 matrix
+    // size = MathUtils.ceilPowerOfTwo(size);
+    // size = Math.max(size, 4);
+
+    // const boneMatrices = new Float32Array(size * size * 4); // 4 floats per RGBA pixel
+    // boneMatrices.set(this._skeleton.boneMatrices); // copy current values
+
+    // let boneTexture;
+    // if (renderer.capabilities.isWebGL2) {
+    //   boneTexture = new DataTexture(boneMatrices, size, size, RGBAFormat, FloatType);
+    // } else {
+    //   boneTexture = new DataTexture(Float16.fromFloat32Array(boneMatrices), size, size, RGBAFormat, HalfFloatType);
+    // }
+
+    // this._skeleton.boneMatrices = boneMatrices;
+    // this._skeleton.boneTexture = boneTexture;
+    // this._skeleton.boneTextureSize = size;
+
+    //
+
+    const geometry = new BufferGeometry()
+
+    for (const [name, attributeData] of pointsAttributes) {
+      geometry.setAttribute(name, new BufferAttribute(attributeData.data, attributeData.size))
+    }
+
+    this._points = new Points(geometry, material)
+    this._points.isSkinnedMesh = true
+    this._points.skeleton = this._skeleton
+    this._points.bindMatrix = new Matrix4()
+    this._points.bindMatrixInverse = new Matrix4()
+    this._points.visible = false
+    this._points.frustumCulled = false
+    this.add(this._points)
+
+    const animation = gltfData.animations[0]
+    this._animationMixer = new AnimationMixer(object)
+    this._animationClip = animation
+    this._animationAction = this._animationMixer.clipAction(this._animationClip)
+    this._animationAction.play()
+
+    const pointTextures = new Map()
+    const pointTextureSize = Math.ceil(Math.sqrt(this._pointCount))
+    for (const [name, attributeData] of pointsAttributes) {
+      const textureData = new Float32Array(pointTextureSize * pointTextureSize * attributeData.size)
+      textureData.set(attributeData.data)
+      const texture = new DataTexture(textureData, pointTextureSize, pointTextureSize, attributeData.size === 3 ? RGBFormat : RGBAFormat, FloatType)
+      pointTextures.set(name, texture)
+    }
+
+    this._gpgpuSystem = new THREEGPGPUSystem({
+      data: new Float32Array((4 * 3) * this._pointCount),
+      stride: 3,
+      renderer: renderer,
+      format: RGBAFormat,
+      uniforms: {
+        pointsTextureSize: pointTextureSize,
+        pointPositionTexture: pointTextures.get('position'),
+        pointSkinIndexTexture: pointTextures.get('skinIndex'),
+        pointSkinWeightTexture: pointTextures.get('skinWeight'),
+        pointNormalTexture: pointTextures.get('normal'),
+      },
+      fragmentChunks: [
+        ['start', `
+          uniform float pointsTextureSize;
+          uniform highp sampler2D pointPositionTexture;
+          uniform highp sampler2D pointNormalTexture;
+          uniform highp sampler2D pointSkinIndexTexture;
+          uniform highp sampler2D pointSkinWeightTexture;
+
+          uniform highp sampler2D boneTexture;
+          uniform int boneTextureSize;
+
+          ${TransformShader.quaternionFromMatrix()}
+
+          mat4 getBoneMatrix( const in float i ) {
+            float j = i * 4.0;
+            float x = mod( j, float( boneTextureSize ) );
+            float y = floor( j / float( boneTextureSize ) );
+            float dx = 1.0 / float( boneTextureSize );
+            float dy = 1.0 / float( boneTextureSize );
+            y = dy * ( y + 0.5 );
+            vec4 v1 = texture2D( boneTexture, vec2( dx * ( x + 0.5 ), y ) );
+            vec4 v2 = texture2D( boneTexture, vec2( dx * ( x + 1.5 ), y ) );
+            vec4 v3 = texture2D( boneTexture, vec2( dx * ( x + 2.5 ), y ) );
+            vec4 v4 = texture2D( boneTexture, vec2( dx * ( x + 3.5 ), y ) );
+            mat4 bone = mat4( v1, v2, v3, v4 );
+            return bone;
+          }
+        `],
+        ['end', `
+          vec3 previousPosition = getDataChunk(0).xyz;
+          int chunkIndex = getChunkIndex();
+
+          float pointID = float(getDataIndex());
+
+          float x = mod(pointID, pointsTextureSize);
+          float y = floor(pointID / pointsTextureSize);
+          float dx = 1. / pointsTextureSize;
+          float dy = 1. / pointsTextureSize;
+          x = dx * (x + .5);
+          y = dy * (y + .5);
+
+          vec3 position = texture(pointPositionTexture, vec2(x, y)).rgb;
+          vec3 normal = texture(pointNormalTexture, vec2(x, y)).rgb;
+          vec4 skinIndex = texture(pointSkinIndexTexture, vec2(x, y));
+          vec4 skinWeight = texture(pointSkinWeightTexture, vec2(x, y));
+
+          mat4 boneMatX = getBoneMatrix( skinIndex.x );
+          mat4 boneMatY = getBoneMatrix( skinIndex.y );
+          mat4 boneMatZ = getBoneMatrix( skinIndex.z );
+          mat4 boneMatW = getBoneMatrix( skinIndex.w );
+
+          vec4 data;
+          if(chunkIndex < 2) {
+            vec4 skinVertex = vec4( position, 1.0 );
+            vec4 skinned = vec4( 0.0 );
+            skinned += boneMatX * skinVertex * skinWeight.x;
+            skinned += boneMatY * skinVertex * skinWeight.y;
+            skinned += boneMatZ * skinVertex * skinWeight.z;
+            skinned += boneMatW * skinVertex * skinWeight.w;
+            
+            position = skinned.xyz;
+
+            vec3 velocity = position - previousPosition;
+
+            if(chunkIndex == 0) {
+              data = vec4(position, 0.);
+            } else if(chunkIndex == 1) {
+              data = vec4(velocity, 0.);
+            }
+          } else if(chunkIndex == 2) {
+            mat4 rotationMatrix = mat4(0.);
+            rotationMatrix += skinWeight.x * boneMatX;
+            rotationMatrix += skinWeight.y * boneMatY;
+            rotationMatrix += skinWeight.z * boneMatZ;
+            rotationMatrix += skinWeight.w * boneMatW;
+            vec4 quaternion = quaternionFromMatrix(rotationMatrix);
+            data = quaternion;
+          }
+          gl_FragColor = data;
+        `],
+      ],
+    })
+    this._gpgpuSystem.onBeforeRender = () => {
+      this._gpgpuSystem.material.boneTexture = this._skeleton.boneTexture
+      this._gpgpuSystem.material.boneTextureSize = this._skeleton.boneTextureSize
+    }
+  }
+
+  get pointCount() {
+    return this._pointCount
+  }
+
+  get dataTexture() {
+    return this._gpgpuSystem.dataTexture
+  }
+
+  get dataTextureStride() {
+    return this._gpgpuSystem.stride
+  }
+
+  get dataTextureSize() {
+    return this._gpgpuSystem.dataTextureSize
+  }
+
+  get meshVisible() {
+    return this._mesh.visible
+  }
+
+  set meshVisible(value) {
+    this._mesh.visible = value
+  }
+
+  get pointsVisible() {
+    return this._points.visible
+  }
+
+  set pointsVisible(value) {
+    this._points.visible = value
+  }
+
+  get currentTime() {
+    return this._animationMixer.time
+  }
+
+  set currentTime(value) {
+    if (value >= this._animationClip.duration) {
+      if (this.loop) {
+        value = 0
+      } else {
+        value = this._animationClip.duration
+      }
+    }
+    this._animationMixer.setTime(Math.min(value, this._animationClip.duration - .01))
+    this._update()
+  }
+
+  _update() {
+    if (!this._points.visible && !this._mesh.visible) {
+      this._skeleton.update()
+    }
+    if (!this._initialized) {
+      this._gpgpuSystem.update()
+      this._initialized = true
+    }
+    this._gpgpuSystem.update()
+  }
+}

package/object/THREERibbon.js

@@ -0,0 +1,49 @@
+import {
+  Vector3,
+} from '../../../three/build/three.module.js'
+
+import THREELine from './THREELine.js'
+
+import FrenetSerretFrame from '../math/FrenetSerretFrame.js'
+
+export default class THREERibbon extends THREELine {
+  constructor({
+    points,
+    thickness,
+    detail,
+    geometry,
+    material,
+  } = {}) {
+    super({
+      points,
+      thickness,
+      detail,
+      geometry,
+      material,
+    })
+
+    this.head = points[this.points.length - 1].clone()
+  }
+
+  update() {
+    if (!this._initialized) {
+      super.update()
+      this._initialized = true
+      return
+    }
+
+    this.userData._linePositions.copyWithin(0, 3)
+    this.userData._lineNormals.copyWithin(0, 3)
+
+    const headId = this.points.length - 1
+    this.userData._linePositions[headId * 3] = this.head.x
+    this.userData._linePositions[headId * 3 + 1] = this.head.y
+    this.userData._linePositions[headId * 3 + 2] = this.head.z
+
+    FrenetSerretFrame.compute({
+      positions: this.userData._linePositions,
+      normals: this.userData._lineNormals,
+      range: [headId - 3, headId],
+    })
+  }
+}