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

packages/render-core/src/gl2.ts

@@ -167,7 +167,7 @@ export abstract class GL2<E extends EGL2Event = EGL2Event> extends RenderItem<
     protected framebufferMap: Map<string, WebGLFramebuffer> = new Map();
 
     constructor(type: RenderItemPosition = 'static') {
-        super(type, !GL2.support);
+        super(type, false);
 
         this.canvas = document.createElement('canvas');
         this.gl = this.canvas.getContext('webgl2')!;
@@ -216,17 +216,16 @@ export abstract class GL2<E extends EGL2Event = EGL2Event> extends RenderItem<
             this.gl.useProgram(this.program.program);
         }
 
-        if (this.cacheDirty) {
-            // 清空画布
-            const gl = this.gl;
-            gl.viewport(0, 0, this.canvas.width, this.canvas.height);
-            gl.clearColor(0, 0, 0, 0);
-            gl.clearDepth(1);
-            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-            this.drawScene(canvas, gl, this.program, transform);
-            this.cacheDirty = false;
-        }
+        // 清空画布
+        const gl = this.gl;
+        gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clearDepth(1);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        this.program.ready();
+        this.drawScene(canvas, gl, this.program, transform);
 
+        canvas.clear();
         canvas.ctx.drawImage(this.canvas, 0, 0, this.width, this.height);
     }
 
@@ -1189,8 +1188,6 @@ export class GL2Program extends EventEmitter<ShaderProgramEvent> {
     private shader: CompiledShader | null = null;
     /** 当前的webgl程序 */
     program: WebGLProgram | null = null;
-    /** 准备函数 */
-    private readyFn?: () => boolean;
     /** 当前正在使用的顶点索引数组 */
     usingIndices: IShaderIndices | null = null;
 
@@ -1219,18 +1216,10 @@ export class GL2Program extends EventEmitter<ShaderProgramEvent> {
     }
 
     /**
-     * 使用这个着色器程序时，在渲染之前执行的准备函数
-     * @param fn 准备函数，返回 false 时将不执行绘制
-     */
-    setReady(fn: () => boolean) {
-        this.readyFn = fn;
-    }
-
-    /**
-     * 执行准备函数
+     * 渲染前准备
      */
     ready(): boolean {
-        return this.readyFn?.() ?? true;
+        return true;
     }
 
     /**
@@ -1255,7 +1244,6 @@ export class GL2Program extends EventEmitter<ShaderProgramEvent> {
             case RenderMode.ElementsInstanced:
                 return this.elementsInstancedParams as DrawParamsMap[T];
         }
-        return null;
     }
 
     /**

packages/render-core/src/item.ts

@@ -1,4 +1,4 @@
-import { isNil } from 'lodash-es';
+import { isEqual, isNil } from 'lodash-es';
 import { EventEmitter } from 'eventemitter3';
 import { MotaOffscreenCanvas2D } from './canvas2d';
 import { Ticker, TickerFn } from 'mutate-animate';
@@ -445,9 +445,9 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
 
             canvas.ctx.drawImage(this.cache.canvas, ax, ay, width, height);
         } else {
-            this.cacheDirty = false;
             canvas.ctx.translate(ax, ay);
             this.render(canvas, tran);
+            this.cacheDirty = false;
         }
         ctx.restore();
         this.emit('afterRender', transform);
@@ -505,6 +505,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
      * 修改这个对象的大小
      */
     size(width: number, height: number): void {
+        if (width === this.width && height === this.height) return;
         this.width = width;
         this.height = height;
         if (this.enableCache) {
@@ -1186,7 +1187,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
             }
             case 'filter': {
                 if (!this.assertType(nextValue, 'string', key)) return;
-                this.setFilter(this.filter);
+                this.setFilter(nextValue);
                 return;
             }
             case 'hd': {
@@ -1238,6 +1239,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
                 return;
             }
             case 'loc': {
+                if (isEqual(nextValue, prevValue)) return;
                 if (!this.assertType(nextValue, Array, key)) return;
                 if (!isNil(nextValue[0]) && !isNil(nextValue[1])) {
                     this.pos(nextValue[0] as number, nextValue[1] as number);
@@ -1254,6 +1256,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
                 return;
             }
             case 'anc': {
+                if (isEqual(nextValue, prevValue)) return;
                 if (!this.assertType(nextValue, Array, key)) return;
                 this.setAnchor(nextValue[0] as number, nextValue[1] as number);
                 return;
@@ -1264,6 +1267,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
                 return;
             }
             case 'scale': {
+                if (isEqual(nextValue, prevValue)) return;
                 if (!this.assertType(nextValue, Array, key)) return;
                 this._transform.setScale(
                     nextValue[0] as number,

packages/render-core/src/shader.ts

@@ -26,8 +26,10 @@ void main() {
 }
 `;
 const DEFAULT_FS = /* glsl */ `
+out vec4 color;
+
 void main() {
-    gl_FragColor = texture2D(u_sampler, v_texCoord);
+    color = texture(u_sampler, v_texCoord);
 }
 `;
 
@@ -55,7 +57,7 @@ export class Shader<E extends EShaderEvent = EShaderEvent> extends GL2<
 }
 
 export class ShaderProgram extends GL2Program {
-    protected override readonly prefix: IGL2ProgramPrefix = SHADER_PREFIX;
+    protected readonly prefix: IGL2ProgramPrefix = SHADER_PREFIX;
 
     constructor(gl2: GL2, vs?: string, fs?: string) {
         super(gl2, vs, fs);
@@ -66,6 +68,11 @@ export class ShaderProgram extends GL2Program {
         }
     }
 
+    ready(): boolean {
+        this.useIndices('defaultIndices');
+        return true;
+    }
+
     protected override compile() {
         const success = super.compile();
         if (!success) return false;
@@ -76,7 +83,7 @@ export class ShaderProgram extends GL2Program {
         const tex = this.defineAttribArray('a_texCoord');
         const position = this.defineAttribArray('a_position');
         const sampler = this.defineTexture('u_sampler', 0);
-        const indices = this.defineIndices('defalutIndices');
+        const indices = this.defineIndices('defaultIndices');
         if (!tex || !position || !sampler || !indices) {
             return true;
         }
@@ -91,6 +98,7 @@ export class ShaderProgram extends GL2Program {
         tex.enable();
         indices.buffer(new Uint16Array([0, 1, 2, 2, 3, 1]), gl.STATIC_DRAW);
         this.useIndices(indices);
+        this.mode(this.element.DRAW_ELEMENTS);
         this.paramElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
 
         return true;