我做梦都没想到，短短几行代码竟能生成一只超萌 “小挠斧”

与世界分享这隻小挠斧

当你的“小挠斧”在屏幕上蹦蹦跳跳时，你肯定忍不住想要将它的乐趣分享给全世界！为此，你可以在线预览和保存你的作品。

结语

希望这篇文章能帮助你创作出属于自己的“小挠斧”。无论你将其用作个人作品还是与他人分享，这只小家伙一定会让你会心一笑！如果你需要进一步了解 ShaderJoy 或 GLSL，请随时在评论中留下你的问题，我将为你提供帮助。

准备好将想象付诸现实了吗？那就打开 ShaderJoy，让我们一起让“小挠斧”动起来吧！

注意：你可以在线创建和保存你的 “小挠斧”，然后在你的网站或博客中嵌入它。

以下是创建 “小挠斧” 的完整 JavaScript 代码：

// 定义画布变量并获取其上下文
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");

// 定义顶点着色器程序
var vertexShaderSource = `
    attribute vec2 a_position;
    attribute vec2 a_texCoord;
    varying vec2 v_texCoord;

    void main() {
        gl_Position = vec4(a_position, 0.0, 1.0);
        v_texCoord = a_texCoord;
    }
`;

// 定义片段着色器程序
var fragmentShaderSource = `
    precision mediump float;
    uniform sampler2D u_texture;
    varying vec2 v_texCoord;

    void main() {
        gl_FragColor = texture2D(u_texture, v_texCoord);
    }
`;

// 编译顶点着色器和片段着色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建着色器程序并链接着色器
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 创建一个缓冲区对象来存储顶点数据
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
var positions = [
    -1.0,  1.0,
    -1.0, -1.0,
     1.0,  1.0,
     1.0, -1.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// 创建一个缓冲区对象来存储纹理坐标数据
var texCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
var texCoords = [
    0.0, 0.0,
    0.0, 1.0,
    1.0, 0.0,
    1.0, 1.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoords), gl.STATIC_DRAW);

// 创建纹理对象并加载图像
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
var image = new Image();
image.onload = function() {
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
    gl.generateMipmap(gl.TEXTURE_2D);
};
image.src = "cute_axolotl.png";

// 激活纹理单元
gl.activeTexture(gl.TEXTURE0);

// 绑定纹理对象
gl.bindTexture(gl.TEXTURE_2D, texture);

// 获取纹理单元位置
var u_texture = gl.getUniformLocation(program, "u_texture");
gl.uniform1i(u_texture, 0);

// 启用顶点属性并指定数据缓冲区
gl.enableVertexAttribArray(0);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

gl.enableVertexAttribArray(1);
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);

// 使用着色器程序
gl.useProgram(program);

// 设置视口
gl.viewport(0, 0, canvas.width, canvas.height);

// 清除颜色缓冲区
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 绘制四边形
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);