![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
WebGL
文章平均质量分 91
丿寒风
网易游戏3年,游戏创业4年,3D设计软件架构师4年...
展开
-
在 TS 中使用 Manifold 建模
Manifold 是一个几何处理库,专注于高效、可靠的布尔运算和几何操作。是一个开源的C++库,有编译出wasm版本,可以直接在js和ts中通过npm安装使用。原创 2024-06-27 14:42:36 · 755 阅读 · 0 评论 -
常用3D格式说明和对比(OBJ、glTF、GLB、STEP、FBX)
本文整理了常见3D模型格式的详细说明和简单示例,以备需要的读者了解和自己需要时查阅。其中 OBJ 格式,是学习图形和OpenGL时,各代码示例中最常用、最简单的格式,但不支持动画;glTF、GLB适合网络传输,在网页中广泛应用,还支持PBR材质;STEP格式工程和制造领域的,支持复杂的几何和拓扑信息;FBX在游戏开发中应用最为广泛,支持复杂动画。原创 2024-06-21 11:48:33 · 1924 阅读 · 0 评论 -
WebGL之旅(十)正射投影
要将三维物体在二维的平面上显示,必须经过投影,投影分为两种:正射投影 长方体的可视空间 物体大小不随位置变化透视投影 四棱锥的可是空间 近大远小下面的例子绘制了三个三角形,可以通过wasd修改远近界面。<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>WebGL</title> <原创 2017-07-25 01:45:09 · 1499 阅读 · 0 评论 -
WebGL之旅(十二)IBO绘制立方体
在计算机中,所有的图像都是有三角形组成,绘制立方也是通过绘制三角形。立方体有6个面,每个面需要2个三角形,每个三角形3个定点,因此需要绘制12个三角形即36个点。但立方体本来只有6个定点定点就可以确定了,如何优化点这些冗余的数据呢?答案就是IBO(index buffer object),在一个vbo中,保存这6个定点,指定36个定点时,通过索引从这6个定点中取值。另外,为了是代码更加简洁,将一些向原创 2017-07-27 00:27:00 · 1399 阅读 · 3 评论 -
WebGL之旅(十六) 层级模型
层次模型是指用一颗“有向树”的数据结构来表示表示各类实体以及实体间的联系,树中每一个节点代表一个记录类型,树状结构表示实体型之间的联系。——百度百科在变换时,父节点的变换会待着子节点一起,而子节点的变换则不会影响父节点。例如手臂的运动会带动手肘的运动,而手肘的运动不影响手臂的运动。即:子节点的模型变换 = 父节点的模型变换 * 自身的模型变换示例,如下两个立方体柱子,下面的为父节点,上面的未子原创 2017-07-30 22:51:00 · 2201 阅读 · 2 评论 -
WebGL之旅(十七) 带纹理的立方体
带纹理的立方体在前面一片博客中,有绘制一个平面的带纹理的图形,现在绘制一个立,并分别制定纹理。/** * 绘制带纹理的立方体 * xu.lidong@qq.com * */function main() { var gl = getGL(); var vsFile = &quot;./res/shader/mouserotate.vert.glsl&quot;; var fsFile =原创 2017-08-01 01:46:19 · 2338 阅读 · 1 评论 -
WebGL之旅(十八) 点选立方体
原理这里用了一个比较巧妙(山寨)的方法判断是否点击到了立方体:获取鼠标点击的位置;将立方体绘制成红色(也可以是其他颜色);判断鼠标点击位置的颜色恢复立方体的颜色示例由以上原理,当鼠标点击位置的颜色跟立方体重绘之后的颜色一致为红色时,则点击的位置就在立方体上。(如果背景色也为红色,就尴尬了)。function main() { var gl = getGL(); var vs原创 2017-08-02 02:20:07 · 1156 阅读 · 2 评论 -
WebGL之旅(十九)雾化
一 原理雾化,即使用雾的颜色与场景中物体的颜色进行叠加。线性雾化,会指定一个起点和终点,起点为开始雾化点,终点为完全雾化的点:在起点之前的完全清晰,也就是说完全为场景中的物体颜色;在起点和终点之间的点,根据距离计算雾的因子;在终点之后就完成为雾的颜色。物体颜色和雾的颜色叠加公私如下:片元颜色 = 物体颜色 * 雾化因子 + 雾的颜色 * (1 - 雾化因子)雾化因子 = (终点 - 当原创 2017-08-03 00:17:45 · 1202 阅读 · 0 评论 -
WebGL之旅(二十)帧缓冲区对象FBO
一 概念前面都是将图片作为绘制图形时的纹理映射,这一节来看看如何将渲染结果作为纹理,即动态生成纹理,贴在另一个物体上。默认情况下,都是在屏幕提供帧缓冲区中绘制,如果要动态生成纹理,就需要另外新建一个缓冲区对象,来代替默认的缓冲区,在其中进行离屏绘制。帧缓冲区对象包括:颜色关联对象(可以是纹理对象或渲染缓冲区对象)深度关联对象(渲染缓冲区对象)模板关联对象要将动态生成的纹理作为贴图,只需要在帧原创 2017-08-05 23:42:44 · 3703 阅读 · 1 评论 -
WebGL之旅(十三)平行光和漫反射
一 相关概念光:方向 + 颜色(包含了强度)光源平行光:同方向 + 颜色点光源:方向(光源位置到照射位置) + 颜色环境光:颜色入射角:入射光反方向与平面法线的夹角反射:漫反射: 反射的光在各个方向上均匀,反射光颜色=入射光颜色 X 基底色 X cos(a),a为入射角环境反射: 反射光颜色=环境光颜色 X 基底色漫反射 + 环境反射: 反射光颜色= 漫反射光颜色+ 环境光颜色二原创 2017-07-28 02:54:30 · 1957 阅读 · 1 评论 -
shadertoy上手指南
一 shadertoy是什么下面是维基百科上的定义: Shadertoy.com is a cross-browser online community and tool for creating and sharing shaders through WebGL, used both for learning and teaching 3D computer graphics in a web原创 2017-09-24 14:44:58 · 12838 阅读 · 3 评论 -
WebGL之旅(十一)透视投影
与正射投影不同,透视投影会出近大远小的效果,与人的视觉效果一直,游戏中一般都是使用的透视投影。示例:/** * 透视投影矩阵 * xu.lidong@qq.com * */var g_vs = `attribute vec4 a_Position;attribute vec4 a_Color;uniform mat4 u_ViewMat;uniform mat4 u_ProjMat;原创 2017-07-25 23:34:22 · 1073 阅读 · 0 评论 -
WebGL之旅(四)简单变换
变换又叫仿射变换,包括平移,缩放,旋转。一 变换前首先,我们绘制一个三角形,后面对齐进行变换,代码:/** * 变换前 * xu.lidong@qq.com * */// 顶点着色器源码var vertexShaderSrc = `attribute vec4 a_Position;// 接收传入位置坐标,必须声明为全局void main(){ gl_Position = a_P原创 2017-07-19 01:25:23 · 1719 阅读 · 0 评论 -
WebGL之旅(九)视图矩阵
视图矩阵一 相机状态描述视点:相机在世界坐标中的位置 eye(eyeX, eyeY, eyeZ)观测点:被观察的目标点,指明相机的朝向 at(atX, atY, atZ)视线:从视点出发指向观测点方向的射线 dir(atX - eyeX, atY - eyeY, atZ - eyeZ)上方向:图像的上方向,指明相机以视线为轴的旋转角 up(upX, upY, upZ)二 相机坐标系定义: 以视点为原原创 2017-07-24 05:09:49 · 3076 阅读 · 6 评论 -
WebGL之旅(十五)从文件中加载shader
随着程序越来越复杂,把shader写在js中不好管理,最好是把shader写在不同的文件中,然后当做资源去加载。一 文件加载添加一个方法loadShaderFromFile,从文件中加载内容,因为加载文件是异步的,因此需要通过回调返回。function loadShaderFromFile(filename, onLoadShader) { var request = new XMLHttp原创 2017-07-30 00:09:13 · 3218 阅读 · 0 评论 -
WebGL之旅(五)组合变换
复合变换,即对一个图形进行多次变换。一 复合变换原理比如,对图像g进行一次平移,然后进行一次缩放,求最终的得到图像g。那么: 平移后的坐标t = 平移矩阵 x 原始坐标g 缩放后的G = 缩放矩阵 x 平移后的坐标t所以: 缩放后的G = 缩放矩阵 x (平移矩阵 x 原始坐标g) = (缩放矩阵 x 平移矩阵) x 原始坐标g可见,对于多次变换,可以将变换矩阵相乘得到一个最终的矩原创 2017-07-20 22:55:18 · 1202 阅读 · 0 评论 -
WebGL之旅(六)动画
动画原理已经知道如何绘制一个三角形了,利用变换举证可以让图形产生相应的变换。现在要做的是,绘制一个三角色,不断的更新旋转矩阵的角度,然后重绘就会产生旋转动画。实现/** * 旋转动画 * xu.lidong@qq.com * */// 顶点着色器源码var vertexShaderSrc = `attribute vec4 a_Position;// 接收传入位置坐标,必须声明为全局un原创 2017-07-21 00:39:58 · 1229 阅读 · 0 评论 -
WebGL之旅(一)canvas、WebGL和shader简介
一 canvascanvas(翻译为画布)是HTML5的一个标签,canvas可以使用JavaScript在网页上绘制图像,例如下面的代码就使用canvas绘制一个简单的矩形。 WebGL原创 2017-07-17 02:04:55 · 11461 阅读 · 2 评论 -
WebGL之旅(三)VBO和多种图形绘制
gl.vertexAttribXX和gl.uniformXX函数,一次只能向shader中传递一个变量,要一次性向shader中传递多个数据就要用到顶点缓冲区对象(VBO)。一 VBOVBO使用步骤:创建缓冲区对象(gl.createBuffer());绑定缓冲区对象(gl.bindBuffer());将数据写入缓冲区(gl.bufferData());将缓冲区对象分原创 2017-07-18 01:55:14 · 2490 阅读 · 1 评论 -
WebGL之旅(八)纹理映射
当传入几个顶点及其颜色后,虽然会对剩余的顶点进行插值,绘制出渐变的图像,但同要绘制的图像更加复杂时,就需要用到另一种方式——纹理映射,来确定每个点的颜色。当需要绘制一个点的颜色时,不在是通过计算得到,而是去一张事先保存好的图像中,对应的坐标取纹理的颜色。纹理的坐标st(或者叫uv)范围是0-1。示例:/** * 纹理映射 * xu.lidong@qq.com * */var vertexSha原创 2017-07-23 03:21:36 · 3603 阅读 · 2 评论 -
WebGL之旅(二)向shader中传递数据(attribute和uniform)
一 绘制鼠标点击过的位置当鼠标点击canvas时,记录点击位置,然后将所有点击过的位置都绘制一个红点。<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>WebGL</title></head><body onload="main()"> <canvas id="container"原创 2017-07-17 23:33:11 · 4735 阅读 · 1 评论 -
WebGL之旅(七)varying变量
前面已经说过的变量类型:attribute: 用在顶点着色器中接收顶点相关信息;uniform: 可以同时在顶点着色器和片元着色器中使用,接收无顶点无关的数据。现在来看一个新的变量类型:varying 同时在顶点着色器和片元着色器中定义,用于在两者之间传递数据。示例:/** * varing变量 * xu.lidong@qq.com * */var vertexShaderSrc =原创 2017-07-21 22:52:40 · 3258 阅读 · 0 评论 -
WebGL之旅(十四)点光源
点光源的方向对于平行光,直接指定颜色和方向,对于电光鱼的方向则需要通过位置来计算。对于已知坐标的点,其点光源的方向为:入射光线(反)方向 = 光源位置 - 顶点位置已知方向之后,反射光线的计算就跟平行光一样了。点光源示例/** * 点光源 * xu.lidong@qq.com * */var gl_SrcVS = `attribute vec4 a_Position;attribute原创 2017-07-29 04:28:52 · 1566 阅读 · 2 评论