export function initWebGL( canvas: HTMLCanvasElement, vertexShaderSource: string, fragmentShaderSource: string, ) { // 获取WebGL上下文 const gl = canvas.getContext("webgl2", { premultipliedAlpha: true, }); if (!gl) { console.error("无法初始化WebGL2上下文"); return { gl: null, program: null }; } // 创建着色器程序 const program = createShaderProgram( gl, vertexShaderSource, fragmentShaderSource, ); if (!program) { console.error("无法创建着色器程序"); return { gl: null, program: null }; } // 设置视口 gl.viewport(0, 0, canvas.width, canvas.height); // 使用着色器程序 gl.useProgram(program); return { gl, program }; } function createShaderProgram( gl: WebGL2RenderingContext, vertexShaderSource: string, fragmentShaderSource: string, ): WebGLProgram | null { // 创建顶点着色器 const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); if (!vertexShader) return null; // 创建片段着色器 const fragmentShader = createShader( gl, gl.FRAGMENT_SHADER, fragmentShaderSource, ); if (!fragmentShader) return null; // 创建着色器程序 const program = gl.createProgram(); if (!program) return null; // 附加着色器 gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); // 链接程序 gl.linkProgram(program); // 检查链接状态 if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { console.error("无法初始化着色器程序:", gl.getProgramInfoLog(program)); return null; } return program; } function createShader( gl: WebGL2RenderingContext, type: number, source: string, ): WebGLShader | null { // 创建着色器 const shader = gl.createShader(type); if (!shader) return null; // 设置着色器源代码 gl.shaderSource(shader, source); // 编译着色器 gl.compileShader(shader); // 检查编译状态 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error("着色器编译错误:", gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; }