为一张漂亮的图片披上WebGL画布

前端

2023-11-08 16:19:09

引言

欢迎来到WebGL绘图之旅的下一站！在本次旅途中，我们将踏上绘制图片的新征程。通过深入学习，你将掌握使用WebGL绘制任意图片的奥秘，并将一张美丽的图片呈现在WebGL画布之上。

绘制图片的本质

WebGL绘制图片的本质在于将图片分解为一系列像素，并将这些像素以点阵的方式呈现在画布之上。每一个像素都有自己的颜色值，这些颜色值组合在一起就形成了图片的整体样貌。

WebGL绘制图片的关键步骤

加载图片 ：使用JavaScript的FileReader API或XMLHttpRequest对象将图片数据加载至内存。
创建WebGL纹理 ：利用WebGL的纹理对象存储图片数据，为图片分配显存空间。
创建顶点着色器和片元着色器 ：编写WebGL着色器程序，定义顶点和片元的处理方式。
配置顶点数据 ：为图片创建顶点数据，定义顶点的位置、颜色和纹理坐标。
配置纹理数据 ：将图片数据上传至WebGL纹理对象，并配置纹理参数。
渲染图片 ：利用WebGL的绘图函数将顶点数据和纹理数据渲染至画布之上。

实际案例

为了加深你的理解，我们以一张具体的图片为例，逐步讲解WebGL绘制图片的具体过程。

加载图片

const image = new Image();
image.onload = function() {
  // 图片加载完成后执行
};
image.src = 'path/to/image.png';

创建WebGL纹理

const gl = canvas.getContext('webgl');
const texture = gl.createTexture();

创建顶点着色器和片元着色器

const 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;
  }
`;

const fragmentShaderSource = `
  precision mediump float;

  varying vec2 v_texCoord;

  uniform sampler2D u_texture;

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

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

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

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

配置顶点数据

const vertices = [
  -1.0, -1.0,  0.0, 0.0,
   1.0, -1.0,  1.0, 0.0,
   1.0,  1.0,  1.0, 1.0,
  -1.0,  1.0,  0.0, 1.0,
];

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

配置纹理数据

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D);

渲染图片

gl.useProgram(program);

const positionLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 16, 0);

const texCoordLocation = gl.getAttribLocation(program, 'a_texCoord');
gl.enableVertexAttribArray(texCoordLocation);
gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 16, 8);

const textureLocation = gl.getUniformLocation(program, 'u_texture');
gl.uniform1i(textureLocation, 0);

gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);