如何用WebGL绘制矩形

#javascript#webgl

背景

WebGL和Canvas都是用于在Web浏览器中进行图形渲染的API，但它们的设计理念和使用方式有所不同。如果你想要使用WebGL的API来实现和类似Canvas API一样的功能，需要掌握WebGL的相关知识，并将其应用到实践中。

以下是一些实现和Canvas API相似功能的WebGL API的示例： Canvas API提供了简单的绘制矩形、圆形、线条等基本形状的函数，WebGL也可以通过绘制三角形来实现类似的功能。

案例

下面是使用WebGL绘制一个矩形的示例代码：

先准备一个canvas容器

<canvas id="myCanvas" width="500" height="500"></canvas>

绘制逻辑

// 获取WebGL上下文对象
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

// 顶点坐标和颜色
var vertices = [    -0.5, 0.5, 1.0, 0.0, 0.0,    -0.5, -0.5, 1.0, 0.0, 0.0,    0.5, 0.5, 1.0, 0.0, 0.0,    0.5, -0.5, 1.0, 0.0, 0.0,];

// 创建缓冲区对象
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 编译顶点着色器和片元着色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
    attribute vec2 a_position;
    attribute vec3 a_color;
    varying vec3 v_color;
    void main() {
        gl_Position = vec4(a_position, 0.0, 1.0);
        v_color = a_color;
    }
`);
gl.compileShader(vertexShader);

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
    precision mediump float;
    varying vec3 v_color;
    void main() {
        gl_FragColor = vec4(v_color, 1.0);
    }
`);
gl.compileShader(fragmentShader);

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

// 启用顶点属性
var a_position = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(a_position);
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 20, 0);

var a_color = gl.getAttribLocation(program, 'a_color');
gl.enableVertexAttribArray(a_color);
gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, 20, 8);

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

总结

需要注意的是，WebGL的API相对于Canvas API来说更加底层和复杂，需要开发者对图形学和线性代数有一定的了解。同时，WebGL也可以更灵活地实现各种3D和高级效果，比如阴影、反射、折射、粒子系统等等，但这些需要更加深入的了解和实践。

评论