webgl渲染管线、缓冲区绘制三角形

原创

已于 2023-01-11 00:08:48 修改 · 2.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#web #javascript #3d

于 2022-08-13 18:05:02 首次发布

本文介绍了WebGL的基本概念及其渲染管线流程，并通过绘制一个简单的三角形来演示如何使用WebGL进行3D图形开发。

文章目录

前言
一、WebGL是什么
二、WebGL渲染管线
三、绘制一个三角形

前言

作为gis专业的前端开发人员，工作中少不了与三维场景打交道，像cesium、threejs、mapbox-gl等前端渲染库底层都是封装了WebGL,本文以从一个基础的三角形开始入门WebGL的学习

一、WebGL是什么

WebGL 是一组基于 JavaScript 语言的图形规范，浏览器厂商按照这组规范进行实现，为 Web 开发者提供一套3D图形相关的 API。通过JavaScript和GLSL语言对电脑的显卡（GPU）进行操作，从而在屏幕上绘制出各种各样的3D应用。

二、WebGL渲染管线

不同与传统的前端开发，WebGL程序虽然也使用JavaScrip进行数据的传递与开发，但是却需要GLSL语言实现与GPU的通信（GPU是不认JavaScript的），为了将三维数据显示在浏览器的屏幕上，WebGL有一套固定的流程，这个流程称为渲染管线。
渲染管线大致可以分为以下几个步骤：

1 获取坐标元素

由JavaScript处理着色器需要的顶点坐标、颜色、纹理等信息，并负责为着色器提供这些数据。

数据的获取由JavaScript代码提供，这些步骤由CPU完成，然后通过webgl的相关方法将这些数据传递给着色器程序，由GPU运行着色器代码

2 顶点着色器

Webgl实际是控制GPU的渲染，GPU上运行的代码是一对着色器：顶点着色器和片元着色器，着色器在运行时会依次调用顶点着色器和片元着色器。

顶点着色器接收 JavaScript 传递过来的与顶点相关的信息，将顶点绘制到对应坐标,顶点着色器的赋值一般是通过以下这种形式，其中xyz是由webgl借助自己的方法从JavaScript取到的：

 gl_Position = vec4 (x, y, z, 1);

gl_Position 接收一个 4 维向量表示的坐标，即(X, Y ,Z ,W)，W 不等于 0，这个坐标是在裁剪坐标系中，我们称它为裁剪坐标，裁剪坐标W一般情况赋1就可以。他的原点在屏幕中心，X轴正方向向右，Y轴正方向向上，范围都是[-1,1]。

顶点着色器中既可以接受JavaScript提供的信息，又可以将与顶点相关的信息进行一定变换后传递给片元着色器。顶点着色器在数据的传递可以通过以下几个关键字：

关键字	描述
attributes	获取缓冲区内的数据信息，只能由外部传递给顶点着色器
uniform	一般用来传递全局信息
varyings	将顶点信息传递给片元
textures	获取纹理信息

3 图元装配

图元装配指的是将设置的点、纹理、颜色组装为可渲染多边形的过程。比如将三个顶点装配成三角形图元，顶点着色器执行了三次，形成了一个三角形图元。

图元有可能是一个点，一个线段，三角形或者其他多边形,，具体图元类型取决于在调用绘制函数时选择的图形类型。

4 光栅化阶段

光栅化阶段指将装配好的图元进行像素填充，同时在这个过程中可能还会将一些已经装配好但是不在屏幕显示范围内（遮挡、放大溢出屏幕、背面）的部分裁剪掉以提高WebGL的运行效率。

5 片元着色器

，光栅化阶段后的每个被填充过的像素都称为片元，在片元着色器阶段，GPU为片元内部的像素z逐一填充颜色信息。其运行的次数由图形的片元数决定。

步骤3 4对于开发者来说是无法直接控制的，WebGL会自动帮助完成这些工作

三、绘制一个三角形

1 初始化一个HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>webgl</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style>
		body {
     
     
			margin: 0;
			padding:<