refactor: WebGL2 工具函数

packages/client-base/src/glUtils.ts

@@ -1,18 +1,45 @@
 import { logger } from '@motajs/common';
 
-export function compileGLWith(
+/**
+ * 编译着色器
+ * @param gl WebGL2 上下文
+ * @param type 着色器类型
+ * @param source 着色器代码
+ */
+export function compileShader(
     gl: WebGL2RenderingContext,
-    vert: string,
+    type: number,
-    frag: string
+    source: string
-): WebGLProgram | null {
+): WebGLShader | null {
-    const vsShader = compileShader(gl, gl.VERTEX_SHADER, vert);
+    const shader = gl.createShader(type);
-    const fsShader = compileShader(gl, gl.FRAGMENT_SHADER, frag);
+    if (!shader) return null;
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
 
-    if (!vsShader || !fsShader) return null;
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const info = gl.getShaderInfoLog(shader);
+        const typeStr = type === gl.VERTEX_SHADER ? 'vertex' : 'fragment';
+        logger.error(10, typeStr, info ?? '');
+        return null;
+    }
 
+    return shader;
+}
+
+/**
+ * 编译链接着色器程序
+ * @param gl WebGL2 上下文
+ * @param vs 顶点着色器对象
+ * @param fs 片段着色器对象
+ */
+export function compileProgram(
+    gl: WebGL2RenderingContext,
+    vs: WebGLShader,
+    fs: WebGLShader
+) {
     const program = gl.createProgram();
-    gl.attachShader(program, vsShader);
+    gl.attachShader(program, vs);
-    gl.attachShader(program, fsShader);
+    gl.attachShader(program, fs);
     gl.linkProgram(program);
 
     if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
@@ -24,23 +51,21 @@ export function compileGLWith(
     return program;
 }
 
-function compileShader(
+/**
+ * 使用指定着色器代码编译链接程序
+ * @param gl WebGL2 上下文
+ * @param vs 顶点着色器代码
+ * @param fs 片段着色器代码
+ */
+export function compileProgramWith(
     gl: WebGL2RenderingContext,
-    type: number,
+    vs: string,
-    source: string
+    fs: string
-): WebGLShader | null {
+): WebGLProgram | null {
-    const shader = gl.createShader(type);
+    const vsShader = compileShader(gl, gl.VERTEX_SHADER, vs);
-    if (!shader) return null;
+    const fsShader = compileShader(gl, gl.FRAGMENT_SHADER, fs);
-    gl.shaderSource(shader, source);
-    gl.compileShader(shader);
 
-    // 如果编译失败
+    if (!vsShader || !fsShader) return null;
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-        const info = gl.getShaderInfoLog(shader);
-        const typeStr = type === gl.VERTEX_SHADER ? 'vertex' : 'fragment';
-        logger.error(10, typeStr, info ?? '');
-        return null;
-    }
 
-    return shader;
+    return compileProgram(gl, vsShader, fsShader);
 }

packages/render-assets/package.json

@@ -1,3 +1,6 @@
 {
-    "name": "@motajs/render-assets"
+    "name": "@motajs/render-assets",
+    "dependencies": {
+        "@motajs/client-base": "workspace:*"
+    }
 }

packages/render-assets/src/composer.ts

@@ -14,9 +14,9 @@ import {
 } from './types';
 import vert from './shader/pack.vert?raw';
 import frag from './shader/pack.frag?raw';
-import { compileGLWith } from './utils';
 import { logger } from '@motajs/common';
 import { isNil } from 'lodash-es';
+import { compileProgramWith } from 'packages/client-base/src/glUtils';
 
 interface IndexMarkedComposedData {
     /** 组合数据 */
@@ -229,7 +229,7 @@ export class TextureMaxRectsWebGL2Composer
         this.canvas.width = maxWidth;
         this.canvas.height = maxHeight;
         this.gl = this.canvas.getContext('webgl2')!;
-        const program = compileGLWith(this.gl, vert, frag)!;
+        const program = compileProgramWith(this.gl, vert, frag)!;
         this.program = program;
 
         // 初始化画布数据

packages/render-assets/src/index.ts

@@ -5,4 +5,3 @@ export * from './store';
 export * from './streamComposer';
 export * from './texture';
 export * from './types';
-export * from './utils';