小白学webgl合集-WebGL中给图片添加背景

一.实现效果

二.逻辑

为了在WebGL中给图片添加背景，主要的逻辑步骤包括初始化WebGL上下文、编写和编译着色器、创建和绑定缓冲区、加载和配置纹理以及绘制场景。以下是代码逻辑的详细说明：

1. 获取WebGL上下文

首先，通过获取<canvas>元素并调用getContext('webgl')方法来初始化WebGL上下文。

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

2. 定义顶点着色器和片段着色器

编写顶点着色器（vertex shader）和片段着色器（fragment shader）。顶点着色器负责处理顶点数据，并将纹理坐标传递给片段着色器；片段着色器则使用纹理坐标来获取纹理颜色，并将其绘制到屏幕上。

const vsSource = `
    attribute vec4 aPosition;
    attribute vec2 aTexCoord;
    varying vec2 vTexCoord;
    void main() {
        gl_Position = aPosition;
        vTexCoord = aTexCoord;
    }
`;

const fsSource = `
    precision mediump float;
    varying vec2 vTexCoord;
    uniform sampler2D uSampler;
    void main() {
        gl_FragColor = texture2D(uSampler, vTexCoord);
    }
`;

3. 初始化WebGL着色器程序

编译和链接着色器程序，然后使用该程序。

const program = initShader(gl, vsSource, fsSource);
gl.useProgram(program);

4. 定义顶点数据和索引数据

定义包含顶点位置和纹理坐标的顶点数据，以及用于绘制四边形的索引数据。顶点数据每个顶点包含5个元素（x, y, z, s, t），其中(x, y, z)是顶点位置，(s, t)是纹理坐标。