added some webGL utils for astro

Author: jom-hedges

src/scripts/webgl/utils/Mouse3D.ts

@@ -0,0 +1,39 @@
+import * as THREE from 'three'
+import { gl } from '../core/WebGL'
+
+class Mouse3D {
+  private ray = new THREE.Ray()
+  private mouse = new THREE.Vector2(0, 0)
+
+  constructor() {
+    window.addEventListener('mousemove', this.handleMouseMove)
+    window.addEventListener('mousemove', this.handleTouchMove)
+  }
+
+  get position() {
+    gl.camera.updateMatrixWorld()
+    this.ray.origin.setFromMatrixPosition(gl.camera.matrixWorld)
+    this.ray.direction.set(this.mouse.x, this.mouse.y, 0.5).unproject(gl.camera).sub(this.ray.origin).normalize()
+    const distance = this.ray.origin.length() / Math.cos(Math.PI - this.ray.direction.angleTo(this.ray.origin))
+    this.ray.origin.add(this.ray.direction.multiplyScalar(distance * 1.0))
+    return this.ray.origin
+  }
+    
+  private handleMouseMove = (e: TouchEvent) => {
+    this.mouse.x = ((e.pageX - window.scrollX) / window.innerWidth) * 2 - 1 
+    this.mouse.y = -((e.pageY - window.scrollY) / window.innerHeight) * 2 + 1
+  }
+
+  private handleTouchMove = (e: TouchEvent) => {
+    const { pageX, pageY } = e.touches[0]
+    this.mouse.x = ((pageX - window.scrollX) / window.innerWidth) * 2 - 1 
+    this.mouse.y = -((pageY - window.scrollY) / window.innerHeight) * 2 + 1
+  }
+
+  dispose = () => {
+    document.removeEventListener('mousemove', this.handleMouseMove)
+    document.removeEventListener('mousemove', this.handleTouchMove)
+  }
+}
+
+export const mouse3d = new Mouse3D()

src/scripts/webgl/utils/OrbitControls.ts

@@ -0,0 +1,26 @@
+import { OrbitControls as OC } from 'three/examples/jsm/controls/OrbitControls'
+import { gl } from '../core/WebGL'
+
+class OrbitControls {
+  private orbitControls: OC 
+
+  constructor() {
+    this.orbitControls = new OC(gl.camera, gl.renderer.domElement)
+    this.orbitControls.enableDamping = true
+    this.orbitControls.dampingFactor = 0.1
+  }
+
+  get primitive() {
+    return this.orbitControls
+  }
+
+  disableDamping() {
+    this.orbitControls.enableDamping = false
+  }
+
+  update() {
+    this.orbitControls.update()
+  }
+}
+
+export const controls = new OrbitControls()

src/scripts/webgl/utils/assetLoader.ts

@@ -0,0 +1,59 @@
+import * as THREE from 'three'
+import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { RBGELoader } from 'three/examples/jsm/loaders/RBGELoader'
+import { resolvePath } from '../../utils'
+
+export type Assets = {
+  [key in string]: {
+    data?: THREE.Texture | THREE.VideoTexture | GLTF
+    path: string
+    encoding?: boolean
+    flipY?: boolean
+  }
+}
+
+export async function loadAssets(assets: Assets) {
+  const textureLoader = new THREE.TextureLoader()
+  const gltfLoader = new GLTFLoader()
+  const rgbeLoader = new RBGELoader()
+
+  const getExtension = (path: string) => {
+    const s = path.split('.')
+    return s[s.length - 1]
+  }
+
+  await Promise.all(
+    Object.values(assets).map(async (v) => {
+      const path = resolvePath(v.path)
+      const extension = getExtension(path)
+
+      if (['jpg', 'png', 'webp'].includes(extension)) {
+        const texture = await textureLoader.loadAsync(path)
+        texture.userData.aspect = texture.image.width / texture.image.height
+        v.encoding && (texture.colorSpace = THREE.SRGBColorSpace)
+        v.flipY !== undefined && (texture.flipY = v.flipY)
+        v.data = texture
+      } else if (['glb'].includes(extension)) {
+        const gltf = await gltfLoader.loadAsync(path)
+        v.data = gltf
+      } else if (['web', 'mp4'].includes(extension)) {
+        const video = document.createElement('video')
+        video.src = path
+        video.muted = true
+        video.loop = true
+        video.autoplay = true
+        video.preload = 'metadata'
+        video.playsInline = true
+        // await video.play()
+        const texture = new THREE.VideoTexture(video)
+        texture.userData.aspect = video.videoWidth / video.videoHeight
+        v.encoding && (texture.colorSpace = THREE.SRGBColorSpace)
+        v.data = texture
+      } else if (['hdr'].includes(extension)) {
+        const texture = await regbeLoader.loadAsync(path)
+        texture.mapping = THREE.EquirectangularReflectionMapping
+        v.data = texture
+      }
+    }),
+  )
+}

src/scripts/webgl/utils/coveredTexture.ts

@@ -0,0 +1,19 @@
+export function calcCoveredTextureScale(texture: THREE.Texture, aspect: number, target?: THREE.Vector2) {
+  const imageAspect = texture.image.width / texture.image.height 
+  
+  let result: [number, number] = [1, 1]
+  if (aspect < imageAspect) result = [aspect / imageAspect, 1]
+  else result = [1, imageAspect / aspect] 
+  
+  target?.set(result[0], result[1])
+
+  return result
+}
+
+export function coveredTexture(texture: THREE.Texture, screenAspect: number) {
+  texture.matrixAutoUpdate = false
+  const scale = calcCoveredTextureScale(texture, screenAspect)
+  texture.matrix.setUvTransform(0, 0, scale[0], scale[1], 0, 0.5, 0.5)
+
+  return texture
+}