![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webgl
文章平均质量分 52
ranran125
这个作者很懒,什么都没留下…
展开
-
threejs 的texture2DArray渲染流程
此时并没有真的去执行gl.createtexture(); 会有一个setValue => DataTexture2DArray此时创建材质的时候 每个uniform 的存入值 都会有想对应的setValue 和构造函数这些准备完以后,等再次进入webglRender 的时候会依次执行renderObject函数(渲染所有的对象)=>setProgram=>更新材质 =>webglUniforms.upload()=>遍历uniforms 找到对应的setValue.原创 2020-05-21 13:16:58 · 1026 阅读 · 0 评论 -
webgl uint16Array数据溢出
最近在做体素相关的但是由于数据太大unsigned_short 溢出5050508个顶点50505036 个索引值查了半天 发现是数据溢出 ~~~~~~~~~下边写上常用的范围UInt8, UInt16, UInt32, UInt64, Int8, Int16, Int32, Int64固定长度的整型,包括有符号整型或无符号整型。整型范围¶Int8 - [-128 : 127]...原创 2020-03-25 15:26:10 · 655 阅读 · 0 评论 -
绘制模型的normal 问题
1.normal 的数据应该跟顶点对应起来.跟索引多少无关.例如:一个正方体正常的做法是绘制24个顶点 然后36个索引,因此需要绘制24个法线var pos =[2,3,4,7, //下2,3,0,1,//前4,7,6,5,//后7,2,1,6,//左3,4,5,0, //右1,0,5,6 //上] var indexArray = [ 0, 1, 2,...原创 2020-03-30 12:38:56 · 558 阅读 · 0 评论 -
基于GPU的三维体素化
基于GPU的三维体素化大致思想就是:首先计算出需要体素化模型的AABB包围盒,然后将模型投影到AABB包围盒的某个平面上,经过渲染管线的光栅化插值操作,我们可以在片元着色器得到每个像素点对应的世界空间的顶点坐标,根据这个顶点坐标标记三维空间数组(这个三维空间数组就是根据体素划分的空间序列)的相应位置,最后在CPU端读出这个三维空间数组,若当前的数组位置有标记,则将该数组位置对应的立方体作为一个体素...原创 2020-03-23 18:01:44 · 720 阅读 · 0 评论 -
webgl 常用的坐标系相互转换
纹理贴到canvas上,然后通过点击canvas上的点找纹理对应的位置然后反算世界坐标系注意:cesium相机实时渲染纹理 默认会进行y轴翻转1.拿到的fbo 经过readPixels后,会有一堆Uint8Array 数据 需要给转换成rgba; let r = pixels[i]; let g = pixels[i + 1]; let b = pixels[i + ...原创 2020-03-13 18:01:02 · 1534 阅读 · 0 评论 -
gl_FragCoord
gl_FragCoord 表示当前片元着色器处理的候选片元窗口相对坐标信息,是一个 vec4 类型的变量 (x, y, z, 1/w), 其中 x, y 是当前片元的窗口坐标,OpenGL 默认以窗口左下角为原点, 在 着色器中通过布局限定符可以重新设定原点,比如窗口左上角为原点 origin_upper_left,窗口大小由 glViewport() 函数指定。x, y 默认是像素中心 而非 整...转载 2020-03-11 14:37:07 · 1331 阅读 · 0 评论 -
投影纹理映射(Projective Texture Mapping)
将纹理坐标用投影空间的顶点坐标代替将顶点坐标经过WORLDVIEWPROJ矩阵变换之后,再除以w分量,然后取xy分量作为纹理坐标,纹理寻址模式设为WRAP原创 2020-02-25 16:25:54 · 682 阅读 · 1 评论 -
万向节死锁
什么是欧拉角(Eular Angles)?欧拉角是瑞士数学家莱昂哈德·欧拉(Leonhard Euler)用来描述刚体在三维空间中取向的方法。简单来说,就是任何一个物体的取向,都可以用3个有次序的旋转角度来表示。欧拉在三维空间中定义了一个静止不动的参考系,即惯性系。还定义了一个运动的坐标系,即物体坐标系。惯性系与物体坐标系的区别在于,当物体取向发生改变之后,物体坐标系也随之改变,而惯性系却不变...转载 2020-01-07 16:37:27 · 489 阅读 · 0 评论 -
三角剖分
https://www.cnblogs.com/tiancaiwrk/p/11052699.html原创 2019-12-31 10:29:05 · 145 阅读 · 0 评论 -
cesium 的渲染流程
之前有点迷惑 shader 跟fbo 的关系,整理了fbo 和shader 的关系.原创 2019-11-30 15:50:54 · 1457 阅读 · 0 评论 -
webgl 的一些值得收藏
水面、淹没效果https://www.cnblogs.com/mumu122GIS/p/11233063.html裁剪原理 :https://blog.csdn.net/Yel_Liu/article/details/86303145关于Cesium中的常用坐标系及说明 https://www.cnblogs.com/hanjunjun/p/8064318.html自定义primitive ...原创 2019-11-26 15:28:44 · 310 阅读 · 0 评论 -
推导投影矩阵
参考:添加链接描述在任何3D图形程序员工具包中的基本矩阵变换中,投影矩阵都更为复杂。一眼就能理解平移和缩放,任何对三角学有基本了解的人都可以想到旋转矩阵,但是投影有点棘手。如果您曾经查询过此类矩阵的公式,就会知道常识不足以告诉您它的来源。但是,我还没有在网上看到很多资源,它们仅描述了如何推导投影矩阵。这就是我将在本文中讨论的主题。对于刚开始使用3D图形的人们,我应该提到了解投影矩阵的来源可能是...翻译 2019-11-26 15:15:42 · 388 阅读 · 0 评论 -
webgl 学习第一节(绘制一个点)
最终的效果 相关的HTML <!DOCTYPE html><html lang="en"><!-- 烟花效果 --><head> <title>test-1</title> <meta charset="utf-8"> &原创 2018-07-05 17:43:44 · 579 阅读 · 0 评论 -
GLSL 内建函数
OpenGL ES着色语言为标量和向量操作定义了一套内建便利函数。有些内建函数可以用在多个类型的着色器中,有些是针对固定硬件的,所以这部分只能用在某个特定的着色器上。 内建函数基本上可以分为一下三类:(1)它们使用一些简便的方式提供必要的硬件功能,如材质贴图。这些函数单独通过着色器是无法模拟出来的。(2)它们展示了一些可...转载 2018-10-16 10:27:22 · 88 阅读 · 0 评论 -
threejs的shader材质 颜色混合函数mix
float mix(floatx,float y,float a ) 返回x和y 的线性混合,即x(1-a)+ya three.js webgl - shader [Monjori] <div id="container"></div> <script src="js/three.js"></script>...原创 2018-10-17 15:51:42 · 3953 阅读 · 0 评论 -
大规模WebGL应用引发浏览器崩溃的几种情况及解决办法
一般的Web应用基本上不会导致浏览器崩溃,写Javascript代码也不需要管理内存资源,基本也不需要考虑内存“泄露”的问题。随着H5的崛起,越来越多的原本在桌面端的软件也改头换面迁移到Web上来,比如三维图形类的应用。在Web端显示大规模三维模型不仅仅是三维显示引擎的问题,也涉及到数据组织、任务调度、资源管理、浏览器兼容等方方面面。这里针对在项目中遇到到几种把浏览器高挂的情况简要列举了一下。异...转载 2018-11-21 11:44:35 · 4882 阅读 · 0 评论 -
向量点乘(内积)和叉乘(外积、向量积)概念及几何意义解读
向量是由n个实数组成的一个n行1列(n1)或一个1行n列(1n)的有序数组;向量的点乘,也叫向量的内积、数量积,对两个向量执行点乘运算,就是对这两个向量对应位一一相乘之后求和的操作,点乘的结果是一个标量。点乘公式对于向量a和向量b:a和b的点积公式为:要求一维向量a和向量b的行列数相同。点乘几何意义点乘的几何意义是可以用来表征或计算两个向量之间的夹角,以及在b向量在a向量方向上的投影...转载 2019-03-06 10:46:49 · 1446 阅读 · 0 评论 -
体绘制(Volume Rendering)概述之1:什么是体绘制?
摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文 名“GPU编程与CG语言之阳春白雪下里巴人”1982 年2 月,美国国家科学基金会在华盛顿召开了科学可视化技术的首次会议,会议认为“科学家不仅需要分析由计算机得出的计算数据,而且需要了解在计算过程中的数据变换,而这些都需要借助于计算机图形学以及图像处理技术”。---- 《三维数据...转载 2019-08-26 13:56:53 · 7820 阅读 · 0 评论 -
体绘制(Volume Rendering)概述之2:体数据详解!!!
http://blog.csdn.net/liu_lin_xm/archive/2009/11/22/4850593.aspx摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文 名“GPU编程与CG语言之阳春白雪下里巴人”体数据( Volume Data )学习任何一门技术,首先要弄清楚这项技术的起源以及数据来源。技术的起源也就...转载 2019-08-26 14:19:19 · 5847 阅读 · 0 评论 -
体绘制(Volume Rendering)概述之3:光线投射算法(Ray Casting)原理和注意要点
摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文 名“GPU编程与CG语言之阳春白雪下里巴人”15.1 光线投射算法原理光线投射方法是基于图像序列的直接体绘制算法。从图像的每一个像素,沿固定方向(通常是视线方向)发射一条光线,光线穿越整个图像序列,并在这个过程中,对图像序列进行采样获取颜色信息,同时依据光线吸收模型将颜色值进行累...转载 2019-08-26 14:28:02 · 7222 阅读 · 0 评论 -
体绘制(Volume Rendering)概述之4:光线投射算法(Ray Casting)实现流程和代码(基于CPU的实现
摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文 名“GPU编程与CG语言之阳春白雪下里巴人”算法流程图 47 展示了使用光线投射算法进行体绘制的实现流程。首先要渲染出正向面深度图和背向面深度图,这是为了计算射线穿越的最大距离,做为循环采样控制的结束依据;然后在顶点着色程序中计算顶点位置和射线方向,射线方向由视线方向和点的世...转载 2019-08-26 15:19:26 · 1793 阅读 · 0 评论 -
OpenGL实现Volume Rendering 大致步骤
OpenGL实现Volume Rendering 大致步骤1D TF Code在混合volume render程序中的1D TF codeRGBA都为0~255,正好一个byte,unsigned int,char型。一个节点(传输函数上的关键节点)上的信息为:intensity+color[RBGA]。透明度值a用0~255存储,用的时候(float)/255.f。intensit...转载 2019-08-26 15:30:43 · 1936 阅读 · 0 评论 -
计算机图形学中的坐标系统
1.建模坐标系(MC) 建模坐标系是一个局部坐标系,同时可以是一个典型的平面直角坐标系,它的出现主要是为了模型构建与变换的方便。一般而言,我们总是习惯与将基本形体或图形与某些位于物体上的角点、中心点或靠近它们的点联系起来考虑,比如在创建圆形的时候,一般将圆心作为参考点来创建圆周上其他各点,这时实质上就构建了一个以圆心为原点的参考坐标系。在对圆形进行变换时,类似地,一般以圆心为参考点来进行变换,...转载 2019-08-28 15:42:49 · 2773 阅读 · 0 评论 -
webgl着色器
webgl着色器的原理 注意:着色器使用类似于C的OpenGL ES 着色器语言(GLSL ES)来编写的。因为着色器程序代码必须预先处理成单个字符串的形式,所以我们用+号将多行字符串连城一个长字符串。每一行以\n结束,这是由于当着色器内部出错时,就能获取出错的行号,这对于检查源代码中的错误很有帮助。但是,\n并不是必须的,你自己编写着色器时,也可以不用它。初始化着色器的执行流程...原创 2018-04-04 17:33:14 · 420 阅读 · 0 评论