WebGL上下文在打包应用中绘制异常的根源与解决方案

// utils.ts
// ... 其他函数定义 ...

const canvas = document.getElementById('canvas') as HTMLCanvasElement;
export const gl = canvas.getContext('webgl') as WebGLRenderingContext;

/**
 * Util function to get the webgl rendering context
 * @param canvasId The HTML id of the canvas element being used
 * @param options The options to pass to the `.getContext` call
 * @returns The WebGLRenderingContext
 */
export function getGlContext(
    canvasId: string = 'canvas',
    options?: WebGLContextAttributes
) {
    const canvas = document.getElementById(canvasId) as HTMLCanvasElement;
    const gl = canvas.getContext('webgl', options) as WebGLRenderingContext;

    return gl;
}

// ... setup 函数定义 ...

// utils.ts (问题代码)
// ...
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
export const gl = canvas.getContext('webgl') as WebGLRenderingContext; // ❌ 提前创建上下文
// ...

// utils.ts (修正后)
// ...
// 移除这行：export const gl = canvas.getContext('webgl') as WebGLRenderingContext;
// ...

/**
 * Util function to get the webgl rendering context
 * @param canvasId The HTML id of the canvas element being used
 * @param options The options to pass to the `.getContext` call
 * @returns The WebGLRenderingContext
 */
export function getGlContext(
    canvasId: string = 'canvas',
    options?: WebGLContextAttributes
): WebGLRenderingContext { // 明确返回类型
    const canvas = document.getElementById(canvasId) as HTMLCanvasElement;
    if (!canvas) {
        throw new Error(`Canvas element with id "${canvasId}" not found.`);
    }
    const gl = canvas.getContext('webgl', options) as WebGLRenderingContext;
    if (!gl) {
        throw new Error('Failed to get WebGL context.');
    }
    return gl;
}

// ... setup 函数定义，确保它接收一个gl实例作为参数，而不是依赖全局gl ...
export const setup = (
    gl: WebGLRenderingContext, // 确保gl是传入的参数
    vertexShaderText: string,
    fragmentShaderText: string
) => {
    // ... 原有逻辑 ...
    return { gl, program };
};

// index.ts
import { getGlContext, setup } from '../utils'; // 导入修正后的utils

import vert1 from './vert.vert';
import frag1 from './frag.frag';

document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('canvas') as HTMLCanvasElement;
    if (!canvas) {
        console.error('Canvas element not found!');
        return;
    }

    // 唯一且带选项的上下文创建
    const gl = getGlContext('canvas', { preserveDrawingBuffer: true });

    // 确保canvas的尺寸与WebGL视口匹配
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    const { program } = setup(gl, vert1, frag1);

    gl.useProgram(program);

    const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
    // 对于gl.vertexAttrib2f直接设置属性值的情况，通常不需要启用或禁用顶点属性数组
    // gl.enableVertexAttribArray(positionAttributeLocation); // 如果使用缓冲区，则需要启用

    const resolutionUniformLocation = gl.getUniformLocation(
        program,
        'u_resolution'
    );
    gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);

    canvas.addEventListener('mousemove', (e) => {
        // 获取鼠标在canvas内的相对坐标
        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = gl.canvas.height - (e.clientY - rect.top); // WebGL Y轴向上

        gl.vertexAttrib2f(positionAttributeLocation, x, y);
        gl.drawArrays(gl.POINTS, 0, 1);
    });

    // 初始绘制一次，确保画布不为空
    gl.clearColor(0.75, 0.85, 0.8, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    // 可以在这里绘制一个初始点或场景
});