Webgl 难记词汇及笔记[三]

水gis 用 cesium ,bim 或建筑单纯展示和运维管理用 three
osgb 可以采用 3dtiles
远近变的是 lod + mipmap
航拍点云 点云转模型用 pcl
Meshlab 把点云文件转换为网格模型
cesuim 加载倾斜摄影 OSGB 三维数据
Blensor: Blender Sensor Simulation 这是基于 Blender 的一个插件。和直接提取点云数据的方法不同,Blensor 是将三维模型导入 Blender 中然后模拟使用 Scanner 对三维模型进行扫描。这样做的好处是和实际扫出来的数据很像,可以方便地选择扫描的位置、设置多个点云用于registration、添加 noise 或者模拟的设备。这些特性在需要 toy data 进行测试时比较有用
基于八叉树和 binary space partition 两分树实现的,性能比 potree 好
点云拓扑重建也是用的 pcl,这个也只能这样
cesium 主要在光照处理上太烂
gis bim 都一样 没意思
技术门槛高 钱又难挣
用户期望值也高
不建议各位进入这个圈子
bim 建筑信息模型(Building Information Modeling)是建筑学、工程学及土木工程的新工具
SCADA 一般指 SCADA 系统。SCADA(Supervisory Control And Data Acquisition)系统,即数据采集与监视控制系统。
bim 模型 three 渲染
BIM 和现场叠合才是真验收!
BIM 是给领导看的?才怪!工人抢着用BIM!
AR 施工放线、模型对比验收,国产增强现实还挺能打!
Revit 是 Autodesk 公司一套系列软件的名称。Revit 系列软件是为建筑信息模型(BIM)构建的,可帮助建筑设计师设计、建造和维护质量更好、能效更高的建筑。
1、单纯民用建筑(多专业)设计,可用 Autodesk Revit;
2、工业或市政基础设施设计,可用 Bentley;
3、建筑师事务所,可选择 ArchiCAD、Revit 或 Bentley;
4、所设计项目严重异形、购置预算又比较充裕的,可选用 Digital Project 或 CATIA;
5、充分顾及项目业主和项目组关联成员的相关要求。
3D 渲染中的 Z-fighting 现象
裁剪,是我说的减点减面不?一个意思吧?
边坍塌算法
数字高程模型(Digital Elevation Model),简称DEM,是通过有限的地形高程数据实现对地面地形的数字化模拟(即地形表面形态的数字化表达),它是用一组有序数值阵列形式表示地面高程的一种实体地面模型,是数字地形模型(Digital Terrain Model,简称DTM)的一个分支,其它各种地形特征值均可由此派生。
高动态范围图像(High-Dynamic Range,简称HDR),相比普通的图像,可以提供更多的动态范围和图像细节,根据不同的曝光时间的LDR(Low-Dynamic Range,低动态范围图像),并利用每个曝光时间相对应最佳细节的LDR图像来合成最终HDR图像。它能够更好的反映出真实环境中的视觉效果。HDR文件是一种特殊图形文件格式,它的每一个像素除了普通的RGB信息,还有该点的实际亮度信息
PBR全称(Physicallly-BasedRendering) 基于物理规律模拟的一种渲染技术
earcut 绘制有洞的多边形
extrudeshape 拉伸(Extrude)生成三维模型
stencilOp 方法将模板缓冲区的内容做取反处理:如果只有一个面,或者多个面互不相交,那么所有区域就会做一次取反操作,这时我们定下这个值,模板检测时只有等于这个值的时候才允许绘制。这样所有面都可以绘制出来。如果其中一个区域位于另一个区域内部,则这个区域会有两次取反操作,那么这个区域就不会被绘制出来。从而实现“洞”的效果。
babylon.js 中使用高度图(Height Map)
此图像将用于生成高度,高度图的内容是由黑到灰的不同颜色组成。里面代表着地面的高程数据。每个像素的颜色将被解析为到‘地面’距离或者‘高度’。所以,像素的颜色越白,海拔就越高。
为了生成那些高度图,你可以使用“Terragen”或“Picogen”等软件。
辉光效果(Glow Effect) 辉光效果在游戏中有着广泛的应用,比如城市夜景,比如特效光效产生辉光,还有些人物模型在升级时候加辉光加强效果。
Three + Shader 生成 3D 地球高度地图
参考引用:https://blog.csdn.net/qq_29814417/article/details/104911497
three.js
physics Convex object breaking example
参考引用:https://github.com/mrdoob/three.js/blob/master/examples/physics_ammo_break.html
three.js webgl – transform controls
参考引用:https://github.com/mrdoob/three.js/blob/master/examples/misc_controls_transform.html
three.js – pointerlock controls(wasd + mouse + space)fly 漫游
https://github.com/mrdoob/three.js/blob/master/examples/misc_controls_pointerlock.html
three.js webgl – transform controls 编辑控制
https://github.com/mrdoob/three.js/blob/master/examples/misc_controls_transform.html
three.proton is a magical 3d particle engine using three.js. – https://github.com/drawcall/three.proton
three.js webgl_postprocessing_afterimage – https://threejs.org/examples/?q=afterimage#webgl_postprocessing_afterimage
three.js 欧拉角和四元数 – https://www.cnblogs.com/vadim-web/p/13379203.html
Babylonjs – Use a Physics Engine(使用物理引擎 – AmmoJS)
经典例子:https://playground.babylonjs.com/#DGEP8N
Babylonjs – Gizmo/Manipulator – https://playground.babylonjs.com/#8MGKWK#341
Babylonjs – 点击 inspector 调出编辑器
WebGL 基本概念和渲染管线
参考:https://www.cnblogs.com/hammerc/p/11190470.html
Cesium 加载各种互联网地图
参考:https://blog.csdn.net/u011365716/article/details/84772021
场景树和空间图
参考:https://blog.csdn.net/rsqiang/article/details/8573768
cesium-长度测量和面积测量 – https://www.jianshu.com/p/4a97d3ed4a06
Cesium【空间距离】量算 – https://blog.csdn.net/qq_18144905/article/details/81938405
Cesium体积计算方法 – https://blog.csdn.net/liuliuyuda/article/details/106441586
Cesium之【三角】量测 – https://blog.csdn.net/qq_18144905/article/details/82113246
Cesium三维地球标注 – https://blog.csdn.net/zhou8023ddw/article/details/80811630
Cesium的拾取问题总结 – https://zhuanlan.zhihu.com/p/44767866
cesium动态水面(水面几何挖洞) – https://www.cnblogs.com/marvelousone/p/11408271.html
cesium 设置地形开挖 – https://blog.csdn.net/qq_27216267/article/details/108175835
Cesium动态立体墙,颜色渐变,呼吸灯效果 – https://blog.csdn.net/brickcarrierhiahia/article/details/105661144
Cesium动态墙效果 – https://blog.csdn.net/weixin_42066016/article/details/107664934
Cesium学习系列工具篇41-多视图操作:卷帘、鹰眼、联动 – http://blog.sina.com.cn/s/blog_15e866bbe0102yysg.html
Cesium官方教程4–影像图层 – https://www.cnblogs.com/cesium1/p/10063008.html
WebGL模型拾取——射线法
https://www.cnblogs.com/ccentry/p/9973165.html
https://www.cnblogs.com/ccentry/p/9977490.html
计算机图形学应该从什么开始学习? – https://www.zhihu.com/question/349302834/answer/854485484
WebGL屏幕坐标转世界坐标 – https://blog.csdn.net/qq_30621091/article/details/61205645
钻石渲染 pbrt 基于物理的渲染(PBR)- https://zhuanlan.zhihu.com/p/53086060
GLSL 条件编译的妙用 https://blog.csdn.net/qq_36662437/article/details/81476572
stone 网页 3D 在线编辑器 https://techbrood.com/stone/
GLSL 内置函数
参考引用:https://www.khronos.org/files/opengles_shading_language.pdf
clamp 返回 3 个数之间的中间值
genType clamp (genType x,
genType minVal,
genType maxVal)
genType clamp (genType x,
float minVal,
float maxVal)
Returns min (max (x, minVal), maxVal)
Results are undefined if minVal > maxVal.
mix 返回 x⋅(1−a) + y⋅a 按权重求和
genType mix (genType x,
genType y,
genType a)
genType mix (genType x,
genType y,
float a)
Returns the linear blend of x and y, i.e. x⋅(1−a) + y⋅a
step 返回 0.0 (x < edge) 或者 1.0 (x >= edge)
genType step (genType edge, genType x)
genType step (float edge, genType x)
Returns 0.0 if x < edge, otherwise it returns 1.0
smoothstep 返回(x <= edge0) 0.0 或者 0.0 ~ 1.0(edge0 < x < edge1) 或者 1.0(x >= edge1)
genType smoothstep (genType edge0,
genType edge1,
genType x)
genType smoothstep (float edge0,
float edge1,
genType x)
Returns 0.0 if x <= edge0 and 1.0 if x >= edge1 and
performs smooth Hermite interpolation between 0 and 1
when edge0 < x < edge1. This is useful in cases where you would want a threshold function with a smooth transition. This is equivalent to: genType t; t = clamp ((x – edge0) / (edge1 – edge0), 0, 1); return t * t * (3 – 2 * t); Results are undefined if edge0 >= edge1.

morph 的意思是变形,3d 人物动作基本都是通过变形,实现骨架移动
模型具有的 morphTargets 类,有多个变形目标,分别是原始 mesh 的变形
参考引用:https://www.cnblogs.com/NuclearBoy/articles/5665412.html
ThreeJS 物理材质shader源码分析 参考引用:https://www.cnblogs.com/zzatp/p/9253482.html
地图建筑渲染 https://zhuanlan.zhihu.com/p/146151281
OpenGL ES入门 – https://www.jianshu.com/c/30e2e76bc140
GLSL 实现滤镜效果 – https://blog.csdn.net/neng18/article/details/38083987
GLSL 实现 Glow 效果 – https://blog.csdn.net/jaccen2012/article/details/78215066
百度搜索(glsl 效果)玩熟各种效果
GLSL.Refract & Reflect & Diffraction – http://www.cppblog.com/init/archive/2012/03/29/169406.aspx

ggx 是一种微表面反射光照模型,这种光照模型材质可以更好的表现金属高光边缘的消散(拖尾)效果 – 参考引用:https://blog.csdn.net/shenmifangke/article/details/52777003
BRDF (双向反射分布函数)定义的是场景中的光照射到材质表面反射到视点的光亮度计算方法 – 参考引用:https://www.zhihu.com/question/20286038/answer/779162419

Webgl 中采用PBR的实时光线追踪 – https://zhuanlan.zhihu.com/p/58692781
Webgl 中实现基于物理的渲染 – https://zhuanlan.zhihu.com/p/58641686
Webgl 中SSSS皮肤的实现 – https://zhuanlan.zhihu.com/p/58692377

three.js 汽车模型 Demo https://www.junmatek.com/CarModel/Loadergltf.html

1. shader开发编辑器kodelife,地址:https://hexler.net/products/kodelife
2. shader调试工具GAPID,google开源的一个项目,地址:https://github.com/google/gapid
3. shader调试工具RenderDoc,地址:https://renderdoc.org/

cesium 编辑器 Demo http://cesiumlab.com/tower/#/
苏州市公安局应急库房全景实战模块 http://47.111.139.249:8135/
实时全景 https://cdn.deyou360.com/eze.mp4

将ShaderToy中的着色器移至Three.js(1) https://blog.csdn.net/weixin_34327223/article/details/91386851
使用 GLSL 实现抖音特效
https://juejin.cn/post/6844903814214991886
https://www.jianshu.com/p/5bb7f2a0da90

ThreeNodes.js 节点状态跟踪 http://idflood.github.io/ThreeNodes.js/index_optimized.html

金沙县廉政建设警示教育基地
http://www.mms3d.cn/Template/caseLink.html?%E9%87%91%E6%B2%99%E5%8E%BF%E5%BB%89%E6%94%BF%E5%BB%BA%E8%AE%BE%E8%AD%A6%E7%A4%BA%E6%95%99%E8%82%B2%E5%9F%BA%E5%9C%B0@B217JinSha/?mms3D

搜索 webgl 特效可搜到很多效果

如何快速判断一个点在三角形(多边形)内,外,边上?
1、用面积来判断
2、用叉乘来判断
3、过该点作一条射线,然后判断该射线与三条边的相交情况;
4、分别连接P点和三个顶点A,B,C,然后判断矢量PA,PB,PC所夹角之和是否为360度,如果是360度则P在三角形内
参考引用:https://bbs.csdn.net/topics/10244353

3D 工程师设计协作工具 EverCraft
https://evercraft.co/

【计算几何】多边形点集排序
参考引用:https://www.cnblogs.com/dwdxdy/p/3230156.html

[几何计算工具类]A JavaScript library for doing geometry
参考引用:https://github.com/HarryStevens/geometric

[算法][包围盒]球,AABB,OBB
包围体类型包括球体、轴对齐包围盒(AABB)、有向包围盒(OBB)、8-DOP以及凸壳
轴对齐包围盒(Axis-aligned bounding box),简称 AABB
方向包围盒(Oriented bounding box),简称 OBB
参考引用:
https://www.cnblogs.com/iamzhanglei/archive/2012/06/07/2539751.html
https://www.cnblogs.com/lyggqm/p/5386174.html

当我们谈优化时,我们谈些什么
参考引用:https://zhuanlan.zhihu.com/p/68158277
How Modern OpenGL can Radically Reduce Driver Overhead
参考引用:http://www.ozone3d.net/dl/201401/NVIDIA_OpenGL_beyond_porting.pdf

生成简单 3d 建筑可以使用:ArcGIS CityEngine

前面用三角形网格细分球面时,对单个三角形的着色方式采样的是“Flat Shading”。即:
通过三角形三顶点的坐标计算出整个三角形的法向量。
这样就导致相邻两个三角形的法向量差别很大,所以就能看到明显的三角形的边。

而“Smooth Shading”则是:先计算三角形三顶点处的法向量,然后将这三个法向量线性插值的结果作为整个三角形的法向量。
这样相邻两个三角形的法向量差别就会小很多(因为相邻两个三角形只有一个顶点不同)。

参考引用:https://blog.csdn.net/libing_zeng/article/details/60760296

WebGL 着色器偏导数 dFdx 和 dFdy 介绍
偏导数函数(HLSL 中的 ddx 和 ddy ,GLSL 中的 dFdx 和 dFdy )是片元着色器中的一个用于计算任何变量基于屏幕空间坐标的变化率的指令(函数)。在 WebGL 中,使用的是 dFdx 和 dFdy,还有另外一个函数 fwidth = dFdx + dFdy。
下面是 GLSL 中通过镜头坐标系中坐标计算面法线向量的代码:
normalize( cross(dFdx(pos), dFdy(pos)) );
参考引用:https://www.cnblogs.com/flyfox1982/p/11141638.html

shadertoy 入门篇 – https://www.jianshu.com/p/cc3fb8911cab

three.js 场景切换可以使用 crossfade – https://threejs.org/examples/?q=fad#webgl_postprocessing_crossfade

在线展管 Demo: https://3d.ishijue.com/SH2020/

three.js 纹理 offset,repeat,rotation,center 设置 demo,https://threejs.org/examples/?q=texture#webgl_materials_texture_rotation

three.js CSS2DRenderer 将文本做成类似与精灵(2D)的效果
https://threejs.org/examples/#css2d_label
https://threejs.org/examples/#webgl_loader_pdb

three.js css3d_periodictable Dom 也跟着旋转
https://threejs.org/examples/?q=css3d_periodictable#css3d_periodictable

srgb 及 linear 色彩空间

默认是 linear
srgb 对计算机友好

webgl 水渲染 http://madebyevan.com/webgl-water/