前端技术积累

三角形的绘制比点的绘制多对多一个步骤。那就是三角形需要创建缓冲区。有以下几种绘制三角形的方法。

以下例子主要用到以下GLSL知识。

  • gl.createBuffer：创建缓冲区。
  • gl.bindBuffer：绑定某个缓冲区对象为当前缓冲区。
  • gl.bufferData：往缓冲区中复制数据。
  • gl.enableVertexAttribArray：启用顶点属性。
  • gl.vertexAttribPointer：设置顶点属性从缓冲区中读取数据的方式。

三种绘制方式的代码几乎是一样的。只是在进行渲染时drawArrays(type,start,count)中的type不一样。

  • 顶点着色器代码
<script id="vertexShader" type="x-shader/x-vertex">
  //attribute声明vec4类型变量apos
  attribute vec4 apos;
  void main() {
    //顶点坐标apos赋值给内置变量gl_Position
    //逐顶点处理数据
    gl_Position = apos;
  }
</script>
1
2
3
4
5
6
7
8
9
  • 片元着色器代码
<script id="fragmentShader" type="x-shader/x-fragment">
  void main() {
    // 逐片元处理数据，所有片元(像素)设置为红色
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);
  }
</script>
1
2
3
4
5
6
  • javascript代码,主要由以下4部分代码构成
    • 获取WebGL上下文
    //通过getElementById()方法获取canvas画布
const canvas = document.getElementById('WebGL');
//通过方法getContext()获取WebGL上下文
const gl = canvas.getContext('WebGL');
//初始化着色器
const program = initShader(gl);
//初始化缓存区
const count = initBuffer(gl);
render(gl, program, count);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    • 声明初始化着色器函数
    //声明初始化着色器函数
function initShader(gl) {
    //顶点着色器源码
    const vertexShaderSource = document.getElementById('vertexShader').innerText;
    //片元着色器源码
    const fragmentShaderSource = document.getElementById('fragmentShader').innerText;
    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    gl.useProgram(program);
    return program;
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    • 初始化缓冲数据
    //初始化缓冲数据
function initBuffer(gl) {
    //类型数组构造函数Float32Array创建顶点数组
    const data = new Float32Array([
    -0.5, 0.5,
    -0.5, -0.5,
    0.5, 0.5,
    ]);

    //创建缓冲区对象
    var buffer = gl.createBuffer();
    //绑定缓冲区对象,激活buffer
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    //顶点数组data数据传入缓冲区
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
    return data.length/2;
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    • 渲染
    function render(gl, program, count) {
    //获取顶点着色器的位置变量apos，即aposLocation指向apos变量。
    const aposLocation = gl.getAttribLocation(program, 'apos');

    //缓冲区中的数据按照一定的规律传递给位置变量apos
    gl.vertexAttribPointer(aposLocation, 2, gl.FLOAT, false, 0, 0);
    //允许数据传递
    gl.enableVertexAttribArray(aposLocation);
    //设置清屏颜色为黑色。
    gl.clearColor(0, 0, 0, 1.0);
    //清屏
    gl.clear(gl.COLOR_BUFFER_BIT);
    //开始绘制图形
    gl.drawArrays(gl.TRIANGLES, 0, count);
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

# 1、常规方式

gl.drawArrays(gl.TRIANGLES, 0, 3);
1

# 2、三角形带

绘制三角形的数量 = 顶点数 - 2

 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
1

# 3、三角形扇

绘制三角形的数量 = 顶点数 - 2

 gl.drawArrays(gl.TRIANGLE_FAN, 0, 3);
1

# 4、动态绘制三角形

着色器中的代码跟动态绘制点的代码几乎是一样的。只是多了一个颜色插值的处理。

  • 顶点着色器代码
<script type="shader-source" id="vertexShader">
    //浮点数设置为中等精度
    precision mediump float;
    //接收 JavaScript 传递过来的点的坐标（X, Y）
    attribute vec2 a_Position;
    attribute vec4 a_Color;
    varying vec4 v_Color;
    void main(){
        // 最终的顶点坐标。
        gl_Position = vec4(a_Position, 0.0, 1.0);
        //进行颜色插值计算
        v_Color = a_Color;
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 片元着色器代码
<script type="shader-source" id="fragmentShader">
    //浮点数设置为中等精度
    precision mediump float;
    // 用来接收顶点着色器插值后的颜色。
    varying vec4 v_Color;
    void main(){
        // 点的最终颜色。
        gl_FragColor =  v_Color;
    }
</script>
1
2
3
4
5
6
7
8
9
10
  • javascript代码
    • WebGL上下文的获取
    //通过getElementById()方法获取canvas画布
const canvas = document.getElementById('WebGL');
//设置canvas尺寸为满屏
//注意设置canvas的尺寸必须在获取WebGL上下文之前调用
resizeCanvas(canvas);
//通过方法getContext()获取WebGL上下文
const gl = canvas.getContext('WebGL');
    1
    2
    3
    4
    5
    6
    7
    • canvas的尺寸动态设置
    //设置canvas的大小
function resizeCanvas(canvas, width, height) {
    if (canvas.width !== width) {
        canvas.width = width ? width : window.innerWidth;
    }
    if (canvas.height !== height) {
        canvas.height = height ? height : window.innerHeight;
    }
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    • 着色器中的变量赋值处理
    function assignValue(gl,program){
    let a_Position = gl.getAttribLocation(program, 'a_Position');
    let a_Color = gl.getAttribLocation(program, 'a_Color');
    gl.enableVertexAttribArray(a_Position);
    gl.enableVertexAttribArray(a_Color);

    let buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    //将缓冲区中的数据按照一定规律传递给a_Position,表示从缓存区中获取两个浮点型数据(浮点型数据，4个字节)，缓存区一行为4*6个字节，偏移量为0
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 4*6, 0);
    gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false,4*6, 8);
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    • 点击事件监听
    const positions = [];
function initClick() {  
    canvas.addEventListener("click", e => {
        const color = randomColor();
        const position = coordTransform(e.pageX, e.pageY)
        positions.push(...position, ...Object.values(color));
        // 顶点信息为 18 的整数倍即3个顶点时执行绘制操作，因为三角形由三个顶点组成，每个顶点由六个元素组成。
        if (positions.length % 18 == 0) {
            // gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
            render(gl);
        }
    })
}
//颜色值的随机生成
const random = Math.random;
function randomColor() {
    return {
        r: random(),
        g: random(),
        b: random(),
        a: random()
    };
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    • 声明初始化着色器函数
    //声明初始化着色器函数
function initShader(gl) {
    //顶点着色器源码
    const vertexShaderSource = document.getElementById('vertexShader').innerText;
    //片元着色器源码
    const fragmentShaderSource = document.getElementById('fragmentShader').innerText;
    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    gl.useProgram(program);
    return program;
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    • 屏幕坐标换算成裁剪坐标系(顶点着色器)的坐标
    //屏幕坐标换算成裁剪坐标系的坐标(在着色器中的坐标)
const { width, height } = canvas;
function coordTransform(x, y) {
    // 将 canvas 的坐标值 转换为 [-1.0, 1.0]的范围。
    const posisionX = 2 * x / width - 1;
    // canvas的 Y 轴坐标方向和 裁剪坐标系的相反。
    const positionY = -(2 * y / height - 1);
    return [posisionX, positionY];
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    • WebGL渲染
    function render(gl) {
    //设置清屏颜色为黑色。
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    if (positions.length > 0) {
        gl.drawArrays(gl.TRIANGLES, 0, positions.length / 6);
    }
}
//创建着色器程序
const program = initShader(gl);
constassignValue(gl,program)
initClick();
render(gl);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

参考

WebGL零基础入门教程(郭隆邦) (opens new window)
WebGL 入门与实践 (opens new window)
WebGL官方文档 (opens new window)

Last Updated: 6/24/2024, 6:04:56 PM

← 5、WebGL如何绘制一个矩形 →