WebGL 绘制圆点

前言

这篇文章不说WebGL相关概念了，初学者先到网上看看WebGL相关概念。这里着重写一下在vue3前端框架下，如何通过webGL绘制圆点。

着色器代码(画点)

画点相关的着色器代码有顶点着色器和片元着色器，代码如下：

顶点着色器：

const vertexShaderSrc = `
    void main() {
     gl_Position = vec4(0, 0, 0, 1.0);
     gl_PointSize = 20.0;
    }
`;

片元着色器：

const fragmentShaderSrc = `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

初始化着色器

在网上找的一个通用的初始化着色器代码，如下所示：

function loadShader(gl, type, source) {
  //根据着色类型，建立着色器对象
  const shader = gl.createShader(type);
  //将着色器源文件传入着色器对象中
  gl.shaderSource(shader, source);
  //编译着色器对象
  gl.compileShader(shader);
  //返回着色器对象
  return shader;
}
export function initShaders(gl, vsSource, fsSource) {
  //创建程序对象
  const program = gl.createProgram();
  //建立着色对象
  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
  //把顶点着色对象装进程序对象中
  gl.attachShader(program, vertexShader);
  //把片元着色对象装进程序对象中
  gl.attachShader(program, fragmentShader);
  //连接webgl上下文对象和程序对象
  gl.linkProgram(program);
  //启动程序对象
  gl.useProgram(program);
  //将程序对象挂到上下文对象上
  gl.program = program;
}

代码中注释蛮详细的。

vue3框架使用webGL画点

这里直接贴上全部代码了，如下所示：

<template>
  <div class="point-wrapper">
    <div style="margin-bottom: 20px">绘制点</div>
    <canvas id="point" width="100" height="100"></canvas>
  </div>
</template>

<script>
export default {
  name: "point",
};
</script>


<script setup>
import { onMounted } from "vue";
import { initShaders } from "@/utils/myGL.js";

const vertexShaderSrc = `
void main() {
 gl_Position = vec4(0, 0, 0, 1.0);
 gl_PointSize = 20.0;
}
`;

const fragmentShaderSrc = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

const fragmentShaderSrcCircle = `
precision mediump float;
void main() {
  float d = distance(gl_PointCoord, vec2(0.5, 0.5));
  if(d < 0.5) {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  } else { 
    discard; 
  }
}
`;

onMounted(() => {
  const canvas = document.getElementById("point");
  // webgl画笔
  const gl = canvas.getContext("webgl");
  // 初始化着色器
  initShaders(gl, vertexShaderSrc, fragmentShaderSrc);
  // 指定将要用来清理绘图区的颜色
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // 清理绘图区
  gl.clear(gl.COLOR_BUFFER_BIT);
  // 绘制顶点
  gl.drawArrays(gl.POINTS, 0, 1);
  setTimeout(() => {
    initShaders(gl, vertexShaderSrc, fragmentShaderSrcCircle);
    // 指定将要用来清理绘图区的颜色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    // 清理绘图区
    gl.clear(gl.COLOR_BUFFER_BIT);
    // 绘制顶点
    gl.drawArrays(gl.POINTS, 0, 1);
  }, 5000);
});
</script>

<style lang="scss" scoped>
.point-wrapper {
  width: 200px;
  height: 200px;
  background-color: gray;
}
</style>

myGL.js中放的是初始化着色器initShaders 接口。

大家可以拷贝代码运行一下，刚开始出现一个正方形点，5秒后变成圆点