@damienmortini/three 0.1.131

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@damienmortini/three",
+  "version": "0.1.131",
+  "description": "Three.js helpers",
+  "scripts": {
+    "install": "npm run copyexamples",
+    "copyexamples": "node copyExamples.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/damienmortini/lib",
+    "directory": "packages/three"
+  },
+  "keywords": [
+    "three",
+    "3d",
+    "helpers",
+    "library"
+  ],
+  "author": "Damien Mortini",
+  "license": "ISC",
+  "bugs": "https://github.com/damienmortini/lib/issues",
+  "homepage": "https://github.com/damienmortini/lib/tree/master/packages/three",
+  "dependencies": {
+    "@damienmortini/core": "^0.2.106",
+    "fs-extra": "^10.0.0",
+    "three": "0.132.2"
+  },
+  "gitHead": "2629a6ebd623d7cd56684172d8ca6edf1af25eaf"
+}

package/renderer/THREERenderer.js

@@ -0,0 +1,121 @@
+import { WebGLRenderer } from '../../../three/src/renderers/WebGLRenderer.js'
+import { WebGLRenderTarget } from '../../../three/src/renderers/WebGLRenderTarget.js'
+import { DepthTexture } from '../../../three/src/textures/DepthTexture.js'
+import { RGBAFormat } from '../../../three/src/constants.js'
+import { LinearFilter } from '../../../three/src/constants.js'
+import { UnsignedShortType } from '../../../three/src/constants.js'
+import { Scene } from '../../../three/src/scenes/Scene.js'
+import { OrthographicCamera } from '../../../three/src/cameras/OrthographicCamera.js'
+import { Mesh } from '../../../three/src/objects/Mesh.js'
+import { PlaneBufferGeometry } from '../../../three/src/geometries/PlaneBufferGeometry.js'
+
+export default class THREERenderer extends WebGLRenderer {
+  constructor(options) {
+    super(Object.assign({ antialias: true }, options))
+
+    this.filters = []
+    this._renderTargets = new Map()
+
+    const renderTargetIn = new WebGLRenderTarget(this.domElement.width, this.domElement.height, {
+      format: RGBAFormat,
+      minFilter: LinearFilter,
+      magFilter: LinearFilter,
+      stencilBuffer: false,
+    })
+    renderTargetIn.texture.generateMipmaps = false
+
+    const renderTargetOut = renderTargetIn.clone()
+    renderTargetOut.texture.generateMipmaps = false
+
+    if (this.context.getExtension('WEBGL_depth_texture')) {
+      renderTargetIn.depthTexture = new DepthTexture()
+      renderTargetIn.depthTexture.type = UnsignedShortType
+      renderTargetOut.depthTexture = new DepthTexture()
+      renderTargetOut.depthTexture.type = UnsignedShortType
+    }
+
+    this._renderTargets.set(this, {
+      in: renderTargetIn,
+      out: renderTargetOut,
+    })
+
+    this.scene = new Scene()
+    this.scene.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
+    this._quad = new Mesh(new PlaneBufferGeometry(2, 2))
+    this._quad.frustumCulled = false
+    this.scene.add(this._quad)
+
+    // Fix to make WebGLRenderer.render extendable
+    this._render = this.render
+    delete this.render
+  }
+
+  applyFilter(filter, renderTargetIn, renderTargetOut) {
+    this._quad.material = filter
+    if (filter.renderTargetTexture) {
+      filter.renderTargetTexture = renderTargetIn.texture
+    }
+    if (filter.renderTargetDepthTexture && renderTargetIn.depthTexture) {
+      filter.renderTargetDepthTexture = renderTargetIn.depthTexture
+    }
+    this._render(this.scene, this.scene.camera, renderTargetOut)
+  }
+
+  resize(width, height) {
+    this.setSize(width, height, false)
+    const renderTargets = this._renderTargets.get(this)
+    renderTargets.in.setSize(width, height)
+    renderTargets.out.setSize(width, height)
+  }
+
+  render({ scene, camera = undefined, filters = this.filters, renderTarget = undefined, viewport = undefined, scissor = viewport } = {}) {
+    if (arguments.length > 1) {
+      this._render(...arguments)
+      return
+    }
+    let renderTargets = this._renderTargets.get(renderTarget || this)
+    if (!renderTargets) {
+      renderTargets = {
+        in: renderTarget.clone(),
+        out: renderTarget.clone(),
+      }
+      renderTargets.in.texture.generateMipmaps = false
+      renderTargets.out.texture.generateMipmaps = false
+      this._renderTargets.set(renderTarget, renderTargets)
+    }
+    if (viewport || scissor) {
+      if (viewport) {
+        if (renderTarget) {
+          renderTarget.viewport.set(viewport[0], viewport[1], viewport[2], viewport[3])
+        } else {
+          this.setViewport(viewport[0], viewport[1], viewport[2], viewport[3])
+        }
+      }
+      if (renderTarget) {
+        renderTarget.scissor.set(scissor[0], scissor[1], scissor[2], scissor[3])
+        renderTarget.scissorTest = true
+      } else {
+        this.setScissor(scissor[0], scissor[1], scissor[2], scissor[3])
+        this.setScissorTest(true)
+      }
+    } else {
+      if (renderTarget) {
+        renderTarget.viewport.set(0, 0, renderTarget.width, renderTarget.height)
+        renderTarget.scissor.set(0, 0, renderTarget.width, renderTarget.height)
+        renderTarget.scissorTest = false
+      } else {
+        this.setViewport(0, 0, this.domElement.width, this.domElement.height)
+        this.setScissor(0, 0, this.domElement.width, this.domElement.height)
+        this.setScissorTest(false)
+      }
+    }
+    if (scene) {
+      camera = camera || scene.camera
+      this._render(scene, camera, filters.length ? renderTargets.in : renderTarget)
+    }
+    for (const [i, filter] of filters.entries()) {
+      this.applyFilter(filter, renderTargets.in, i < filters.length - 1 ? renderTargets.out : renderTarget);
+      [renderTargets.in, renderTargets.out] = [renderTargets.out, renderTargets.in]
+    }
+  }
+}

package/renderer/THREEStereoRenderer.js

@@ -0,0 +1,60 @@
+import { WebGLRenderer, StereoCamera } from '../../../three/build/three.module.js'
+
+export default class THREEStereoRenderer {
+  constructor(renderer = new WebGLRenderer()) {
+    this.renderer = renderer
+
+    this._stereoCamera = new StereoCamera()
+    this._stereoCamera.aspect = 0.5
+  }
+
+  set eyeOffset(value) {
+    this._stereoCamera.eyeSep = value
+  }
+
+  setSize(width, height) {
+    this.renderer.setSize(width, height)
+  }
+
+  render(scene, camera, renderTarget) {
+    scene.updateMatrixWorld()
+
+    if (camera.parent === null) camera.updateMatrixWorld()
+
+    this._stereoCamera.update(camera)
+
+    const size = this.renderer.getSize()
+
+    this.renderer.clear()
+
+    if (renderTarget) {
+      renderTarget.scissorTest = true
+      renderTarget.scissor.set(0, 0, size.width * .5, size.height)
+      renderTarget.viewport.set(0, 0, size.width * .5, size.height)
+    } else {
+      this.renderer.setScissorTest(true)
+      this.renderer.setScissor(0, 0, size.width * .5, size.height)
+      this.renderer.setViewport(0, 0, size.width * .5, size.height)
+    }
+    this.renderer.render(scene, this._stereoCamera.cameraL, renderTarget)
+
+    if (renderTarget) {
+      renderTarget.scissor.set(size.width * .5, 0, size.width * .5, size.height)
+      renderTarget.viewport.set(size.width * .5, 0, size.width * .5, size.height)
+    } else {
+      this.renderer.setScissor(size.width * .5, 0, size.width * .5, size.height)
+      this.renderer.setViewport(size.width * .5, 0, size.width * .5, size.height)
+    }
+    this.renderer.render(scene, this._stereoCamera.cameraR, renderTarget)
+
+    if (renderTarget) {
+      renderTarget.scissorTest = false
+      renderTarget.scissor.set(0, 0, size.width, size.height)
+      renderTarget.viewport.set(0, 0, size.width, size.height)
+    } else {
+      this.renderer.setScissorTest(false)
+      this.renderer.setScissor(0, 0, size.width, size.height)
+      this.renderer.setViewport(0, 0, size.width, size.height)
+    }
+  }
+}

package/renderer/THREEWebGLRenderTarget2D.js

@@ -0,0 +1,63 @@
+import { Scene } from '../../../three/src/scenes/Scene.js'
+import { Mesh } from '../../../three/src/objects/Mesh.js'
+import { PlaneBufferGeometry } from '../../../three/src/geometries/PlaneBufferGeometry.js'
+import { WebGLRenderTarget } from '../../../three/src/renderers/WebGLRenderTarget.js'
+import { OrthographicCamera } from '../../../three/src/cameras/OrthographicCamera.js'
+
+export default class THREEWebGLRenderTarget2D extends WebGLRenderTarget {
+  constructor({
+    renderer,
+    material = undefined,
+    width = 1024,
+    height = 1024,
+    wrapS = undefined,
+    wrapT = undefined,
+    magFilter = undefined,
+    minFilter = undefined,
+    format = undefined,
+    type = undefined,
+    anisotropy = undefined,
+    encoding = undefined,
+    generateMipmaps = undefined,
+    depthBuffer = undefined,
+    stencilBuffer = undefined,
+    depthTexture = undefined,
+  }) {
+    super(width, height, {
+      wrapS,
+      wrapT,
+      magFilter,
+      minFilter,
+      format,
+      type,
+      anisotropy,
+      encoding,
+      generateMipmaps,
+      depthBuffer,
+      stencilBuffer,
+      depthTexture,
+    })
+
+    this.renderer = renderer
+
+    this._scene = new Scene()
+    this._camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
+
+    this._quad = new Mesh(new PlaneBufferGeometry(2, 2), material)
+    this._scene.add(this._quad)
+  }
+
+  get material() {
+    return this._quad.material
+  }
+
+  set material(value) {
+    this._quad.material = value
+  }
+
+  render() {
+    this.renderer.setRenderTarget(this)
+    this.renderer.render(this._scene, this._camera)
+    this.renderer.setRenderTarget(null)
+  }
+}

package/shader/THREEBaseShader.js

@@ -0,0 +1,33 @@
+export default {
+  vertexChunks: [
+    ['start', `
+      out vec3 vPosition;
+      out vec3 vNormal;
+      out vec2 vUV;
+      out vec3 vWorldPosition;
+      out vec3 vViewDirection;
+      out float vFresnel;
+    `],
+    ['end', `
+      vec3 worldPosition = (modelMatrix * vec4(position, 1.)).xyz;
+      gl_Position = projectionMatrix * viewMatrix * vec4(worldPosition, 1.);
+      
+      vWorldPosition = worldPosition;
+      vViewDirection = normalize(worldPosition - cameraPosition);
+      vPosition = position;
+      vNormal = normalize(mat3(modelMatrix) * normal);
+      vUV = uv;
+      vFresnel = max(0., 1. - dot(-vViewDirection, vNormal));
+    `],
+  ],
+  fragmentChunks: [
+    ['start', `
+      in vec3 vPosition;
+      in vec3 vNormal;
+      in vec2 vUV;
+      in vec3 vWorldPosition;
+      in vec3 vViewDirection;
+      in float vFresnel;
+    `],
+  ],
+}