feat: 标题界面换用新渲染系统

packages-user/client-modules/src/render/fx/base.ts

@@ -2,18 +2,27 @@ import { Shader, ShaderProgram } from '@motajs/render-core';
 
 export abstract class EffectBase<T> {
     /** 当前使用的程序 */
-    protected readonly program: ShaderProgram;
+    protected program: ShaderProgram | null = null;
+    /** 当前使用的着色器渲染元素 */
+    protected shader: Shader | null = null;
 
-    constructor(
-        public readonly shader: Shader,
-        public readonly options: T
-    ) {
+    /**
+     * 在一个着色器元素上创建效果
+     * @param shader 着色器程序
+     * @param options 本效果的配置信息
+     */
+    create(shader: Shader, options: T) {
         const vs = this.getVertex(options);
         const fs = this.getFragment(options);
-        const program = shader.createProgram(ShaderProgram, vs, fs);
+        const program = shader.createProgram(ShaderProgram);
+        program.vs(vs);
+        program.fs(fs);
         program.requestCompile();
 
         this.program = program;
+        this.shader = shader;
+
+        this.initProgram(program, options);
     }
 
     /**
@@ -39,13 +48,14 @@ export abstract class EffectBase<T> {
      * 更新着色器渲染
      */
     requestUpdate() {
-        this.shader.update();
+        this.shader?.update();
     }
 
     /**
      * 使用此着色器
      */
     use() {
+        if (!this.program || !this.shader) return;
         this.shader.useProgram(this.program);
     }
 }

packages-user/client-modules/src/render/fx/image3d.ts

@@ -29,29 +29,33 @@ export class Image3DEffect
 
     protected getFragment(): string {
         return /* glsl */ `
+            out vec4 color;
+
             void main() {
-                gl_FragColor = texture2D(u_sampler, v_texCoord);
+                color = texture(u_sampler, v_texCoord);
             }
         `;
     }
 
     initProgram(program: ShaderProgram): void {
+        if (!this.shader) return;
         program.defineUniformMatrix(
             'u_imageTransform',
             this.shader.U_MATRIX_4x4
         );
-        const shader = this.shader;
-        const aspect = shader.width / shader.height;
-        this.proj.perspective((Math.PI * 2) / 3, aspect, 0.01, 1000);
+        this.proj.perspective(Math.PI / 2, 1, 0.01, 1000);
+        this.view.lookAt([0, 0, 1], [0, 0, 0], [0, 1, 0]);
         this.model.bind(this);
         this.view.bind(this);
         this.proj.bind(this);
+        this.updateTransform();
     }
 
     updateTransform(): void {
+        if (!this.shader || !this.program) return;
         const matrix = this.program.getMatrix('u_imageTransform');
         if (!matrix) return;
-        const trans = this.model.multiply(this.view).multiply(this.proj);
+        const trans = this.proj.multiply(this.view).multiply(this.model);
         matrix.set(false, trans.mat);
         this.requestUpdate();
     }