@damienmortini/three 0.1.183 → 0.1.185

package/material/THREEPBRMaterial.js

@@ -1,107 +1,107 @@
-import THREEShaderMaterial from './THREEShaderMaterial.js'
-import LightShader from '@damienmortini/core/shader/LightShader.js'
-import RayShader from '@damienmortini/core/shader/RayShader.js'
-import PBRShader from '@damienmortini/core/shader/PBRShader.js'
-import { Color, Vector3, ShaderChunk } from '../../../three/src/Three.js'
-
-export default class THREEPBRMaterial extends THREEShaderMaterial {
-  constructor({
-    webgl2 = true,
-    vertexChunks = [],
-    fragmentChunks = [],
-    uniforms = {},
-    pbrDiffuseLightFromRay = (uniforms.envMap ? `
-      vec4 texel = ${webgl2 ? 'textureLod' : 'textureCubeLodEXT'}(envMap, ray.direction, roughness * ${Math.log2(uniforms.envMap.image.width).toFixed(1)});
-      return texel.rgb;
-    ` : undefined),
-    pbrReflectionFromRay = (uniforms.envMap ? `
-    vec4 texel = ${webgl2 ? 'textureLod' : 'textureCubeLodEXT'}(envMap, ray.direction, roughness * ${Math.log2(uniforms.envMap.image.width).toFixed(1)});
-    return texel.rgb;
-  ` : undefined),
-    ...options
-  } = {}) {
-    super({
-      lights: !!uniforms.light,
-      uniforms: {
-        baseColor: new Color('#ffffff'),
-        metalness: 0,
-        roughness: 0,
-        opacity: 1,
-        light: {
-          intensity: 0,
-          color: new Color('#ffffff'),
-          position: new Vector3(),
-          direction: new Vector3(),
-        },
-        ...uniforms,
-      },
-      vertex: `
-        void main() {
-        }
-      `,
-      vertexChunks: [
-        ['start', `
-          ${options.skinning ? '#include <skinning_pars_vertex>' : ''}
-          
-          varying vec3 vPosition;
-          varying vec3 vNormal;
-          varying vec2 vUv;
-          varying vec3 vWorldPosition;
-          varying vec3 vViewDirection;
-        `],
-        ['main', `
-          vec3 pbrPosition = position;
-          vec3 pbrNormal = normal;
-          
-          ${options.skinning ? ShaderChunk.skinbase_vertex : ''}
-          ${options.skinning ? ShaderChunk.skinnormal_vertex.replace(/objectNormal/g, 'pbrNormal') : ''}
-          ${options.skinning ? ShaderChunk.skinning_vertex.replace(/transformed/g, 'pbrPosition') : ''}
-        `],
-        ['end', `
-          vec3 pbrWorldPosition = (modelMatrix * vec4(pbrPosition, 1.)).xyz;
-          gl_Position = projectionMatrix * viewMatrix * vec4(pbrWorldPosition, 1.);
-          
-          
-          vWorldPosition = pbrWorldPosition;
-          vViewDirection = normalize(pbrWorldPosition - cameraPosition);
-          vPosition = pbrPosition;
-          vNormal = normalize(mat3(modelMatrix) * pbrNormal);
-          vUv = uv;
-        `],
-        ...vertexChunks,
-      ],
-      fragmentChunks: [
-        ['start', `
-          ${LightShader.Light}
-          ${RayShader.Ray}
-          ${PBRShader.MetallicRoughnessMaterial}
-          
-          uniform vec3 baseColor;
-          uniform float metalness;
-          uniform float roughness;
-          uniform float opacity;
-          uniform Light light;
-          ${uniforms.envMap ? 'uniform samplerCube envMap;' : ''}
-          ${uniforms.map ? 'uniform sampler2D map;' : ''}
-
-          varying vec3 vNormal;
-          varying vec3 vPosition;
-          varying vec2 vUv;
-          varying vec3 vWorldPosition;
-          varying vec3 vViewDirection;
-
-          ${PBRShader.computePBRColor({ pbrReflectionFromRay, pbrDiffuseLightFromRay })}
-        `],
-        ['main', `
-          ${uniforms.map ? 'vec4 mapTexel = texture2D(map, vUv);' : ''}
-          vec4 pbrColor = computePBRColor(vViewDirection, light, vPosition, vNormal, MetallicRoughnessMaterial(vec4(${uniforms.map ? 'baseColor * pow(mapTexel.rgb, vec3(2.2))' : 'baseColor'}, ${uniforms.map ? 'opacity * mapTexel.a' : 'opacity'}), metalness, roughness));
-        `],
-        ['end', `
-          gl_FragColor = pbrColor;
-        `],
-        ...fragmentChunks,
-      ],
-      ...options,
-    })
-  }
-}
+import THREEShaderMaterial from './THREEShaderMaterial.js'
+import LightShader from '@damienmortini/core/shader/LightShader.js'
+import RayShader from '@damienmortini/core/shader/RayShader.js'
+import PBRShader from '@damienmortini/core/shader/PBRShader.js'
+import { Color, Vector3, ShaderChunk } from '../../../three/src/Three.js'
+
+export default class THREEPBRMaterial extends THREEShaderMaterial {
+  constructor({
+    webgl2 = true,
+    vertexChunks = [],
+    fragmentChunks = [],
+    uniforms = {},
+    pbrDiffuseLightFromRay = (uniforms.envMap ? `
+      vec4 texel = ${webgl2 ? 'textureLod' : 'textureCubeLodEXT'}(envMap, ray.direction, roughness * ${Math.log2(uniforms.envMap.image.width).toFixed(1)});
+      return texel.rgb;
+    ` : undefined),
+    pbrReflectionFromRay = (uniforms.envMap ? `
+    vec4 texel = ${webgl2 ? 'textureLod' : 'textureCubeLodEXT'}(envMap, ray.direction, roughness * ${Math.log2(uniforms.envMap.image.width).toFixed(1)});
+    return texel.rgb;
+  ` : undefined),
+    ...options
+  } = {}) {
+    super({
+      lights: !!uniforms.light,
+      uniforms: {
+        baseColor: new Color('#ffffff'),
+        metalness: 0,
+        roughness: 0,
+        opacity: 1,
+        light: {
+          intensity: 0,
+          color: new Color('#ffffff'),
+          position: new Vector3(),
+          direction: new Vector3(),
+        },
+        ...uniforms,
+      },
+      vertex: `
+        void main() {
+        }
+      `,
+      vertexChunks: [
+        ['start', `
+          ${options.skinning ? '#include <skinning_pars_vertex>' : ''}
+          
+          varying vec3 vPosition;
+          varying vec3 vNormal;
+          varying vec2 vUv;
+          varying vec3 vWorldPosition;
+          varying vec3 vViewDirection;
+        `],
+        ['main', `
+          vec3 pbrPosition = position;
+          vec3 pbrNormal = normal;
+          
+          ${options.skinning ? ShaderChunk.skinbase_vertex : ''}
+          ${options.skinning ? ShaderChunk.skinnormal_vertex.replace(/objectNormal/g, 'pbrNormal') : ''}
+          ${options.skinning ? ShaderChunk.skinning_vertex.replace(/transformed/g, 'pbrPosition') : ''}
+        `],
+        ['end', `
+          vec3 pbrWorldPosition = (modelMatrix * vec4(pbrPosition, 1.)).xyz;
+          gl_Position = projectionMatrix * viewMatrix * vec4(pbrWorldPosition, 1.);
+          
+          
+          vWorldPosition = pbrWorldPosition;
+          vViewDirection = normalize(pbrWorldPosition - cameraPosition);
+          vPosition = pbrPosition;
+          vNormal = normalize(mat3(modelMatrix) * pbrNormal);
+          vUv = uv;
+        `],
+        ...vertexChunks,
+      ],
+      fragmentChunks: [
+        ['start', `
+          ${LightShader.Light}
+          ${RayShader.Ray}
+          ${PBRShader.MetallicRoughnessMaterial}
+          
+          uniform vec3 baseColor;
+          uniform float metalness;
+          uniform float roughness;
+          uniform float opacity;
+          uniform Light light;
+          ${uniforms.envMap ? 'uniform samplerCube envMap;' : ''}
+          ${uniforms.map ? 'uniform sampler2D map;' : ''}
+
+          varying vec3 vNormal;
+          varying vec3 vPosition;
+          varying vec2 vUv;
+          varying vec3 vWorldPosition;
+          varying vec3 vViewDirection;
+
+          ${PBRShader.computePBRColor({ pbrReflectionFromRay, pbrDiffuseLightFromRay })}
+        `],
+        ['main', `
+          ${uniforms.map ? 'vec4 mapTexel = texture2D(map, vUv);' : ''}
+          vec4 pbrColor = computePBRColor(vViewDirection, light, vPosition, vNormal, MetallicRoughnessMaterial(vec4(${uniforms.map ? 'baseColor * pow(mapTexel.rgb, vec3(2.2))' : 'baseColor'}, ${uniforms.map ? 'opacity * mapTexel.a' : 'opacity'}), metalness, roughness));
+        `],
+        ['end', `
+          gl_FragColor = pbrColor;
+        `],
+        ...fragmentChunks,
+      ],
+      ...options,
+    })
+  }
+}

package/material/THREEShaderMaterial.js

@@ -1,97 +1,97 @@
-import {
-  ShaderMaterial,
-  ShaderLib,
-  UniformsUtils,
-} from '../../../three/src/Three.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 '@damienmortini/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
-  }
-}
+import {
+  ShaderMaterial,
+  ShaderLib,
+  UniformsUtils,
+} from '../../../three/src/Three.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 '@damienmortini/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

@@ -1,113 +1,113 @@
-import FrenetSerretFrame from '@damienmortini/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,
-    })
-  }
-}
+import FrenetSerretFrame from '@damienmortini/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,
+    })
+  }
+}