@vyr/three 0.0.1

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@vyr/three",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./src/index.ts",
+  "author": "",
+  "sideEffects": true,
+  "license": "MIT",
+  "dependencies": {
+    "@vyr/locale": "0.0.1",
+    "@vyr/engine": "0.0.1",
+    "postprocessing": "^6.38.0",
+    "three": "0.175.0"
+  },
+  "devDependencies": {
+    "@types/three": "0.175.0"
+  },
+  "files": [
+    "package.json",
+    "src/"
+  ],
+  "vyr": {
+    "type": "universal",
+    "order": 10
+  }
+}

package/src/actor/ComposerServiceActor.ts

@@ -0,0 +1,107 @@
+import { EffectComposer, RenderPass, EffectPass, SMAAEffect, SMAAPreset, EdgeDetectionMode, PredicationMode } from 'postprocessing'
+import { Actor, ArrayUtils, Descriptor, UpdateArgs } from '@vyr/engine';
+import { ComposerServiceDescriptor } from '../descriptor/ComposerServiceDescriptor';
+import { SceneServiceActor } from "./SceneServiceActor";
+import { PassActor } from './PassActor';
+import { Camera } from 'three';
+import { NodeActor } from './NodeActor';
+
+class ComposerServiceActor extends SceneServiceActor {
+    private _cacheKey = ''
+    private _composer: EffectComposer | null = null
+    private _renderPass
+    private _antiAliasPass
+    readonly passQueue: PassActor[] = []
+
+    constructor(descriptor: ComposerServiceDescriptor) {
+        super(descriptor.uuid, 'high-performance', false)
+        this._renderPass = new RenderPass()
+        const smaa = new SMAAEffect({
+            preset: SMAAPreset.HIGH,            // 高质量
+            edgeDetectionMode: EdgeDetectionMode.COLOR,  // 默认值
+            predicationMode: PredicationMode.DISABLED    // 默认值
+        })
+        this._antiAliasPass = new EffectPass(undefined, smaa)
+    }
+
+    getEffectComposer(descriptor: ComposerServiceDescriptor) {
+        const cacheKey = `${descriptor.frameBufferType}_${descriptor.depthBuffer}_${descriptor.stencilBuffer}`
+        if (this._composer === null) {
+            this._cacheKey = cacheKey
+            this._composer = new EffectComposer(this.pipeline, {
+                frameBufferType: descriptor.frameBufferType,
+                depthBuffer: true,
+                stencilBuffer: descriptor.stencilBuffer,
+            })
+            this._composer.autoRenderToScreen = true
+        }
+
+        if (cacheKey !== this._cacheKey) {
+            this.reset()
+            this._cacheKey = cacheKey
+            this._composer = new EffectComposer(this.pipeline, {
+                frameBufferType: descriptor.frameBufferType,
+                depthBuffer: descriptor.depthBuffer,
+                stencilBuffer: descriptor.stencilBuffer,
+            })
+            this._composer.autoRenderToScreen = true
+        }
+        return this._composer
+    }
+
+    add(actor: Actor) {
+        if (actor instanceof PassActor) {
+            ArrayUtils.insert(this.passQueue, actor)
+        } else {
+            super.add(actor)
+        }
+    }
+
+    remove(actor: Actor) {
+        if (actor instanceof PassActor) {
+            ArrayUtils.remove(this.passQueue, actor)
+        } else {
+            super.remove(actor)
+        }
+    }
+
+    update(descriptor: ComposerServiceDescriptor, args: UpdateArgs) {
+        super.update(descriptor, args)
+
+        const graphics = Actor.getGraphics(this)
+        const camera = Descriptor.get<Descriptor>(graphics.scheduler.camera)
+        const cameraActor = graphics.getActor<NodeActor<Camera>>(camera, args)
+
+        const composer = this.getEffectComposer(descriptor)
+        composer.addPass(this._renderPass)
+        // for (const pass of this.passQueue) composer.addPass(pass.effect)
+        composer.addPass(this._antiAliasPass)
+
+        composer.multisampling = descriptor.multisampling
+        composer.setRenderer(this.pipeline)
+        composer.setMainScene(this.scene)
+        composer.setMainCamera(cameraActor.object)
+    }
+
+    render(service: ComposerServiceDescriptor, camera: NodeActor<Camera>, args: UpdateArgs) {
+        const composer = this.getEffectComposer(service)
+        composer.render(args.delta)
+        this.screenPipeline.render(this.scene, camera.object)
+    }
+
+    reset() {
+        if (this._composer === null) return
+        this._cacheKey = ''
+        this._composer.dispose()
+        this._composer.passes.length = 0;
+    }
+
+    dispose() {
+        super.dispose()
+        this.reset()
+    }
+}
+
+export {
+    ComposerServiceActor
+}

package/src/actor/GeometryActor.ts

@@ -0,0 +1,13 @@
+import { Actor } from "@vyr/engine"
+import { BufferGeometry } from "three"
+
+class GeometryActor<T extends BufferGeometry = BufferGeometry> extends Actor {
+    readonly object: T
+
+    constructor(object: T) {
+        super()
+        this.object = object
+    }
+}
+
+export { GeometryActor }

package/src/actor/HTMLConvertActor.ts

@@ -0,0 +1,55 @@
+import { Object3D } from 'three'
+import { CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js'
+import { Actor, ArrayUtils, Descriptor, HTMLActor, Interpreter, UpdateArgs } from "@vyr/engine"
+import { NodeActor } from "./NodeActor"
+
+class HTMLConvertActor extends NodeActor {
+    declare object: Object3D
+    private _spriteCollection = new Map<string, CSS3DSprite>()
+    private _sprite: CSS3DSprite | null = null
+    private _collection: Actor[] = []
+
+    overrideUpdate = (descriptor: Descriptor, interpreter: Interpreter, args: UpdateArgs) => {
+        interpreter.update(descriptor, args)
+        const actor = interpreter.getActor<HTMLActor>(descriptor, args)
+        const wrapper = actor.getWrapper()
+        if (wrapper === null) return
+        wrapper.style.position = ''
+        wrapper.style.top = ''
+        wrapper.style.left = ''
+        if (this._spriteCollection.has(descriptor.uuid)) return
+        const sprite = new CSS3DSprite(wrapper)
+        this._spriteCollection.set(descriptor.uuid, sprite)
+        this.object.add(sprite)
+    }
+
+    add(actor: Actor) {
+        const graphics = NodeActor.getGraphics(this)
+        ArrayUtils.insert(this._collection, actor)
+        if (actor instanceof HTMLActor) {
+            graphics.setOverrideByUpdate(actor.uuid, this.overrideUpdate)
+        }
+    }
+
+    remove(actor: Actor) {
+        const graphics = NodeActor.getGraphics(this)
+        ArrayUtils.remove(this._collection, actor)
+        if (actor instanceof HTMLActor) {
+            graphics.deleteOverrideByUpdate(actor.uuid)
+            const sprite = this._spriteCollection.get(actor.uuid)
+            if (sprite === undefined) return
+            this.object.remove(sprite)
+            sprite.element.remove()
+        }
+    }
+
+    clear() {
+        while (this._collection.length > 0) {
+            const actor = this._collection.pop()
+            if (actor === undefined) continue
+            this.remove(actor)
+        }
+    }
+}
+
+export { HTMLConvertActor }

package/src/actor/MaterialActor.ts

@@ -0,0 +1,13 @@
+import { Actor } from "@vyr/engine"
+import { Material } from "three"
+
+class MaterialActor<T extends Material = Material> extends Actor {
+    readonly object: T
+
+    constructor(object: T) {
+        super()
+        this.object = object
+    }
+}
+
+export { MaterialActor }

package/src/actor/NodeActor.ts

@@ -0,0 +1,25 @@
+import { Actor } from "@vyr/engine"
+import { Object3D } from "three"
+
+class NodeActor<T extends Object3D = Object3D> extends Actor {
+    readonly object: T
+
+    constructor(object: T) {
+        super()
+        this.object = object
+    }
+
+    add(actor: Actor) {
+        if (actor.object instanceof Object3D) {
+            this.object.add(actor.object)
+        }
+    }
+
+    remove(actor: Actor) {
+        if (actor.object instanceof Object3D) {
+            this.object.remove(actor.object)
+        }
+    }
+}
+
+export { NodeActor }

package/src/actor/OrbitControllerActor.ts

@@ -0,0 +1,110 @@
+import { Object3D } from "three";
+import { Actor, CameraDescriptor, Graphics, UpdateArgs } from "@vyr/engine"
+import { OrbitControllerDescriptor, SceneServiceDescriptor } from "../descriptor";
+import { CameraControls } from '../controls'
+import { SceneServiceActor } from "./SceneServiceActor";
+import { NodeActor } from "./NodeActor";
+
+class OrbitControllerActor extends Actor {
+  readonly controls
+  readonly uuid: string
+  readonly object = new Object3D()
+
+  constructor(uuid: string, graphics: Graphics) {
+    super()
+    this.uuid = uuid
+    this.controls = new CameraControls(graphics)
+    this.controls.addEventListener('update', this._onUpdate)
+  }
+
+  private _getCameraDescriptor(uuid: string, graphics: Graphics, args: UpdateArgs) {
+    return graphics.variableProxy.get<CameraDescriptor>(uuid, graphics, args)
+  }
+  private _getWrapper(descriptor: OrbitControllerDescriptor, graphics: Graphics, args: UpdateArgs) {
+    let wrapper
+    const service = graphics.traceService(descriptor)
+    if (service instanceof SceneServiceDescriptor) {
+      const interpreter = graphics.getInterpreter(service)
+      const actor = interpreter.getActor<SceneServiceActor>(service, args)
+      wrapper = actor.getWrapper()
+    }
+    return wrapper as HTMLElement
+  }
+  private _onBeforeRender = (args: UpdateArgs) => {
+    this.controls.update(args.delta)
+  }
+  private _onUpdate = (args: UpdateArgs) => {
+    const graphics = Actor.getGraphics(this)
+    const camera = this._getCameraDescriptor(graphics.scheduler.camera, graphics, args)
+    if (camera === null) return
+    camera.position.x = this.controls.camera.position.x
+    camera.position.y = this.controls.camera.position.y
+    camera.position.z = this.controls.camera.position.z
+    camera.rotation.x = this.controls.camera.rotation.x
+    camera.rotation.y = this.controls.camera.rotation.y
+    camera.rotation.z = this.controls.camera.rotation.z
+    camera.scale.x = this.controls.camera.scale.x
+    camera.scale.y = this.controls.camera.scale.y
+    camera.scale.z = this.controls.camera.scale.z
+  }
+  getCamera(graphics: Graphics, args: UpdateArgs) {
+    const camera = this._getCameraDescriptor(graphics.scheduler.camera, graphics, args)
+    const interpreter = graphics.getInterpreter(camera)
+    interpreter.update(camera, args)
+    const actor = interpreter.getActor<NodeActor<any>>(camera, args)
+    return actor.object
+  }
+
+  listen(descriptor: OrbitControllerDescriptor, graphics: Graphics, args: UpdateArgs) {
+    this.controls.minZoom = descriptor.minZoom
+    this.controls.maxZoom = descriptor.maxZoom
+    this.controls.minPolarAngle = descriptor.minPolarAngle
+    this.controls.maxPolarAngle = descriptor.maxPolarAngle
+    this.controls.minAzimuthAngle = descriptor.minAzimuthAngle
+    this.controls.maxAzimuthAngle = descriptor.maxAzimuthAngle
+    this.controls.maxAzimuthAngle = descriptor.maxAzimuthAngle
+    this.controls.maxAzimuthAngle = descriptor.maxAzimuthAngle
+    this.controls.maxAzimuthAngle = descriptor.maxAzimuthAngle
+    this.controls.maxAzimuthAngle = descriptor.maxAzimuthAngle
+    this.controls.maxAzimuthAngle = descriptor.maxAzimuthAngle
+    this.controls.maxAzimuthAngle = descriptor.maxAzimuthAngle
+    this.controls.maxAzimuthAngle = descriptor.maxAzimuthAngle
+    this.controls.maxAzimuthAngle = descriptor.maxAzimuthAngle
+    this.controls.boundaryFriction = descriptor.boundaryFriction
+    this.controls.boundaryEnclosesCamera = descriptor.boundaryEnclosesCamera
+    this.controls.smoothTime = descriptor.smoothTime
+    this.controls.draggingSmoothTime = descriptor.draggingSmoothTime
+    this.controls.azimuthRotateSpeed = descriptor.azimuthRotateSpeed
+    this.controls.polarRotateSpeed = descriptor.polarRotateSpeed
+    this.controls.dollySpeed = descriptor.dollySpeed
+    this.controls.truckSpeed = descriptor.truckSpeed
+    this.controls.dollyToCursor = descriptor.dollyToCursor
+    this.controls.dollyDragInverted = descriptor.dollyDragInverted
+    this.controls.infinityDolly = descriptor.infinityDolly
+    this.controls.restThreshold = descriptor.restThreshold
+
+    const camera = this.getCamera(graphics, args)
+    if (this.controls.camera !== camera) this.controls.listen(camera)
+    this.controls.connect(this._getWrapper(descriptor, graphics, args))
+    graphics.engine.listen('beforeRender', this._onBeforeRender)
+  }
+
+  unlisten(descriptor: OrbitControllerDescriptor, graphics: Graphics, args: UpdateArgs) {
+    this.controls.disconnect()
+    graphics.engine.unlisten('beforeRender', this._onBeforeRender)
+  }
+
+  update(descriptor: OrbitControllerDescriptor, graphics: Graphics, args: UpdateArgs) {
+    this.unlisten(descriptor, graphics, args)
+    if (descriptor.enabled === false) return
+    this.listen(descriptor, graphics, args)
+  }
+
+  dispose() {
+    const graphics = Actor.getGraphics(this)
+    graphics.engine.unlisten('beforeRender', this._onBeforeRender)
+    this.controls.dispose()
+  }
+}
+
+export { OrbitControllerActor }

package/src/actor/PassActor.ts

@@ -0,0 +1,24 @@
+import { Object3D } from 'three'
+import { EffectPass, SelectiveBloomEffect } from "postprocessing"
+import { Actor, Descriptor } from "@vyr/engine"
+import { PassDescriptor } from "../descriptor/PassDescriptor"
+
+//TODO 继续实现渲染通道
+// 添加效果描述器，效果分别由 描边 辉光 等。
+// pass 负责组合效果，一旦pass在更新时发现效果发生了变更（数量，类型，顺序），就重新创建pass，且将旧的从composer里替换掉
+// SelectiveBloomEffect 选择的对象必须关闭深度写入，且自身不能被其他对象遮挡
+
+class PassActor extends Actor {
+
+    constructor(descriptor: PassDescriptor) {
+        super()
+    }
+
+    update(descriptor: PassDescriptor) {
+    }
+
+    dispose() {
+    }
+}
+
+export { PassActor }

package/src/actor/SceneServiceActor.ts

@@ -0,0 +1,122 @@
+import { Camera, LinearToneMapping, Object3D, Scene, SRGBColorSpace, WebGLRenderer } from "three"
+import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer.js'
+import { HTMLActor, UpdateArgs, Actor, Asset } from "@vyr/engine"
+import { SceneServiceDescriptor, TextureDescriptor } from "../descriptor"
+import { TextureActor } from "./TextureActor"
+import { NodeActor } from "./NodeActor"
+
+class SceneServiceActor extends HTMLActor {
+    private _wrapper: HTMLElement | null = null
+    readonly scene
+    readonly pipeline
+    readonly screenPipeline
+
+    constructor(uuid: string, powerPreference: WebGLPowerPreference = 'default', antialias = true) {
+        super(uuid)
+        this.scene = new Scene()
+        this.scene.matrixAutoUpdate = false
+
+        this.pipeline = new WebGLRenderer({
+            antialias,
+            powerPreference,
+            alpha: true,
+            //需要截图，必须开启。后续可以优化
+            preserveDrawingBuffer: true
+        })
+        this.pipeline.outputColorSpace = SRGBColorSpace
+        this.pipeline.toneMapping = LinearToneMapping
+        this.pipeline.toneMappingExposure = 1
+        this.pipeline.domElement.setAttribute(HTMLActor.uuidKey, uuid)
+        this.pipeline.setClearColor(0, 0)
+        this.pipeline.clear()
+        this.pipeline.autoClear = false
+
+        this.pipeline.domElement.style.width = '100%'
+        this.pipeline.domElement.style.height = '100%'
+        this.pipeline.domElement.style.position = 'relative'
+
+        this.screenPipeline = new CSS3DRenderer()
+        this.screenPipeline.domElement.style.position = 'absolute'
+        this.screenPipeline.domElement.style.left = '0px'
+        this.screenPipeline.domElement.style.top = '0px'
+        this.screenPipeline.domElement.style.transformOrigin = '0 0 0'
+        this.screenPipeline.domElement.style.backgroundColor = 'transparent'
+
+        const wrapper = this.getWrapper()
+        wrapper.appendChild(this.pipeline.domElement)
+        wrapper.appendChild(this.screenPipeline.domElement)
+    }
+
+    protected createWrapper() {
+        const wrapper = document.createElement('div')
+        wrapper.setAttribute('class', HTMLActor.className)
+        wrapper.setAttribute(HTMLActor.uuidKey, this.uuid)
+        return wrapper
+    }
+
+    getWrapper() {
+        if (this._wrapper === null) {
+            this._wrapper = this.createWrapper()
+        }
+
+        return this._wrapper
+    }
+
+    add(actor: Actor) {
+        if (actor instanceof HTMLActor) {
+            const wrapper = actor.getWrapper()
+            if (wrapper === null) return
+            const selfWrapper = this.getWrapper()
+            if (selfWrapper.contains(wrapper)) return
+            selfWrapper.appendChild(wrapper)
+        } else {
+            if (actor.object instanceof Object3D) {
+                this.scene.add(actor.object)
+            }
+        }
+    }
+
+    remove(actor: Actor) {
+        if (actor instanceof HTMLActor) {
+            const wrapper = actor.getWrapper()
+            if (wrapper === null) return
+            const selfWrapper = this.getWrapper()
+            if (selfWrapper.contains(wrapper) === false) return
+            selfWrapper.removeChild(wrapper)
+        } else {
+            if (actor.object instanceof Object3D) {
+                this.scene.remove(actor.object)
+            }
+        }
+    }
+
+    setBackground(descriptor: SceneServiceDescriptor, args: UpdateArgs) {
+        if (descriptor.background) {
+            const graphics = Actor.getGraphics(this)
+            const texture = Asset.get<TextureDescriptor>(descriptor.background)
+            const actor = graphics.getActor<TextureActor>(texture, args)
+            this.scene.background = texture instanceof TextureDescriptor ? actor.object : null
+        } else {
+            this.scene.background = null
+        }
+    }
+
+    update(descriptor: SceneServiceDescriptor, args: UpdateArgs) {
+        const wrapper = this.getWrapper()
+        this.setHTMLStyle(wrapper, this.getWrapperStyle(descriptor, args))
+        this.setHTMLStyle(this.pipeline.domElement, this.getLayoutStyle(descriptor, args))
+        this.setStyleClass(this.pipeline.domElement, this.getStyleClass(descriptor, args))
+        this.setBackground(descriptor, args)
+    }
+
+    render(service: SceneServiceDescriptor, camera: NodeActor<Camera>, args: UpdateArgs) {
+        this.pipeline.render(this.scene, camera.object)
+        this.screenPipeline.render(this.scene, camera.object)
+    }
+
+    dispose() {
+        this.pipeline.dispose()
+    }
+}
+
+export { SceneServiceActor }

package/src/actor/TextureActor.ts

@@ -0,0 +1,13 @@
+import { Actor } from "@vyr/engine"
+import { Texture } from "three"
+
+class TextureActor<T extends Texture = Texture> extends Actor {
+    readonly object: T
+
+    constructor(object: T) {
+        super()
+        this.object = object
+    }
+}
+
+export { TextureActor }

package/src/actor/TransformControllerActor.ts

@@ -0,0 +1,23 @@
+import { Actor, Graphics, UpdateArgs } from "@vyr/engine"
+import { TransformControllerDescriptor } from "../descriptor"
+import { TransformControls } from "../controls"
+
+class TransformControllerActor extends Actor {
+  readonly object = new TransformControls()
+
+  update(descriptor: TransformControllerDescriptor, graphics: Graphics, args: UpdateArgs) {
+    this.object.unlisten(graphics)
+    if (descriptor.enabled === false) return
+    this.object.listen(descriptor, graphics, args)
+  }
+
+  unlisten(graphics: Graphics) {
+    this.object.unlisten(graphics)
+  }
+
+  dispose(graphics: Graphics) {
+    this.object.dispose(graphics)
+  }
+}
+
+export { TransformControllerActor }

package/src/actor/index.ts

@@ -0,0 +1,10 @@
+export * from './SceneServiceActor'
+export * from './OrbitControllerActor'
+export * from './TransformControllerActor'
+export * from './MaterialActor'
+export * from './GeometryActor'
+export * from './TextureActor'
+export * from './NodeActor'
+export * from './HTMLConvertActor'
+// export * from './ComposerServiceActor'
+// export * from './PassActor'