aptechka 0.1.0

package/src/packages/en3/objects/En3GLTF.ts

@@ -0,0 +1,35 @@
+import { Group } from 'three'
+import type { GLTF } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { dispose } from '../utils/dispose'
+import { en3GLTFLoader } from '../loaders/en3GLTFLoader'
+import { En3SourceConsumer } from './En3SourceConsumer'
+import { En3SourceManager, En3SourceManagerParameters } from '../attachments/En3SourceManager'
+
+export class En3GLTF extends Group implements En3SourceConsumer<GLTF> {
+  #sourceManager: En3SourceManager<GLTF>
+
+  constructor(parameters: En3SourceManagerParameters<GLTF>) {
+    super()
+
+    this.#sourceManager = new En3SourceManager({
+      loader: en3GLTFLoader,
+      consumer: this,
+      ...parameters,
+    })
+
+    this.#sourceManager.data.subscribe((detail) => {
+      if (!detail.current) {
+        this.children.forEach((child) => {
+          this.remove(child)
+          dispose(child)
+        })
+      } else {
+        this.add(...detail.current.scene.children)
+      }
+    })
+  }
+
+  public get sourceManager() {
+    return this.#sourceManager
+  }
+}

package/src/packages/en3/objects/En3Image.ts

@@ -0,0 +1,18 @@
+import { Texture } from 'three'
+import { En3ImageLike, En3ImageLikeMaterial, En3ImageLikeParameters } from './En3ImageLike'
+import { en3TextureLoader } from '../loaders/en3TextureLoader'
+
+export interface En3ImageParameters<TMaterial extends En3ImageLikeMaterial<Texture>>
+  extends Omit<En3ImageLikeParameters<Texture, TMaterial>, 'loader'> {}
+
+export class En3Image<TMaterial extends En3ImageLikeMaterial<Texture>> extends En3ImageLike<
+  Texture,
+  TMaterial
+> {
+  constructor(parameters: En3ImageParameters<TMaterial>) {
+    super({
+      ...parameters,
+      loader: en3TextureLoader,
+    })
+  }
+}

package/src/packages/en3/objects/En3ImageLike.ts

@@ -0,0 +1,101 @@
+import { Material, Mesh, PlaneGeometry, SRGBColorSpace, Texture } from 'three'
+import { coverTexture } from '../utils/coverTexture'
+import {
+  En3SourceManager,
+  En3SourceManagerLoader,
+  En3SourceManagerParameters,
+} from '../attachments/En3SourceManager'
+import { En3SourceConsumer } from './En3SourceConsumer'
+import { resizer } from '$packages/resizer'
+
+export type En3ImageLikeMaterial<TTexture extends Texture> = Material & { map: TTexture | null }
+
+export interface En3ImageLikeParameters<
+  TTexture extends Texture,
+  TMaterial extends En3ImageLikeMaterial<TTexture>
+> extends En3SourceManagerParameters<TTexture> {
+  width?: number
+  height?: number
+  widthSegments?: number
+  heightSegments?: number
+  material?: TMaterial
+  cover?: boolean
+  loader: En3SourceManagerLoader<TTexture>
+}
+
+export class En3ImageLike<
+    TTexture extends Texture,
+    TMaterial extends En3ImageLikeMaterial<TTexture>
+  >
+  extends Mesh<PlaneGeometry, TMaterial>
+  implements En3SourceConsumer<TTexture>
+{
+  #sourceManager: En3SourceManager<TTexture>
+  #isCover: boolean
+
+  constructor(parameters: En3ImageLikeParameters<TTexture, TMaterial>) {
+    super(
+      new PlaneGeometry(
+        parameters.width,
+        parameters.height,
+        parameters.widthSegments,
+        parameters.heightSegments
+      ),
+      parameters.material
+    )
+
+    this.#sourceManager = new En3SourceManager<TTexture>({
+      consumer: this,
+      ...parameters,
+    })
+
+    this.#isCover = parameters.cover || false
+
+    this.addEventListener('added', () => {
+      resizer.subscribe(this.#resizeListener)
+    })
+
+    this.addEventListener('removed', () => {
+      resizer.unsubscribe(this.#resizeListener)
+    })
+
+    this.#sourceManager.data.subscribe((detail) => {
+      if (!detail.current && detail.previous) {
+        detail.previous.dispose()
+      } else if (detail.current) {
+        if (this.material) {
+          if (this.#isCover) {
+            detail.current.matrixAutoUpdate = false
+          }
+
+          detail.current.colorSpace = SRGBColorSpace
+          detail.current.center.set(0.5, 0.5)
+          this.material.map = detail.current
+          this.material.needsUpdate = true
+          this.#resizeListener()
+        }
+      }
+    })
+  }
+
+  public get sourceManager() {
+    return this.#sourceManager
+  }
+
+  public updateTexture() {
+    this.#resizeListener()
+  }
+
+  protected onCoverResize(texture: TTexture) {
+    coverTexture(texture, {
+      x: this.scale.x,
+      y: this.scale.y,
+    })
+  }
+
+  #resizeListener = () => {
+    if (this.#sourceManager.data.current && this.#isCover) {
+      this.onCoverResize(this.#sourceManager.data.current)
+    }
+  }
+}

package/src/packages/en3/objects/En3SourceConsumer.ts

@@ -0,0 +1,5 @@
+import { En3SourceManager } from '../attachments/En3SourceManager'
+
+export interface En3SourceConsumer<T> {
+  get sourceManager(): En3SourceManager<T>
+}

package/src/packages/en3/objects/En3Video.ts

@@ -0,0 +1,88 @@
+import { Loader, VideoTexture } from 'three'
+import { En3ImageLike, En3ImageLikeMaterial, En3ImageLikeParameters } from './En3ImageLike'
+import { coverTexture } from '../utils/coverTexture'
+
+class En3VideoLoader<
+  P extends Parameters<Loader<VideoTexture>['load']> = Parameters<Loader<VideoTexture>['load']>
+> {
+  public load(...parameters: P) {
+    const url = parameters[0]
+    const onLoad = parameters[1]
+    const onError = parameters[3]
+
+    const videoElement = document.createElement('video')
+    videoElement.src = url
+
+    videoElement.onloadeddata = () => {
+      onLoad(new VideoTexture(videoElement))
+
+      videoElement.onerror = null
+      videoElement.onloadeddata = null
+    }
+
+    videoElement.onerror = () => {
+      onError?.(url)
+
+      videoElement.onerror = null
+      videoElement.onloadeddata = null
+    }
+  }
+}
+
+export interface En3VideoParameters<TMaterial extends En3ImageLikeMaterial<VideoTexture>>
+  extends Omit<En3ImageLikeParameters<VideoTexture, TMaterial>, 'loader'> {
+  autoplay?: boolean
+  muted?: boolean
+  loop?: boolean
+}
+
+export class En3Video<TMaterial extends En3ImageLikeMaterial<VideoTexture>> extends En3ImageLike<
+  VideoTexture,
+  TMaterial
+> {
+  #isAutoplay: boolean
+  #isMuted: boolean
+  #isLoop: boolean
+
+  constructor(parameters: En3VideoParameters<TMaterial>) {
+    super({
+      ...parameters,
+      loader: new En3VideoLoader(),
+    })
+
+    this.#isAutoplay = parameters.autoplay || false
+    this.#isMuted = parameters.muted || false
+    this.#isLoop = parameters.loop || false
+
+    this.sourceManager.data.subscribe((v) => {
+      if (v.current) {
+        const video = v.current.image as HTMLVideoElement
+
+        if (this.#isMuted) {
+          video.muted = true
+        }
+
+        if (this.#isLoop) {
+          video.loop = true
+        }
+
+        if (this.#isAutoplay) {
+          video.play()
+        }
+      }
+    })
+  }
+
+  protected override onCoverResize(texture: VideoTexture) {
+    const video = texture.image as HTMLVideoElement
+
+    coverTexture(
+      texture,
+      {
+        x: this.scale.x,
+        y: this.scale.y,
+      },
+      video.videoWidth / video.videoHeight
+    )
+  }
+}

package/src/packages/en3/test/En3HTML.ts

@@ -0,0 +1,55 @@
+import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer.js'
+import { RESIZE_ORDER, TICK_ORDER } from '$packages/order'
+import { resizer } from '$packages/resizer'
+import { ticker } from '$packages/ticker'
+import { en3 } from '../core/en3'
+
+export interface En3HTMLParameters {
+  element: HTMLElement
+}
+
+export class En3HTML extends CSS3DObject {
+  static #cssRenderer: CSS3DRenderer = null!
+
+  static #createRenderer() {
+    En3HTML.#cssRenderer = new CSS3DRenderer()
+    En3HTML.#cssRenderer.domElement.style.cssText = `
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      pointer-events: none;
+      overflow: hidden;
+    `
+
+    en3.containerElement.prepend(En3HTML.#cssRenderer.domElement)
+
+    resizer.subscribe(this.#resizeListener, RESIZE_ORDER.EN3 + 1)
+    ticker.subscribe(this.#tickListener, { order: TICK_ORDER.EN3 + 1 })
+  }
+
+  public static destroy() {
+    resizer.unsubscribe(this.#resizeListener)
+    ticker.unsubscribe(this.#tickListener)
+
+    this.#cssRenderer = null!
+  }
+
+  static #tickListener = () => {
+    this.#cssRenderer.render(en3.scene, en3.camera)
+  }
+
+  static #resizeListener = () => {
+    this.#cssRenderer.setSize(en3.width, en3.height)
+  }
+
+  constructor(parameters: En3HTMLParameters) {
+    super(parameters.element)
+
+    if (!En3HTML.#cssRenderer) {
+      En3HTML.#createRenderer()
+    }
+  }
+}

package/src/packages/en3/test/En3ModifiedMaterial.ts

@@ -0,0 +1,221 @@
+import { Material, WebGLProgramParametersWithUniforms } from 'three'
+
+export type En3VertexChunk =
+  | 'begin_vertex'
+  | 'beginnormal_vertex'
+  | 'clipping_planes_pars_vertex'
+  | 'clipping_planes_vertex'
+  | 'color_pars_vertex'
+  | 'color_vertex'
+  | 'default_vertex'
+  | 'defaultnormal_vertex'
+  | 'displacementmap_pars_vertex'
+  | 'displacementmap_vertex'
+  | 'envmap_pars_vertex'
+  | 'envmap_vertex'
+  | 'fog_pars_vertex'
+  | 'fog_vertex'
+  | 'lights_pars_begin'
+  | 'logdepthbuf_pars_vertex'
+  | 'logdepthbuf_vertex'
+  | 'morphcolor_vertex'
+  | 'morphnormal_vertex'
+  | 'morphtarget_pars_vertex'
+  | 'morphtarget_vertex'
+  | 'normal_pars_vertex'
+  | 'normal_vertex'
+  | 'project_vertex'
+  | 'shadowmap_pars_vertex'
+  | 'shadowmap_vertex'
+  | 'skinbase_vertex'
+  | 'skinning_pars_vertex'
+  | 'skinning_vertex'
+  | 'skinnormal_vertex'
+  | 'uv_pars_vertex'
+  | 'uv_vertex'
+  | 'worldpos_vertex'
+
+export type En3FragmentChunk =
+  | 'alphahash_fragment'
+  | 'alphahash_pars_fragment'
+  | 'alphamap_fragment'
+  | 'alphamap_pars_fragment'
+  | 'alphatest_fragment'
+  | 'alphatest_pars_fragment'
+  | 'aomap_fragment'
+  | 'aomap_pars_fragment'
+  | 'bumpmap_pars_fragment'
+  | 'clearcoat_normal_fragment_begin'
+  | 'clearcoat_normal_fragment_maps'
+  | 'clearcoat_pars_fragment'
+  | 'clipping_planes_fragment'
+  | 'clipping_planes_pars_fragment'
+  | 'color_fragment'
+  | 'color_pars_fragment'
+  | 'colorspace_fragment'
+  | 'colorspace_pars_fragment'
+  | 'cube_uv_reflection_fragment'
+  | 'default_fragment'
+  | 'dithering_fragment'
+  | 'dithering_pars_fragment'
+  | 'emissivemap_fragment'
+  | 'emissivemap_pars_fragment'
+  | 'envmap_common_pars_fragment'
+  | 'envmap_fragment'
+  | 'envmap_pars_fragment'
+  | 'envmap_physical_pars_fragment'
+  | 'fog_fragment'
+  | 'fog_pars_fragment'
+  | 'gradientmap_pars_fragment'
+  | 'iridescence_fragment'
+  | 'iridescence_pars_fragment'
+  | 'lightmap_fragment'
+  | 'lightmap_pars_fragment'
+  | 'lights_fragment_begin'
+  | 'lights_fragment_end'
+  | 'lights_fragment_maps'
+  | 'lights_lambert_fragment'
+  | 'lights_lambert_pars_fragment'
+  | 'lights_phong_fragment'
+  | 'lights_phong_pars_fragment'
+  | 'lights_physical_fragment'
+  | 'lights_physical_pars_fragment'
+  | 'lights_toon_fragment'
+  | 'lights_toon_pars_fragment'
+  | 'logdepthbuf_fragment'
+  | 'logdepthbuf_pars_fragment'
+  | 'map_fragment'
+  | 'map_pars_fragment'
+  | 'map_particle_fragment'
+  | 'map_particle_pars_fragment'
+  | 'metalnessmap_fragment'
+  | 'metalnessmap_pars_fragment'
+  | 'normal_fragment_begin'
+  | 'normal_fragment_maps'
+  | 'normal_pars_fragment'
+  | 'normalmap_pars_fragment'
+  | 'opaque_fragment'
+  | 'premultiplied_alpha_fragment'
+  | 'roughnessmap_fragment'
+  | 'roughnessmap_pars_fragment'
+  | 'shadowmap_pars_fragment'
+  | 'shadowmask_pars_fragment'
+  | 'specularmap_fragment'
+  | 'specularmap_pars_fragment'
+  | 'tonemapping_fragment'
+  | 'tonemapping_pars_fragment'
+  | 'transmission_fragment'
+  | 'transmission_pars_fragment'
+  | 'uv_pars_fragment'
+
+export type En3ModifiedMaterialUniforms = { [key: string]: { value: any } }
+
+export interface En3ModifiedMaterialParameters<
+  TMaterial extends Material,
+  Uniforms extends En3ModifiedMaterialUniforms = {}
+> {
+  material: TMaterial
+  uniforms?: Uniforms
+  vertextDeclarations?: string
+  fragmentDeclarations?: string
+  vertexChunk?: {
+    update?: En3VertexChunk
+    replace?: En3VertexChunk
+    content: string
+  }
+  fragmentChunk?: {
+    update?: En3FragmentChunk
+    replace?: En3FragmentChunk
+    content: string
+  }
+  log?: boolean
+  onReady?: (modifiedMaterial: En3ModifiedMaterial<TMaterial, Uniforms>) => Function | void
+}
+
+export class En3ModifiedMaterial<
+  TMaterial extends Material,
+  Uniforms extends En3ModifiedMaterialUniforms = {}
+> {
+  #material: TMaterial
+  #uniforms: Uniforms
+
+  constructor(parameters: En3ModifiedMaterialParameters<TMaterial, Uniforms>) {
+    this.#material = parameters.material
+    this.#uniforms = (parameters.uniforms || {}) as Uniforms
+    this.#material.userData.uniforms = this.#uniforms
+
+    let destroy: Function | void
+
+    const dispose = () => {
+      destroy?.()
+    }
+
+    this.#material.addEventListener('dispose', dispose)
+
+    this.#material.onBeforeCompile = (shader) => {
+      destroy?.()
+
+      for (const key in this.#uniforms) {
+        shader.uniforms[key] = this.#uniforms[key]
+      }
+
+      if (parameters.vertextDeclarations) {
+        shader.vertexShader = `
+          ${parameters.vertextDeclarations}
+          ${shader.vertexShader}
+        `
+      }
+
+      if (parameters.fragmentDeclarations) {
+        shader.fragmentShader = `
+          ${parameters.fragmentDeclarations}
+          ${shader.fragmentShader}
+        `
+      }
+
+      this.#chunk(shader, 'vertex', parameters)
+      this.#chunk(shader, 'fragment', parameters)
+
+      destroy = parameters.onReady?.(this)
+
+      if (parameters.log) {
+        console.log('VERTEX SHADER: ', shader.vertexShader)
+        console.log('FRAGMENT SHADER: ', shader.fragmentShader)
+      }
+    }
+  }
+
+  public get material() {
+    return this.#material
+  }
+
+  public get uniforms() {
+    return this.#uniforms
+  }
+
+  #chunk(
+    shader: WebGLProgramParametersWithUniforms,
+    type: 'vertex' | 'fragment',
+    parameters: En3ModifiedMaterialParameters<TMaterial, Uniforms>
+  ) {
+    const chunkName = type === 'vertex' ? 'vertexChunk' : 'fragmentChunk'
+    const shaderName = type === 'vertex' ? 'vertexShader' : 'fragmentShader'
+
+    if (parameters[chunkName]) {
+      if (parameters[chunkName]!.replace) {
+        shader[shaderName] = shader[shaderName].replace(
+          `#include <${parameters[chunkName]!.replace}>`,
+          parameters[chunkName]!.content
+        )
+      } else if (parameters[chunkName]!.update) {
+        shader[shaderName] = shader[shaderName].replace(
+          `#include <${parameters[chunkName]!.update}>`,
+          `
+            #include <${parameters[chunkName]!.update}>
+            ${parameters[chunkName]!.content}
+          `
+        )
+      }
+    }
+  }
+}