- 博客(45)
- 收藏
- 关注
RSS订阅原创 threejs 的texture2DArray渲染流程
此时并没有真的去执行gl.createtexture(); 会有一个setValue => DataTexture2DArray此时创建材质的时候 每个uniform 的存入值 都会有想对应的setValue 和构造函数这些准备完以后,等再次进入webglRender 的时候会依次执行renderObject函数(渲染所有的对象)=>setProgram=>更新材质 =>webglUniforms.upload()=>遍历uniforms 找到对应的setValue.
2020-05-21 13:16:58
1011
原创 绘制模型的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
554
原创 webgl uint16Array数据溢出
最近在做体素相关的但是由于数据太大unsigned_short 溢出5050508个顶点50505036 个索引值查了半天 发现是数据溢出 ~~~~~~~~~下边写上常用的范围UInt8, UInt16, UInt32, UInt64, Int8, Int16, Int32, Int64固定长度的整型，包括有符号整型或无符号整型。整型范围¶Int8 - [-128 : 127]...
2020-03-25 15:26:10
645
原创 基于GPU的三维体素化
基于GPU的三维体素化大致思想就是：首先计算出需要体素化模型的AABB包围盒，然后将模型投影到AABB包围盒的某个平面上，经过渲染管线的光栅化插值操作，我们可以在片元着色器得到每个像素点对应的世界空间的顶点坐标，根据这个顶点坐标标记三维空间数组（这个三维空间数组就是根据体素划分的空间序列）的相应位置，最后在CPU端读出这个三维空间数组，若当前的数组位置有标记，则将该数组位置对应的立方体作为一个体素...
2020-03-23 18:01:44
714
原创 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
1518
转载 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
1324
原创 投影纹理映射(Projective Texture Mapping)
将纹理坐标用投影空间的顶点坐标代替将顶点坐标经过WORLDVIEWPROJ矩阵变换之后，再除以w分量，然后取xy分量作为纹理坐标，纹理寻址模式设为WRAP
2020-02-25 16:25:54
674
1
转载 万向节死锁
什么是欧拉角（Eular Angles）？欧拉角是瑞士数学家莱昂哈德·欧拉（Leonhard Euler）用来描述刚体在三维空间中取向的方法。简单来说，就是任何一个物体的取向，都可以用3个有次序的旋转角度来表示。欧拉在三维空间中定义了一个静止不动的参考系，即惯性系。还定义了一个运动的坐标系，即物体坐标系。惯性系与物体坐标系的区别在于，当物体取向发生改变之后，物体坐标系也随之改变，而惯性系却不变...
2020-01-07 16:37:27
482
转载 OpenGL纹理上下颠倒翻转的三种解决办法
综述在使用OpenGL函数加载纹理到图形时，经常遇到纹理上下颠倒的问题。原因是因为OpenGL要求纹理坐标原点在图片最下面，如图：而图片信息中的原点一般都在最上方，一行行记录下来的，就会导致整个图片上下颠倒了。如图：从这个思路触发共有三种办法解决问题：一.翻转顶点信息中的纹理坐标原始顶点如图:因为纹理坐标的范围是0-1，所以翻转的话都统一用1去减得到正确的图片：二.翻转顶...
2019-12-06 15:40:10
1307
原创 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
301
翻译 推导投影矩阵
参考:添加链接描述在任何3D图形程序员工具包中的基本矩阵变换中，投影矩阵都更为复杂。一眼就能理解平移和缩放，任何对三角学有基本了解的人都可以想到旋转矩阵，但是投影有点棘手。如果您曾经查询过此类矩阵的公式，就会知道常识不足以告诉您它的来源。但是，我还没有在网上看到很多资源，它们仅描述了如何推导投影矩阵。这就是我将在本文中讨论的主题。对于刚开始使用3D图形的人们，我应该提到了解投影矩阵的来源可能是...
2019-11-26 15:15:42
384
转载 计算机图形学中的坐标系统
1.建模坐标系（MC） 建模坐标系是一个局部坐标系，同时可以是一个典型的平面直角坐标系，它的出现主要是为了模型构建与变换的方便。一般而言，我们总是习惯与将基本形体或图形与某些位于物体上的角点、中心点或靠近它们的点联系起来考虑，比如在创建圆形的时候，一般将圆心作为参考点来创建圆周上其他各点，这时实质上就构建了一个以圆心为原点的参考坐标系。在对圆形进行变换时，类似地，一般以圆心为参考点来进行变换，...
2019-08-28 15:42:49
2762
转载 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
1918
转载 体绘制（Volume Rendering）概述之4：光线投射算法（Ray Casting）实现流程和代码（基于CPU的实现
摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文 名“GPU编程与CG语言之阳春白雪下里巴人”算法流程图 47 展示了使用光线投射算法进行体绘制的实现流程。首先要渲染出正向面深度图和背向面深度图，这是为了计算射线穿越的最大距离，做为循环采样控制的结束依据；然后在顶点着色程序中计算顶点位置和射线方向，射线方向由视线方向和点的世...
2019-08-26 15:19:26
1784
转载 体绘制（Volume Rendering）概述之3：光线投射算法（Ray Casting）原理和注意要点
摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文 名“GPU编程与CG语言之阳春白雪下里巴人”15.1 光线投射算法原理光线投射方法是基于图像序列的直接体绘制算法。从图像的每一个像素，沿固定方向（通常是视线方向）发射一条光线，光线穿越整个图像序列，并在这个过程中，对图像序列进行采样获取颜色信息，同时依据光线吸收模型将颜色值进行累...
2019-08-26 14:28:02
7182
转载 体绘制（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
5789
转载 体绘制（Volume Rendering）概述之1：什么是体绘制？
摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文 名“GPU编程与CG语言之阳春白雪下里巴人”1982 年2 月，美国国家科学基金会在华盛顿召开了科学可视化技术的首次会议，会议认为“科学家不仅需要分析由计算机得出的计算数据，而且需要了解在计算过程中的数据变换，而这些都需要借助于计算机图形学以及图像处理技术”。---- 《三维数据...
2019-08-26 13:56:53
7798
翻译 获得Object对象（自定义对象）
获得Object对象（自定义对象）的类型名方法var str = feature.constructor + ''; var r = /function (.+?)\(/; var name = r.exec(str)[1]; console.log(name);var type = function (v) { return Object.prototype.toString.call(v)...
2019-07-11 18:26:36
508
原创 go 引用类型 数组切片 和值拷贝
数组切片splice p 的值是数组切片引用类型package mainimport ( "fmt" "reflect")func main() { s := []int{0, 1, 2, 3} p := s[1:] // *int, 获取底层数组元素指针。 p[0] += 100 fmt.Println(s, reflect.TypeOf(p))}[0 10...
2019-03-29 15:05:04
693
转载 meta深入理解
相信你已经多少见过html的meta标签，但是对它的认识可能还不够全面，那么我简单为大家整理了下meta标签全部的属性值以及说明。属性meta为标签head中的子标签，包括content（必选，存储值）、name（键名）、http-equiv（键名）、scheme(content格式)四个属性。其中content属性为标记的具体值，必填值；name为把值关联到某个名称，http-equiv是...
2019-03-06 11:07:14
236
转载 向量点乘（内积）和叉乘（外积、向量积）概念及几何意义解读
向量是由n个实数组成的一个n行1列（n1）或一个1行n列（1n）的有序数组；向量的点乘,也叫向量的内积、数量积，对两个向量执行点乘运算，就是对这两个向量对应位一一相乘之后求和的操作，点乘的结果是一个标量。点乘公式对于向量a和向量b：a和b的点积公式为：要求一维向量a和向量b的行列数相同。点乘几何意义点乘的几何意义是可以用来表征或计算两个向量之间的夹角，以及在b向量在a向量方向上的投影...
2019-03-06 10:46:49
1441
转载 图解WebGL&Three.js工作原理
1、什么是矩阵？简单说来，矩阵用于坐标变换，如下图：2、那它具体是怎么变换的呢，如下图：3、举个实例，将坐标平移2，如下图：如果这时候，你还是没有理解，没有关系，你只需要知道，矩阵用于坐标变换。四、WebGL的工作原理4.1、WebGL API在了解一门新技术前，我们都会先看看它的开发文档或者API。查看Canvas的绘图API，我们会发现它能画直线、矩形、圆、弧线、贝塞尔曲...
2018-12-17 17:35:26
318
转载 Chrome开发者工具详解(3)-Timeline面板
Timeline面板Timeline面板是整个面板里面最复杂的一个面板，涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息。你可以充分利用这个面板来分析你的网页的程序性能问题。概述下图是从Google官方网站中介绍Timeline面板的图贴到这里，该面板主要包括4大块窗格(Pane)：Controls 录制开关和控制录制过程中需要记录哪些信息。Overvi...
2018-11-28 11:03:53
182
原创 数据结构常用排序（冒泡，选择，插入排序）
冒泡排序 冒泡排序是由两个for循环构成，第一个for循环的变量 j 表示总共需要多少轮比较，第二个for循环的变量 i 表示每轮参与比较的元素下标【0,1，…，length-i】， 因为每轮比较都会出现一个最大值放在最右边，所以每轮比较后的元素个数都会少一个，这也是为什么 j 的范围是逐渐减小的。相信大家理解之后快速写出一个冒泡排序并不难。let aa = [4, 2, 8, 9, 5, ...
2018-11-27 14:32:40
194
转载 闭包
闭包是函数和声明该函数的词法环境的组合。词法作用域节考虑如下情况：function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 function displayName() { // displayName() 是内部函数,一个闭包 alert(name); // 使用了父函数中声明的变量 } displayName();...
2018-11-22 10:18:00
102
转载 大规模WebGL应用引发浏览器崩溃的几种情况及解决办法
一般的Web应用基本上不会导致浏览器崩溃，写Javascript代码也不需要管理内存资源，基本也不需要考虑内存“泄露”的问题。随着H5的崛起，越来越多的原本在桌面端的软件也改头换面迁移到Web上来，比如三维图形类的应用。在Web端显示大规模三维模型不仅仅是三维显示引擎的问题，也涉及到数据组织、任务调度、资源管理、浏览器兼容等方方面面。这里针对在项目中遇到到几种把浏览器高挂的情况简要列举了一下。异...
2018-11-21 11:44:35
4859
转载 ES6的开发环境搭建
在搭建es6开发环境之前，先简单介绍一下es6。ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。我们为什么要使用es6？es6有什么优点？…，我会在后面写一个es6专题系列，来介绍es6的使用。本次分享的内容是 es6的开发...
2018-11-16 14:37:19
128
转载 video.js的使用
更多详情：http://www.cnblogs.com/afrog/p/4115377.html最近项目中的视频功能，需要做到浏览器全兼容，所以之前用html5实现的视频功能就需要进行改造了。在网上翻了个遍，试来试去，在所有的视频播放器中，就数它最实际了。首先我们来看看它的优点： 1.它是开源免费的，你可以在github很容易的获取它的最新代码。 2.使用它非常的容易，只要花几秒钟就可以架...
2018-10-23 17:05:26
2719
原创 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
3930
转载 GLSL 内建函数
OpenGL ES着色语言为标量和向量操作定义了一套内建便利函数。有些内建函数可以用在多个类型的着色器中，有些是针对固定硬件的，所以这部分只能用在某个特定的着色器上。 内建函数基本上可以分为一下三类：（1）它们使用一些简便的方式提供必要的硬件功能，如材质贴图。这些函数单独通过着色器是无法模拟出来的。（2）它们展示了一些可...
2018-10-16 10:27:22
83
转载 JS内存泄漏排查方法(Chrome Profiles)
JS内存泄漏排查方法(Chrome Profiles)Google Chrome浏览器提供了非常强大的JS调试工具，Heap Profiling便是其中一个。Heap Profiling可以记录当前的堆内存（heap）快照，并生成对象的描述文件，该描述文件给出了当时JS运行所用到的所有对象，以及这些对 …一、概述Google Chrome浏览器提供了非常强大的JS调试工具，Heap Prof...
2018-10-12 11:14:22
445
原创 webgl 学习第一节（绘制一个点）
最终的效果 相关的HTML <!DOCTYPE html><html lang="en"><!-- 烟花效果 --><head> <title>test-1</title> <meta charset="utf-8"> &
2018-07-05 17:43:44
575
原创 github上创建新的工程
echo “# -fbxloader” >> README.mdecho “# -fbxloader” >> README.md git initgit init git add README.mdgit add README.md git commit -m “first commit”git commit -m “first commit” git re...
2018-06-26 10:10:12
200
翻译 微信的小程序和小游戏的区别
小游戏是小程序的一个类目，小游戏是微信开放给小程序的更多的能力，让小程序开发者有了开发游戏的能力。小游戏没有WXSS、WXML、多页面等内容，但加了一些渲染、文件系统以及后台多线程的功能。小游戏的运行环境是小程序环境的扩展，基本思路也是封装必要的 WEB 接口提供给用户，尽可能追求和 WEB 同样的开发体验。小游戏在小程序环境的基础上提供了 WebGL 接口的封装，使得渲染能力和性能有了大幅度...
2018-06-13 15:09:39
18021
转载 three后期处理与多通道渲染
1.设置后期处理设置Three.js库为后期处理做准备，我们需要通过以下步骤对当前的配置进行修改：1）创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。2）配置该对象，使它可以渲染我们的场景，并应用额外的后期处理步骤。3）在render循环中，使用EffectComposer渲染场景、应用通道，并输出结果。要使用后期处理，需要引入一些ja...
2018-04-19 09:29:04
4893
转载 console.log() 和console.dir()区别
console.log()可以取代alert()或document.write()，在网页脚本中使用console.log()时，会在浏览器控制台打印出信息。console.dir()可以显示一个对象所有的属性和方法。...
2018-04-12 11:22:58
7160
2
原创 webgl着色器
webgl着色器的原理 注意：着色器使用类似于C的OpenGL ES 着色器语言（GLSL ES）来编写的。因为着色器程序代码必须预先处理成单个字符串的形式，所以我们用+号将多行字符串连城一个长字符串。每一行以\n结束，这是由于当着色器内部出错时，就能获取出错的行号，这对于检查源代码中的错误很有帮助。但是，\n并不是必须的，你自己编写着色器时，也可以不用它。初始化着色器的执行流程...
2018-04-04 17:33:14
411
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人