WebGL简介与基本概念

2023-09-18 03:29:14

Webgl入门(1)-WebGL 简介与基本概念

WebGL（Web Graphics Library）是一种用来在网页上绘制和渲染复杂三维图形（3D图形）,并允许用户与之进行交互的技术。它是一种跨平台、跨浏览器的网页三维图形标准，允许您在网页上创建和渲染复杂的3D图形，并与用户进行交互。WebGL是基于OpenGL ES 2.0标准的，它提供了与OpenGL ES 2.0相同的API，因此您可以使用熟悉的OpenGL ES 2.0代码来开发WebGL应用程序。

WebGL入门

要开始使用WebGL，您需要先安装一个支持WebGL的浏览器。目前，大多数主流浏览器都支持WebGL，包括谷歌浏览器、火狐浏览器、微软Edge浏览器等。

安装好浏览器后，您就可以开始编写WebGL应用程序了。WebGL应用程序是由HTML、CSS和JavaScript组成的。HTML用于定义页面的结构，CSS用于定义页面的样式，JavaScript用于编写WebGL应用程序的代码。

WebGL的API非常强大，它提供了丰富的函数和方法，允许您创建和渲染复杂的3D图形。您还可以使用WebGL来与用户进行交互，例如您可以让用户旋转或缩放3D图形。

WebGL基本概念

在学习WebGL之前，您需要先了解一些基本概念。

顶点：顶点是3D图形中最基本的概念。顶点是一个点，它具有位置、颜色和法线等属性。
面：面是由顶点组成的。面是3D图形的基本组成部分。
纹理：纹理是用于给3D图形添加颜色的图像。
着色器 ：着色器是用于计算顶点和面的颜色的程序。
渲染管线 ：渲染管线是将3D图形渲染到屏幕上的过程。

结语

WebGL是一个非常强大的工具，它允许您在网页上创建和渲染复杂的3D图形。如果您想学习WebGL，您可以参考一些WebGL教程或书籍。

实例

下面是一个简单的WebGL示例代码：

// 定义顶点着色器
var vertexShaderSource = `
    attribute vec3 position;
    attribute vec3 color;
    varying vec3 vColor;

    void main() {
        vColor = color;
        gl_Position = vec4(position, 1.0);
    }
`;

// 定义片段着色器
var fragmentShaderSource = `
    precision mediump float;
    varying vec3 vColor;

    void main() {
        gl_FragColor = vec4(vColor, 1.0);
    }
`;

// 创建WebGL上下文
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");

// 编译着色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

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

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

// 使用着色器程序
gl.useProgram(program);

// 创建顶点数据
var vertices = new Float32Array([
    -0.5, -0.5, 0.0,
     0.5, -0.5, 0.0,
     0.0,  0.5, 0.0
]);

// 创建颜色数据
var colors = new Float32Array([
    1.0, 0.0, 0.0,
    0.0, 1.0, 0.0,
    0.0, 0.0, 1.0
]);

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

var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);

// 获取顶点着色器中的位置属性
var positionAttribute = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(positionAttribute);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionAttribute, 3, gl.FLOAT, false, 0, 0);

// 获取顶点着色器中的颜色属性
var colorAttribute = gl.getAttribLocation(program, "color");
gl.enableVertexAttribArray(colorAttribute);
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.vertexAttribPointer(colorAttribute, 3, gl.FLOAT, false, 0, 0);

// 设置视口
gl.viewport(0, 0, canvas.width, canvas.height);

// 清空颜色缓冲区
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);