【Javascript】在canvas中加载shader着色器的方法（开箱即用）

功能简介

可以播放，暂停shader代码，可以在js中配置shader参数（下面案例列举了所有可用参数形式）

缺点

这个是固定机位，没有自定义顶点着色器部分的功能，有需要可直接在class中改，或者修改后调用更新片元着色器的方法。

工具

class WebGLShaderToy {constructor(canvas, fragmentShaderSource, customUniforms) {// 获取 Canvas 元素this.canvas = canvas;// 获取 WebGL 上下文this.gl = this.canvas.getContext('webgl');// 顶点着色器代码this.vertexShaderSource = `attribute vec2 a_position;void main() {gl_Position = vec4(a_position, 0, 1);}`;this.customUniforms = []// 片段着色器代码this.fragmentShaderSource = this.createHeader(customUniforms) + fragmentShaderSource;console.log("fragmentShaderSource", this.fragmentShaderSource);// 编译着色器this.vertexShader = this.compileShader(this.gl, this.vertexShaderSource, this.gl.VERTEX_SHADER);this.fragmentShader = this.compileShader(this.gl, this.fragmentShaderSource, this.gl.FRAGMENT_SHADER);// 创建着色器程序this.program = this.createProgram(this.gl, this.vertexShader, this.fragmentShader);// 获取属性和制服的位置this.positionAttributeLocation = this.gl.getAttribLocation(this.program, 'a_position');this.resolutionUniformLocation = this.gl.getUniformLocation(this.program, 'iResolution');this.timeUniformLocation = this.gl.getUniformLocation(this.program, 'iTime');// 获取颜色制服的位置this.colorUniformLocations = [];for (let i = 1; i <= 10; i++) {this.colorUniformLocations.push(this.gl.getUniformLocation(this.program, `iColor${i}`));}// 创建缓冲区并绑定顶点数据this.positionBuffer = this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);const positions = [-1, -1,1, -1,-1, 1,-1, 1,1, -1,1, 1];this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);// 启用属性this.gl.enableVertexAttribArray(this.positionAttributeLocation);this.gl.vertexAttribPointer(this.positionAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);// 设置视口this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);// 清除画布this.gl.clearColor(0, 0, 0, 1);this.gl.clear(this.gl.COLOR_BUFFER_BIT);// 使用着色器程序this.gl.useProgram(this.program);// 设置分辨率制服this.gl.uniform2f(this.resolutionUniformLocation, this.gl.canvas.width, this.gl.canvas.height);// 初始化颜色制服this.setColors([[1.0, 0.0, 0.0], // 红色[0.0, 1.0, 0.0], // 绿色[0.0, 0.0, 1.0], // 蓝色[1.0, 1.0, 0.0], // 黄色[1.0, 0.0, 1.0], // 紫色[0.0, 1.0, 1.0], // 青色[1.0, 0.5, 0.0], // 橙色[0.5, 0.0, 1.0], // 紫罗兰色[0.5, 1.0, 0.0], // 黄绿色[0.0, 0.5, 1.0]  // 天蓝色]);this.loadTexture(this.gl,"./texture1.jpg")this.isAnimating = false;}// 创建着色器开头createHeader(customUniforms) {let header = `precision mediump float;uniform vec2 iResolution;uniform float iTime;uniform vec3 iColor1;uniform vec3 iColor2;uniform vec3 iColor3;uniform vec3 iColor4;uniform vec3 iColor5;uniform vec3 iColor6;uniform vec3 iColor7;uniform vec3 iColor8;uniform vec3 iColor9;uniform vec3 iColor10;`for (let i = 0; i < customUniforms.length; i++) {let { name, type, value } = customUniforms[i]let str = `uniform ${type} ${name};`header += str}console.log('header', header, customUniforms);return header}// 编译着色器的函数compileShader(gl, shaderSource, shaderType) {try {const shader = gl.createShader(shaderType);gl.shaderSource(shader, shaderSource);gl.compileShader(shader);const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);if (!success) {console.log(gl.getShaderInfoLog(shader));gl.deleteShader(shader);return null;}return shader;} catch (error) {console.error("片元着色器编码异常，请检查着色器代码", error)}}// 创建着色器程序的函数createProgram(gl, vertexShader, fragmentShader) {const program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);const success = gl.getProgramParameter(program, gl.LINK_STATUS);if (!success) {console.log(gl.getProgramInfoLog(program));gl.deleteProgram(program);return null;}return program;}// 赋值customUniformssetCustomUniforms(customUniforms) {for (let i = 1; i <= 10; i++) {this.colorUniformLocations.push(this.gl.getUniformLocation(this.program, `iColor${i}`));}let unifromBuffer = []let textureLoadingArray = []for (let i = 0; i < customUniforms.length; i++) {let { name, type, value } = customUniforms[i]let uniform = this.gl.getUniformLocation(this.program, `${name}`)switch (type) {// 标量类型case "float":this.gl.uniform1f(uniform, value);break;case "int":this.gl.uniform1i(uniform, value);break;case "bool":this.gl.uniform1i(uniform, value ? 1 : 0);break;// 向量类型case "vec2":this.gl.uniform2fv(uniform, value);break;case "vec3":this.gl.uniform3fv(uniform, value);break;case "vec4":this.gl.uniform4fv(uniform, value);break;case "ivec2":this.gl.uniform2iv(uniform, value);break;case "ivec3":this.gl.uniform3iv(uniform, value);break;case "ivec4":this.gl.uniform4iv(uniform, value);break;case "bvec2":this.gl.uniform2iv(uniform, value.map(v => v ? 1 : 0));break;case "bvec3":this.gl.uniform3iv(uniform, value.map(v => v ? 1 : 0));break;case "bvec4":this.gl.uniform4iv(uniform, value.map(v => v ? 1 : 0));break;// 矩阵类型case "mat2":this.gl.uniformMatrix2fv(uniform, false, value);break;case "mat3":this.gl.uniformMatrix3fv(uniform, false, value);break;case "mat4":this.gl.uniformMatrix4fv(uniform, false, value);break;// 采样器类型case "sampler2D":case "samplerCube":this.gl.uniform1i(uniform, textureLoadingArray.length);textureLoadingArray.push({ type, value })break;default:console.error(`Unsupported uniform type: ${type}`);}unifromBuffer.push(uniform)//    // 清除gl的全部贴图缓存// this.clearTextureCache()//     // 使用textureLoadingArray加载所有贴图//     textureLoadingArray.forEach(({ type, value }) => {//         if (type == "sampler2D") {//             this.loadTexture(this.gl, value)//         } else {//             // this.loadCubeTexture(this.gl, value)//         }//     })}}// 动画循环draw(time) {if (!this.isAnimating) return;// 设置时间制服this.gl.uniform1f(this.timeUniformLocation, time * 0.001);// 绘制三角形this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);// 请求下一帧动画requestAnimationFrame(this.draw.bind(this));}// 开始动画startAnimation() {this.isAnimating = true;requestAnimationFrame(this.draw.bind(this));}// 暂停动画pauseAnimation() {this.isAnimating = false;}// 恢复动画resumeAnimation() {if (!this.isAnimating) {this.isAnimating = true;requestAnimationFrame(this.draw.bind(this));}}// 修改片段着色器源代码changeFragmentShader(fragmentShaderSource, config) {this.fragmentShaderSource = this.createHeader(config.customUniforms) + fragmentShaderSource;;console.log("will compileShader", this.fragmentShaderSource);this.fragmentShader = this.compileShader(this.gl, this.fragmentShaderSource, this.gl.FRAGMENT_SHADER);if (this.fragmentShader) {// 删除旧的着色器程序this.gl.deleteProgram(this.program);// 创建新的着色器程序this.program = this.createProgram(this.gl, this.vertexShader, this.fragmentShader);if (this.program) {// 获取新的属性和制服的位置this.positionAttributeLocation = this.gl.getAttribLocation(this.program, 'a_position');this.resolutionUniformLocation = this.gl.getUniformLocation(this.program, 'iResolution');this.timeUniformLocation = this.gl.getUniformLocation(this.program, 'iTime');// 获取新的颜色制服的位置this.colorUniformLocations = [];for (let i = 1; i <= 10; i++) {this.colorUniformLocations.push(this.gl.getUniformLocation(this.program, `iColor${i}`));}// 启用属性this.gl.enableVertexAttribArray(this.positionAttributeLocation);this.gl.vertexAttribPointer(this.positionAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);// 使用新的着色器程序this.gl.useProgram(this.program);// 设置分辨率制服this.gl.uniform2f(this.resolutionUniformLocation, this.gl.canvas.width, this.gl.canvas.height);this.setCustomUniforms(config.customUniforms)if (config && config.colors) {this.setColors(colors)} else {this.setColors([[1.0, 0.0, 0.0], // 红色[0.0, 1.0, 0.0], // 绿色[0.0, 0.0, 1.0], // 蓝色[1.0, 1.0, 0.0], // 黄色[1.0, 0.0, 1.0], // 紫色[0.0, 1.0, 1.0], // 青色[1.0, 0.5, 0.0], // 橙色[0.5, 0.0, 1.0], // 紫罗兰色[0.5, 1.0, 0.0], // 黄绿色[0.0, 0.5, 1.0]  // 天蓝色])}}}}// 清除纹理缓存的辅助方法clearTextureCache() {const gl = this.gl;// 解绑所有纹理单元for (let i = 0; i < gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); i++) {gl.activeTexture(gl.TEXTURE0 + i);gl.bindTexture(gl.TEXTURE_2D, null);gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);}// 这里可以扩展为记录所有创建的纹理对象并删除它们// 例如，如果有一个 this.textureObjects 数组存储了所有纹理对象// this.textureObjects.forEach(texture => gl.deleteTexture(texture));// this.textureObjects = [];}// 加载二维纹理loadTexture(gl, url) {console.log("加载二维纹理", gl, url);const texture = gl.createTexture();gl.bindTexture(gl.TEXTURE_2D, texture);// 设置默认纹理数据，避免在图像加载完成前使用未初始化的纹理const level = 0;const internalFormat = gl.RGBA;const width = 1;const height = 1;const border = 0;const srcFormat = gl.RGBA;const srcType = gl.UNSIGNED_BYTE;const pixel = new Uint8Array([0, 0, 255, 255]);  // 蓝色像素gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,width, height, border, srcFormat, srcType,pixel);const image = new Image();image.onload = function () {gl.bindTexture(gl.TEXTURE_2D, texture);// 设置纹理参数以支持非 2 的幂次方纹理gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);// 非 2 的幂次方纹理不支持生成 mipmap，所以这里不调用 gl.generateMipmap// gl.generateMipmap(gl.TEXTURE_2D); };image.src = url;return texture;}// 加载立方体纹理loadCubeTexture(gl, urls) {const texture = gl.createTexture();gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);const faceTargets = [gl.TEXTURE_CUBE_MAP_POSITIVE_X, gl.TEXTURE_CUBE_MAP_NEGATIVE_X,gl.TEXTURE_CUBE_MAP_POSITIVE_Y, gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,gl.TEXTURE_CUBE_MAP_POSITIVE_Z, gl.TEXTURE_CUBE_MAP_NEGATIVE_Z];urls.forEach((url, i) => {const image = new Image();image.onload = function () {gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);gl.texImage2D(faceTargets[i], 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);gl.generateMipmap(gl.TEXTURE_CUBE_MAP);};image.src = url;});return texture;}// 更新画布大小updateCanvasSize(width, height) {this.canvas.width = width;this.canvas.height = height;this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);this.gl.uniform2f(this.resolutionUniformLocation, this.gl.canvas.width, this.gl.canvas.height);}// 设置颜色制服setColors(colors) {console.log('setColors', colors);for (let i = 0; i < colors.length; i++) {this.gl.uniform3fv(this.colorUniformLocations[i], colors[i]);}}// 销毁dispose() {this.pauseAnimation()// 清理WebGL资源if (this.gl) {// 删除缓冲区const buffers = this.gl.getParameter(this.gl.ARRAY_BUFFER_BINDING);if (buffers) {this.gl.deleteBuffer(buffers);}// 删除纹理const textures = this.gl.getParameter(this.gl.TEXTURE_BINDING_2D);if (textures) {this.gl.deleteTexture(textures);}// 删除着色器程序if (this.program) {this.gl.deleteProgram(this.program);}// 删除帧缓冲区const framebuffers = this.gl.getParameter(this.gl.FRAMEBUFFER_BINDING);if (framebuffers) {this.gl.deleteFramebuffer(framebuffers);}}}

使用

const canvasDom = document.getElementById('glCanvas');
const fragmentShaderSource = `void main() {vec2 st = gl_FragCoord.xy/iResolution.xy;// 简单示例：根据时间和坐标生成颜色vec3 color = mix(iColor1, iColor2, st.x);gl_FragColor = vec4(iColor7, 1.0);}
`;// {
//     inputmat22: [1, 2, 3, 4],
//     inputmat33: [1, 2, 3, 4, 5, 6, 7, 8, 9],
//     inputmat44: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
// }
const customUniforms = [// 标量类型{ name: "inputFloat", type: "float", value: 3.14 },{ name: "inputInt", type: "int", value: 42 },{ name: "inputBool", type: "bool", value: true },// 向量类型{ name: "inputVec2", type: "vec2", value: [1.0, 2.0] },{ name: "inputVec3", type: "vec3", value: [1.0, 0.0, 0.0] },{ name: "inputVec4", type: "vec4", value: [1.0, 2.0, 3.0, 4.0] },{ name: "inputIVec2", type: "ivec2", value: [1, 2] },{ name: "inputIVec3", type: "ivec3", value: [1, 2, 3] },{ name: "inputIVec4", type: "ivec4", value: [1, 2, 3, 4] },{ name: "inputBVec2", type: "bvec2", value: [true, false] },{ name: "inputBVec3", type: "bvec3", value: [true, false, true] },{ name: "inputBVec4", type: "bvec4", value: [true, false, true, false] },// 矩阵类型{ name: "inputMat2", type: "mat2", value: [1, 2, 3, 4] },{ name: "inputMat3", type: "mat3", value: [1, 2, 3, 4, 5, 6, 7, 8, 9] },{name: "inputMat4", type: "mat4", value: [1, 0, 0, 0,0, 1, 0, 0,0, 0, 1, 0,0, 0, 0, 1]},// 采样器类型{ name: "inputSampler2D", type: "sampler2D", value: "./texture1.png" }, // 这里的 0 是纹理单元编号{ name: "inputSampler2D2", type: "sampler2D", value: "./texture2.png" }, // 这里的 0 是纹理单元编号{ name: "inputSamplerCube", type: "samplerCube", value: ["./texture2.png", "./texture2.png", "./texture2.png", "./texture2.png", "./texture2.png", "./texture2.png"] } // 这里的 1 是纹理单元编号
];
const webGLShaderToy = new WebGLShaderToy(canvasDom, fragmentShaderSource, customUniforms);
webGLShaderToy.startAnimation();// 示例：修改片段着色器
setTimeout(() => {const newFragmentShaderSource = `// precision mediump float;// uniform vec2 iResolution;// uniform float iTime;// uniform vec3 iColor1;// uniform vec3 iColor2;// uniform vec3 iColor3;// uniform vec3 iColor4;// uniform vec3 iColor5;// uniform vec3 iColor6;// uniform vec3 iColor7;// uniform vec3 iColor8;// uniform vec3 iColor9;// uniform vec3 iColor10;void main() {vec2 st = gl_FragCoord.xy / iResolution.xy;  // 归一化纹理坐标vec3 color = mix(iColor7, iColor10, st.y);// 对纹理进行采样，使用归一化的纹理坐标vec4 texColor = texture2D(inputSampler2D, st);// 使用采样得到的颜色作为输出gl_FragColor = vec4(texColor);}`;webGLShaderToy.changeFragmentShader(newFragmentShaderSource, { customUniforms });
}, 5000);// // 示例：更新画布大小
// // setTimeout(() => {
// //     webGLShaderToy.updateCanvasSize(800, 600);
// // }, 10000);
// 示例：更新画布大小
setTimeout(() => {webGLShaderToy.updateCanvasSize(1920, 1080);
}, 10000);// 示例：暂停动画
setTimeout(() => {console.log("pauseAnimation");webGLShaderToy.pauseAnimation();
}, 15000);// 示例：恢复动画
setTimeout(() => {console.log("resumeAnimation");webGLShaderToy.resumeAnimation();
}, 20000);