WebGL基础：着色器基础知识
今天由字节跳动的"yancy"童鞋给大家重磅推出一篇WebGL的干货接下来让我们开启奇幻旅程，进入 3D 的世界。
本文作者：yancy
1. 认识3D
首先我们要介绍的是几个概念，这是我们要进入到 3D 不可或缺的内容。认识一下它们吧。
1.1 视点，视线，目标点，上方向
这几个概念在WebGL中属于最常见的内容。
- 视点：可以简易的理解为眼睛，也叫观察点
- 目标点：可以理解为我们要看的物体（任何物体）
- 上方向：头顶的方向。 实际生活中，我们的目光总是以我们的眼睛为起始点，到达我们想要看到的物体，同时，随着我们观察的角度不同，物体也会呈现不一样的形态。以一张图说明吧。
如此几个内容，创建出了3D世界的基本显示模型，由此可见其重要程度。后面我们也会说到如何在WebGL中设定这几个内容。也会有的小伙伴把视点称为相机，目标点称为画布。其实是一样的道理。按照自己的理解记忆就好。
1.2 可视范围
可视范围指的是我们所能看到的最大范围。如：一般情况下我们看不到自己身后的事物。 众所周知，三维物体具有深度的概念。在我们的理解中，深度就是
z轴。 虽然我们可以将物体放置在三维空间中的任何位置，但是在WebGL中，可视范围之外的物体是不被绘制的，这也是为了节省开销。1.3 可视空间
水平视角、垂直视角、可视深度定义了可视空间的概念。 可视空间分为两种。 - 正射投影：与物体的远近无关，通常用在建筑设计和建模上。
- 透视投影：我们平时观察的真实世界都是透视投影。更有深度的感觉。
1.3 着色器
如果想渲染
3D图形，就需要经过一系列的步骤，这些步骤称为渲染管线。在开发WebGL程序时，我们就需要通过着色器语言跟GPU进行沟通，用来设定我们需要渲染和显示的图形。 由此可见：着色器是编写WebGL时最重要的一点（没有之一）。我们之所以能生成并操作3D图像，都是因为着色器在起作用。WebGL中着色器分为两种。顶点着色器和片元着色器。1.3.1 顶点着色器
- 这里的顶点代表的是组成物体的每一个点。* 顶点着色器的功能主要是将位置数据经过矩阵变换、计算光照之后生成顶点颜色、变换纹理坐标。并将生成的数据输出到片元着色器。
1.3.2 片元着色器
片元着色器的作用是将光栅化阶段生成的每个片元，计算出每个片元的最终元素。
- 注：* 由于着色器内容比较重要，这里我们先引入这两个概念，先简单理解就可以，后面专门对着色器进行分享。
2. 绘制图形
2.1 获取绘图上下文
了解了第一小节的内容之后，我们开始进入到
WebGL开发实战中。 还记得Canvas中第一步需要干什么吗？ 没错，需要获取Canvas元素和绘图上下文。WebGL开发也不例外，也需要首先获取元素和绘图上下文。形如下方代码所示：2.2 初始化着色器
2.2.1. 编写着色器代码
获取到绘图上下文之后，我们需要初始化
WebGL的着色器了，着色器代码是以字符串的形式嵌入到渲染程序中，所以我们需要编写两个着色器的字符串。 两个着色器代码都是以字符串的形式存在，并在执行渲染时嵌入到渲染流程内。 说明： void main() {}: 创建一个主函数。gl_Position: 指定绘制的坐标，接收一个拥有4个浮点分量的vec4数据。分别代表x,y,z,w数据gl_PointSize: 表示要绘制图形的尺寸大小。gl_FragColor: 定义图形颜色，1.0 0.0 0.0 1.0分别代表r g b a
2.2.2. 创建着色器
当然，只是编写完着色器代码依然不能完成渲染工作，接下来我们就需要将着色器添加到渲染流程内
2.2.3. 着色器编译
完成上述两步之后，我们就需要将着色器代码添加到着色器中。看下例子。
2.2.4. 创建 program
完成编译之后，我们需要将着色器添加到渲染程序中。
2.2.5. 绘制图形
完成上述步骤之后，就可以绘制我们的图形了。这里我们以一个点为例。在画布上绘制一个点出来。
gl.drawArrays(gl.POINTS, 0, 1);此时就可以打开页面，看到我们绘制的这个点了。 总结代码：
3. 渲染管线
3.1 基础内容介绍
WebGL的渲染依赖底层GPU的渲染能力。所以WebGL渲染流程和GPU内部的渲染管线是相符的。- 渲染管线的作用是将3D模型转换为2维图像。* 在早期，渲染管线是不可编程的，叫做固定渲染管线，工作的细节流程已经固定，修改的话需要调整一些参数。 现代的
GPU所包含的渲染管线为可编程渲染管线，可以通过编程GLSL，着色器语言来控制一些渲染阶段的细节。
3.2 渲染过程
- （心理承受弱的同学可跳过此小节）*
WebGL的渲染过程分为以下几项： - 顶点着色器
- 图片装配
- 光栅化
- 片元着色器
- 逐片段操作（本文不会分享此内容）
- 裁剪测试
- 多重采样操作
- 背面剔除
- 模板测试
- 深度测试
- 融合
- 缓存 这里一系列的名词可能会吓到很多同学，千万别被名词吓到哟，接下来的过程中会详细说明。也希望通过本文可以让大家理解基本的渲染流程。附图解一张，助大家理解。
4. 顶点着色器
- 顶点着色器的作用是通过计算获得最终的顶点坐标*， 如：
A --> () => {…………} ==> A1：坐标A经过一系列的计算，最终获取坐标A1B --> () => {…………} ==> B1：坐标B经过一系列的计算，最终获取坐标B1- ………… 顶点着色器计算出来的坐标将会渲染到最终的显示画布上。 此外，顶点着色器还会计算如下内容：颜色、纹理坐标、顶点尺寸…… 在顶点着色器阶段通常会涉及到三个类型的变量。
- attribute：针对单一顶点生效。
- 通常用于：顶点位置、顶点大小等内容
- uniform：影响所有顶点
- 通常用于：旋转、平移、缩放等位置变换、颜色处理等内容。
- varying：可通过顶点着色器传入到片元着色器。 像
attribute这个变量之前我们就用到过，用来设置了顶点的位置和大小。 回顾一下 其他的两个变量暂时没有用到，接下来的内容里会用到这两种类型的变量。敬请期待
WebGL基础：着色器基础知识相关推荐
- HLSL着色器原理：(一）着色器基础
小光!小光!小光!小光!小光! 本文所总结视频为或许是小光从油管搬运到B站的视频:传送门 本篇主要汇总HLSL着色器的知识原理部分,并涉及少量必要的代码知识点,主要为知识点总结,实践部分建议参照其他S ...
- Three.js着色器基础【含源码】
着色器(Shader)是在 GPU 上运行的程序.它们被称为着色器的原因是,最初它们只处理3D对象的着色,但后来扩展到了3D对象之外.它们需要与传统编程不同的思维方式,因为程序是针对每个顶点或像素并行 ...
- OpenGL着色器基础
前言: 本文翻译自LearnOpengl经典教程,OpenGL着色器基础介绍的比较通俗易懂,特总结分享一下! 为什么要使用着色器? 我们知道,OpenGL一般使用经典的固定渲染管线来渲染对象,但是随着 ...
- 《OpenGL编程指南》一第2章 着色器基础
本节书摘来自华章出版社<OpenGL编程指南>一书中的第2章,作者 Bill Licea-Kane ,更多章节内容可以访问云栖社区"华章计算机"公众号查看 第2章 着色 ...
- Unity渲染(二):Shader着色器基础入门之渲染Image图片
Unity渲染(二):图片渲染 通过这里,你会学习到怎么将一张图片渲染到UI的Image组件或者SpriteRenderer上,以及透明物体的渲染. 上一章:Unity渲染(一):着色器基础入门之纯色 ...
- webgl入门(2)-初识webgl和着色器
前言 原书中第2章非常长,如果整理成一个文档的话,得看好多天.为了浏览方便,我将其拆分成若干小节,方便大家学习. webgl采用HTML5中引入的canvas元素来定义页面的绘图区域.如果没有WegG ...
- OpenGL(三)——OpenGL着色器基础
上一篇我们介绍了OpenGL基础相关的知识:OpenGL图形绘制和OpenGL入门,今天介绍一下OpenGL另一重要的成员----OpenGL着色器. 什么是OpenGL着色器? Open GL ES ...
- OpenGL 着色器基础
Instagram,Snapchat,Photoshop. 所有这些应用都是用来做图像处理的.图像处理可以简单到把一张照片转换为灰度图,也可以复杂到是分析一个视频,并在人群中找到某个特定的人.尽管这些 ...
- 【OPENGL】第三篇 着色器基础（一）
在这一章,我们会学习什么是着色器(Shader),什么是着色器语言(OpenGL Shading Language-GLSL),以及着色器怎么和OpenGL程序交互. 首先我们先来看看什么叫着色器. ...
最新文章
- windows崩溃转储文件
- 数组 ——求出一组数的最大值（用数组实现）
- javaMail邮件发送
- php---自动生成flash图表（包括你想要的其他类型的图表）
- 龙格库塔法和欧拉法求解微分方程的比较
- [DC]学习design compiler
- php如何实现qq第三方登录,PHP实现qq第三方登录
- python处理pcap文件_[转载]Python读取pcap文件
- 是什么让spring 5放弃了使用Guava Cache？
- Glide4.0源码全解析（三），into()方法背后的故事
- java提高篇-----字符串
- odoo Botton标签属性详解
- 德软件开发者否认蓄意植入“心血”安全漏洞
- 阿里巴巴 Java开发手册 最新官网下载
- 金融反欺诈 常用特征处理方法
- 推荐21个高质量图片网站，免费免版权，值得收藏
- LTE ue连接enb数据包流程解析
- 把这304道React的面试题刷完，前端面试没有在怕的！
- 反转链表-就地逆置法
- ISTP论文发表 SCI论文发表 EI论文发表常识
热门文章
- HLSL着色器原理：(一）着色器基础