什么是三角形条带？ 一般来说，我们的模型都是由连续的三角形组成的，会有多个三角形共用顶点的情况。...比如上面的条带，如果后续步骤中如果以 (v1, v2, v3) 顺时针为正面，那么下一个三角形的绘制应该是 (v2, v4, v3)， (v3, v4, v5)，(v4, v6, v5)......要想绘制一个三角形条带，顶点顺序应该是这样的 在 WebGPU 中，默认是逆时针顺序，也可由 GPUFrontFace 配置正面是顺时针还是逆时针。...剪裁：移除不会被渲染的部分以提高性能和渲染精细度。 屏幕映射：将坐标从单位立方体转换为屏幕坐标。 图元装配和遍历：确定三角形对应的像素。 像素着色：确定每个像素点的颜色。...着色有以下几种方法： 7.3.1 平面着色 - Flat Shading 一个三角形有三个顶点，我们选择一个代表顶点(第一个顶点，或者三角面的法线和颜色均值)，在给三角形着色时，针对这个顶点的颜色和法线计算光照效果
如果绘制带有 三角形条带（GL_TRIANGLE_STRIP）或者 扇形(GL_TRIANGLE_FAN)的网格，则可以启用 图元重启 将这些网格连接在一起，而不是单独调用glDrawElements。...为了连接不同网格而添加的 元素索引（或者退化三角形）数量取决与每个网格是三角扇形还是三角形条带以及每个条带中定义的索引数量。...连接不同的三角形条带时，我们需要检查两个相互连接的条带的最后一个三角形和第一个三角形的顺序。...第一个三角形条带的偶数编号的三角形 连接到 第二个三角形条带的第一个（因而是偶数编号的）三角形。 下图为两种情况下的三角形条带。...添加的新索引数量 和 生成退化三角形的数量 取决于 第一个三角形条带的 顶点数量。必须保留下一个连接条带的弯曲顺序。
://www.jianshu.com/p/0f740901da59) 这篇入门文章OpenGLES_绘制三角形中，使用的较为底层的代码，今天使用苹果为我们封装好的类，来实现一个较为好玩的东西－标题！...展示图 ＊学习目标 绘制一个运动的立方体 ---- ＊ 实现思路 * 实现步骤: * 第一步 .创建一个继承 GLKViewController(为我们封装了好多代码)的对象 * 第二步 .创建一个EAGLContext...对象负责管理gpu的内存和指令 * 第三步 .创建一个GLKBaseEffect 对象，负责管理渲染工作 * 第四步 .创建立方体的顶点坐标和法线 * 第五步 .绘图 * 第六步 .让立方体运动起来...// 讲顶点数据和法线数据加载到GUP 中去 glGenBuffers(1, &_vertexBuffer); glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer)...self configure]; // 2.配置 [self createBaseEffect]; // 3.创建渲染管理 [self addVertexAndNormal]; // 4.添加顶点坐标和法线坐标
绘制立方体之前，我们需要知道这个立方体的各个顶点坐标(找不到图，自己画的，请将就将就)： ?...事实上，我们代码画的确实是一个立方体，只是我们观察的角度是从正方体正面看过去的，立体的部分全被前面的面挡住了，只要我们旋转一下立方体，就能看到立体的部分了，不过这个问题会在下一篇讲到，这里先绘制立方体，...单调着色就是整个图元的颜色就是它的任何一个顶点的颜色，比如上面固定颜色的三角形效果；平滑着色下每个顶点都是单独进行的，顶点之间的点是所有顶点颜色的均匀插值计算而得，顶点与顶点颜色是在一起的，如下： GLfloat...如果法线向量已经为单位长度设置为 GL_FALSE 即可，这样可免去不必要的计算，提升效率； stride ： 表示上一个数据到下一个数据之间的间隔（同样是以字节为单位），OpenGL ES根据该间隔来从由多个顶点数据混合而成的数据块中跳跃地读取相应的顶点数据...这里它指向 CPU 内存中的顶点数据数组； 代码中我们给stride填值，以前都是写的0，现在是写出了具体步长，写0是针对单一数据，如只有顶点数据或颜色数据的时候，系统会自己计算匹配，这时候可以写0，若不是单一数据
传统上，大部分物体着色(shade of an object)是通过对每个顶点位置和法线应用光照并把产生的颜色存储在顶点(vertex)中来计算的。这些颜色将会在每一个三角形内部插值。...被model transform变换的是模型(model)的顶点(vertices)和法线(normals)。...窗口坐标(带有重新映射过的\(z\)值)被传递到光栅化阶段(rasterizer stage)。屏幕映射过程如下图: 接下来，我们描述与像素(和纹理坐标)关联的整数值和浮点值之间的转换关系。...在所有图形APIs中像素的位置的横坐标都是从左向右逐渐变大的，但纵坐标0点的位置在OpenGL和DirectX中是不一致的。...也可以认为光栅化是几何处理和像素处理的一个同步点(synchronization point)，因为由三个顶点(vertices，除了位置坐标，还包含别的信息，纹理坐标，法线)构成的三角形是在这里被发送到像素处理阶段的
设备，有GL_RGB和RL_RGBA 第四、五个参数指定图像的宽度和高度，必须是2的幂 第六个 确定纹理纹素的边界大小，OpenGL ES中总是被设置为0 第七个 指定初始化缓存所用的图像数据中的每个像素要保存的信息...OpenGL ES的灯光模拟包括：环境光、漫反射光、镜面反射光。 只有每个光源的环境光部分才会照射到三角形的后面。 光线与几何图形相互作用的关键：计算出每个几何物体照射和发散出来多少光线。...通过计算每个三角形与光的方向的垂直角度。 矢量积：右手法则。 VectorA × VectorB 的矢量积 和 B × A 是方向相反的。 光线计算依赖于表面法向量。法向量也是单位向量。...（constantColor属性仅适用于渲染单调不发光的物体） 对于立体表面而言，法线是有方向的：一般来说，由立体的内部指向外部的是法线正方向，反过来的是法线负方向。...OpenGL ES默认为指入屏幕的负的Z坐标轴，GLKMatrixMakeFrustum() 产生一个指入屏幕的带有正的Z坐标轴的视域（view volume）。
OpenGL(Open Graphics Library) 是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口，常用于CAD、虚拟现实、科学可视化程序和电子游戏开发。...OpenGL 中的坐标系似乎更符合我们的直觉。 原点在中间，Y 正轴向上，X 正轴向右。 注意 OpenGL 中的 X 轴， Y 轴和 Z 轴最大值是 1，最小值是 -1。...矩阵和矢量 因为是用来画图的，所以对矩阵和矢量也有支持。 vec2、vec3 和 vec3 代表 2、3 和 4 个浮点数的矢量。 ivec2、ivec3 和 ivec3 整数版本。....); // 白色 GLSL 对矢量的赋值、获取和构造也十分强大。...OpenGL 还可以通过我们定义的顶点索引来渲染三角形，比如我们发送 8 个顶点和一个顶点索引数组到 GPU，然后 OpenGL 就可以使用索引数组的顺序来渲染三角形了。
在本教程中，我们将创建一个由顶点和三角形组成的简单网格。...这些三角形集合在一起就构成任何mesh所代表的表面形状。 由于三角形是平的，是直线的边，所以它们可以用来完美地显示平面和直线的事物，就比如一个立方体的表面。...法线是一个垂直于表面的矢量。我们总是使用单位长度的法线，并用它们指向表面的外部，从而区分表面的内外。 法线还可以用来确定光线击中表面的角度(如果有的话)。它的具体使用方式取决于shader。...由于三角形总是在一个平面上的，所以不需要提供的单独的法线信息。但是，我们可以通过提供法线来达到一些“作弊”行为。在现实中，顶点是没有法线的，但三角形有。...理想情况下，这两个矢量之间的夹角为90°。它们的交叉积产生定义三维空间所需的第三个方向。 在现实中，角度往往不是90°，但结果仍然够好。所以切线是一个三维向量，但是Unity实际上使用了一个4D向量。
实际上，一旦有了更多的顶点，我们就可以移动它们。然后，我们不需要粗糙感，也可以制作出实际的粗糙表面！但是子四边形仍然有同样的问题。我们要更加细分它们吗？这将导致带有大量三角形的巨大网格。...要将其变成指向上的法向矢量，我们必须将切线绕Z轴旋转90°。 ? ? （使用实际的法线） 矢量旋转如何工作的？ 通过交换向量的X和Y分量，并翻转新的X分量的符号，可以将2D向量逆时针旋转90°。...是不是可以做一次然后将法线存储在纹理中呢。 这可以用于纹理过滤吗？ 双线性和三线性过滤将在法线向量之间混合，就像法线在三角形之间插值一样。因此，我们必须将采样的法线标准化。...（在立方体和球体上错误的凹凸映射） 可以先对齐立方体的一个面，以使其符合我们的假设。通过交换和翻转尺寸来支持其他面。但这是建立在假定一个轴对齐的立方体上。当立方体具有任意旋转时，它会变得更加复杂。...由于这只是快速的可视化，所以无需费心对其进行优化。 将此组件添加到带有网格的某些对象中以查看其顶点法线。 ? （展示法线） 线的合理长度是多少？ 这取决于几何形状。因此，让我们添加一个可配置的比例尺。
1.2 WebGL WebGL是一种Javascript的3D图形接口，把JavaScript和OpenGL ES 2.0结合在一起。...以创建一个简单的立方体为例，创建简单的立方体需要添加8个顶点和12个三角形的面，创建顶点时需要指定顶点在坐标系中的位置，添加面的时候需要指定构成面的三个顶点的序号，第一个添加的顶点序号为0，第二个添加的顶点序号为...五、材质 创建几何体时通过指定几何体的顶点和三角形的面确定了几何体的形状，另外还需要给几何体添加皮肤才能实现物体的效果，材质就像物体的皮肤，决定了物体的质感。...Phong材质：也是一种需要光源的材质，具有镜面高光的光泽表面的材质，适用于金属、漆面等反光的物体。 材质捕获：使用存储了光照和反射等信息的贴图，然后利用法线方向进行采样。...法线纹理也是通过影响光照实现凹凸不平视觉效果的，并不会影响物体的几何形状，用于光敏材质（Lambert材质和Phong材质）。
至此，我们介绍了模型视图矩阵，这里，多插一句，就是法线的转换。已知： ? 此时，已知一点 ? ，对应的法线 ? 。该点经过矩阵 ? 转换到新的坐标系下，对应的法线 ? ： ?...两个公式可得，法线变化对应的矩阵是逆矩阵： ? 下面进入投影部分，既然是投影，就是一种降维求近似解的过程，我们可以理解为洗照片，把3D空间降维到2D，最主要的有两种方式：正交投影和透视投影。 ?...之间的立方体，然后对成像场景构建一个包围盒，先做一个平移，将包围盒的原点平移到立方体的原点，再做缩放，则包围盒的三个方向都拉伸到相同长度的立方体，自然，包围盒中的几何对象映射到该立方体对应的范围，过程如下...基于相似三角形和z值的特点（近裁剪面所有点不变，远裁剪面的中心点不变），可得如果三个结论： ? 可得： ? 这样，最终的透视投影矩阵以及投影矩阵有两种情况： ?...这样，我们可以得到最终的模型视图投影矩阵，实现将3D空间下的 ? 映射到2D平面： ? 下一篇和本篇在原理上没有区别，但主要专注于视觉中相机本身的范畴。
1.2 WebGL WebGL是一种Javascript的3D图形接口，把JavaScript和OpenGL ES 2.0结合在一起。...以创建一个简单的立方体为例，创建简单的立方体需要添加8个顶点和12个三角形的面，创建顶点时需要指定顶点在坐标系中的位置，添加面的时候需要指定构成面的三个顶点的序号，第一个添加的顶点序号为0，第二个添加的顶点序号为...Phong材质：也是一种需要光源的材质，具有镜面高光的光泽表面的材质，适用于金属、漆面等反光的物体。 材质捕获：使用存储了光照和反射等信息的贴图，然后利用法线方向进行采样。...法线纹理也是通过影响光照实现凹凸不平视觉效果的，并不会影响物体的几何形状，用于光敏材质（Lambert材质和Phong材质）。...，如：球体、立方体、圆柱体等等，但是在实际使用中往往需要用到一些特殊形状的几何体，这时可以使用3D建模软件制作出3D模型，导出obj、json、gltf等格式的文件，然后再加载到Three.JS渲染出效果
前言 最近稍有空闲，整理下之前学习光照的笔记，以及在配置OpenGL4环境过程中遇到的问题。 光照 1、模拟灯光 模拟灯光：通过GPU来计算场景中的几何图形投射和散发出来的光线。...在计算光照的过程中，需要注意三角形的材质、三角形的法线、光源的光线； 法向量也是单位向量。 标准化：把向量的长度化为1.0。...求三角形ABC法向量：给出三角形ABC三个顶点的坐标后，通过GLKVector3Subtract可以算出两个向量AB, AC； 通过GLKVector3CrossProduct 求出AB和AC的叉积，...逆矩阵(Inverse Matrix)和转置矩阵(Transpose Matrix) 无论何时当我们提交一个不等比缩放(注意：等比缩放不会破坏法线，因为法线的方向没被改变，而法线的长度很容易通过标准化进行修复...引入过程中一样带有很多坑，解决方案如下： 解决方案 ? 修改图片中的标志，m64改为x86_64 4、glm glm库是一个C++头文件形式的几何数学库,用于GLSL规范下的图形绘制。
在之前的绘制中，我们都是通过 glDrawArrays 方法来实现的，它会按照我们传入的顶点顺序和指定的绘制方式进行绘制。...GL_TRIANGLES 将传入的顶点作为单独的三角形绘制，ABCDEF绘制ABC,DEF两个三角形 GL_TRIANGLE_STRIP 将传入的顶点作为三角条带绘制，ABCDEF绘制ABC,BCD,CDE...,DEF四个三角形 GL_TRIANGLE_FAN 将传入的顶点作为扇面绘制，ABCDEF绘制ABC、ACD、ADE、AEF四个三角形 假设要绘制一个立方体，以 GL_TRIANGLES 的类型进行绘制...然后再向渲染管线传递要绘制的顶点数据的索引，根据索引从顶点数据中取出对应的顶点，然后再按照指定的方式进行绘制。 如下图所示，图片截自《OpenGL ES 3.x 游戏开发上卷》： ?...，根据要绘制的方法和索引缓冲区，找到对应的点进行绘制。
先创建一个半径为0.5单位的裁切立方体，在裁切坐标系中，贴花资源就被放在y=0平面中，贴花资源的中心就是裁切坐标系的(0, 0, 0)点。 需要说明的时这一步实际上并没有代码操作，只是一个数学抽象。...我们的目的是要将所有受影响的三角形投影到y=0平面上，以便可以正确的采样贴花纹理。 3. 将受影响物体Mesh的所有三角形均转换到裁切立方体的坐标系之下对立方体的8个平面进行裁切。...在进行裁切之前，有一种情况需要处理，因为三角形是有朝向的，这个朝向是通过面法线来确定的（Unity中三角形的法线为Cross(v2-v1, v3-v1))，在正常的渲染流程中法线不能射入眼睛时，是不会被渲染的...在这个裁切立方体同样如此，不可能将纹理投影到一个三角形平面的背面，所以需要先先判断三角形的法线与Vector3(0, 0, 1)的夹角是否小于90度，只有小于90度才可能会被投影，才需要被裁切。...裁切时会出现，三角形完全在立方体外， 三角形完全在立方体内，三角形一部分在立方体外一部分在立方体内。前两种情况很好处理，但是第三种情况有可能会将一个三解形切成2个，因此需要格外注意。
这个立方体渲染的例子，会有助于理解接下来会讲到的 GLSL(OpenGL着色器) 语言。 ?...顶点着色器，顾名思义就是为了渲染图形的顶点所使用的，回想一下我们刚才讲的 GPU 的工作，一个立方体的渲染，肯定是先要找到立方体的顶点，这个就是顶点着色器的作用了。...一个立方体还好说，但如果是像上边复杂的茶壶呢？想一下，每个三角形都有三个顶点，而一个茶壶就会有成千上万个顶点，而且还需要精密的计算，显然人的肉眼以及精力是不允许一个一个写这些坐标的。...第一步就是将上面缓存中的顶点坐标传入了顶点着色器，顶点着色器根据传入的gl.POINTS/gl.LINES/gl.TRIANGLES参数，进行图元装配(通俗一点讲，就是要画点，还是线，还是三角形) 下面是一段顶点着色器代码...）、uv（决定贴图坐标）、法线（决定光照效果），以及各种矩阵（比如投影矩阵）。
概述OpenGLOpenGL是渲染2D、3D矢量图形硬件的一种软件接口。本质上说，它是一个3D图形和模型库，具有高度的可移植性，并且具有非常快的渲染速度。...概述 OpenGL OpenGL是渲染2D、3D矢量图形硬件的一种软件接口。本质上说，它是一个3D图形和模型库，具有高度的可移植性，并且具有非常快的渲染速度。...想象你在一个建模软件中创建了一个立方体。你创建的立方体的原点有可能位于(0, 0, 0)，即便它有可能最后在程序中处于完全不同的位置。甚至有可能你创建的所有模型都以(0, 0, 0)为初始位置。...如果只是图元(Primitive)，例如三角形，的一部分超出了裁剪体积(Clipping Volume)，则OpenGL会重新构建这个三角形为一个或多个三角形让其能够适合这个裁剪范围。...立方体纹理，是一种特殊的纹理技术，它用6幅二维纹理图像构成一个以原点为中心的纹理立方体。立方体纹理非常适用于实现环境、反射和光照效果。
它的环境图包含此房间的墙壁，地板和天花板。如果立方体贴图和房间对齐，则立方体贴图的每个面都与墙壁，地板或天花板之一精确对应。 下一步，假设我们在这个房间的任何地方都有一个表面位置和一个反射方向。...左按钮打开盒投影边界的gizmos。 ? ? （盒投影边界） 你可以使用边界中心的黄点进行调整。还可以通过在检查器中编辑“Size”和“Probe Origin”矢量来调整它们。...方向矢量的一个或两个分量可能为零。这将产生无效的结果，不会传递选择的最小值。 现在，我们可以通过将缩放方向添加到位置来找到交点。然后从中减去立方体贴图的位置，得到了新的投影样本方向。 ?...虽然在着色器中应避免分支，但在这种情况下还不错，因为条件是统一的。对象的所有片段都使用相同的探针设置，因此最终采用相同的分支。 ? OpenGL Core现在包含一个明显的分支。 ?...在本教程中，我们将重点放在它们上，因此我们看到了带有所有缺陷的裸露的反射。完美的镜子是不切实际的，但是微妙的反射是可行的。了解了它们的局限性，你可以确定何时何地可以有效地使用它们。
概念准备 所谓的光照，是GPU为每个三角形的顶点进行光线计算，再把结果进行插值，得出每个片元的最终颜色。 OpenGL ES的灯光模拟包括：环境光、漫反射光、镜面反射光。...光线与几何图形相互作用的关键：计算出每个物体照射和发散出来多少光线。 光线计算依赖于表面法向量。法向量也是单位向量。 表面法向量可以通过平面内两个点的叉积（矢量积）来计算。...E的z坐标是可变的，随着UISlider的数值由-1到0变化。 为了方便观察，绕X轴和Z轴旋转了一定角度。 灯光用GLKBaseEffect类。 ?...前面为顶点坐标，后面为法线坐标。...; } SceneVertex; //三角形 typedef struct { SceneVertex vertices[3]; } SceneTriangle; 光源 配置漫反射光的颜色，还有光源的位置
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
