图形图像与几何算法
关注
分享
扫一扫
含影
高交互性3D内容生产/协作，
跨平台3D引擎，
跨平台渲染引擎，
高性能计算
展开
-
OBB碰撞检测可直接用的C++源码和TypeScript源码以及对应3D测试演示
OBB碰撞检测可直接用的C++源码和TypeScript源码以及对应3D测试演示，加了3D演示程序，方便直观理解。原创 2023-05-07 09:53:02 · 1250 阅读 · 0 评论 -
截图的背景色如何去除？这里介绍一个小工具
屏幕截图，是方便常用的功能。例如从网页或者视频中截图。但是有时候想去除截图中的背景颜色，怎么办？下面这个案例介绍如何去掉截图中的蓝色背景色。这是去掉截图背景色的一个便捷的Web小工具。直接复制截图就能用。原创 2023-05-03 08:04:17 · 2574 阅读 · 0 评论 -
EWA(Elliptical Weighted Average)滤波
EWA(Elliptical Weighted Average)原创 2023-03-23 20:03:11 · 895 阅读 · 0 评论 -
Deferred Lighting Rendering Tile Base 实时渲染同屏42000盏灯(没有使用Computer Shader)
周末在家思考了第二种渲染方式性能又有所提升，在20000盏灯的时候可以达到稳定的60fps。下图是42000盏灯分布在一个长方体空间内,Fps为42左右:下图是21000盏灯分布在一个长方体空间内,Fps为60左右:原理比较简单，但是要系统性的高性能还是有点难度。Tile Base 和 Cluster Shadering相比 有他的缺点但是又有他的优势。...原创 2019-04-28 12:05:37 · 417 阅读 · 1 评论 -
3D引擎中高效拾取(Pick)像素级数据(可见对象, 深度，法线等)
请见Demo:http://www.artvily.com/renderCase?sample=mousePickNormal很多3D应用中需要获取像素级别的数据用于各种操作，例如需要知道光标选中了哪个显示对象这种常见的应用。其实合理的引擎渲染器渲染管理机制之下，很容易拿到几乎是任何想拿到的某个可见像素的信息,例如法线，切线，光照或阴影相关数据，三角形信息等等。上面的示例中演示了获...原创 2019-04-13 10:16:06 · 1009 阅读 · 2 评论 -
10样本值采样核心 SSAO (屏幕空间环境遮蔽)优化(WebGL实现Demo)
Demo:http://www.artvily.com/renderCase?sample=ssao6效果图:SSAO 采样越少渲染效率越高，但是如果不加优化图像质量必然越差。以上效果是10个采样核心的样本在比较大半球半径情况下生成的SSAO(当然采样次数改为9次也可以)。主要优化的点有三个。1.对于一个表面点来讲距离这个点太近或者太贴近这个点的切面的位置其实对环境遮蔽影响不大...原创 2019-02-20 20:55:42 · 967 阅读 · 0 评论 -
3D纹理展示方式之RayMarch(光线投射)(glsl源码说明)
Demo:http://www.artvily.com/renderCase?sample=tex3DRayMarch3D纹理在基于volume rendering的渲染机制的相关应用中有着广泛的应用。应用的领域非常广泛,例如考古、医学、材料科学，游戏等等。一般来说3D纹理，可以理解为具有三个维度(width,height,depth)的数据类似于三维数组。一般的2D纹理我们可以认为它就...原创 2019-02-14 23:56:51 · 1574 阅读 · 5 评论 -
3D纹理展示方式之Slice(切片)
Demo:http://www.artvily.com/renderCase?sample=tex3D3D纹理在基于volume rendering的渲染机制的相关应用中有着广泛的应用。应用的领域非常广泛,例如考古、医学、材料科学，游戏等等。一般来说3D纹理，可以理解为具有三个维度(width,height,depth)的数据类似于三维数组。一般的2D纹理我们可以认为它就是一张图片(实...原创 2019-02-14 23:24:26 · 2668 阅读 · 0 评论 -
Dither(抖动): Bayer Matrix(Bayer ordered dither matrix)与Bayer Filter(拜尔滤镜)
1.参考(我的示例代码在页面底端)可参考8x8 Bayer matrix: https://github.com/libretro/glsl-shaders/blob/master/dithering/shaders/bayer-matrix-dithering.glslBayerFilter: https://en.wikipedia.org/wiki/Bayer_filter2.O...原创 2019-01-30 21:32:03 · 8822 阅读 · 2 评论 -
莫列波纹(Moiré pattern)与Banding
1.莫列波纹(英语：Moiré pattern)，又译为摩尔纹、莫尔条纹、叠纹、水状波纹、是一种在栅栏状条纹重叠下所产生的干涉影像。莫列波纹来自法语：moiré, 是一种纺织品，它的纹路类似于水波。最早这种纺织品是由丝作成，后来也用棉线或人造纤维来呈现相同的效果2.wiki:https://zh.wikipedia.org/wiki/%E8%8E%AB%E5%88%97%E6%B3%A2%E7...原创 2019-01-30 08:55:15 · 5256 阅读 · 0 评论 -
GodRay应用＜2＞: 屏幕(像素)空间高效模拟光束，高速尾迹等效果
请见Demo:http://www.artvily.com/renderCase?sample=godrayShaftLight01效果图:现实中，很多时候都能见到光束(光散射)，现在实时渲染中已经有很多方式(体积光效果更好)来模拟这种自然现象，来增强画面的表现力。这里是使用了最基本的径向后处理机制来实现这样类似的效果。原理很简单, 一般情况下绘制场景对象的时候，如果认为这个对象...原创 2019-01-24 09:09:31 · 933 阅读 · 0 评论 -
GodRay应用＜1＞: 像素空间高效模拟光芒、爆炸、绒毛等效果
请见demo:http://www.artvily.com/renderCase?sample=godrayPixelRadio01效果图:算法描述: 在片段作色阶段，依据当前pixel和相关参数(例如中心位置或者方向，色彩计算的权重)，计算出当前pixel的实际输出结果不需要对邻近像素采样(也就是类卷积运算,也就是不需要用径向模糊等相关计算)。这个基本原理可以用在面片(平面或者b...原创 2019-01-24 08:40:54 · 670 阅读 · 0 评论 -
rayleigh and mie scattering(瑞利散射和米氏散射或着叫粗粒散射)相关
一般把粒子的直径与入射光波波长相当的微粒所造成的散射称为米散射, 米散射适合于任何粒子尺度，只是当微粒直径相对于光波波长而言很小时用瑞利散射(米散射的结果可简化为瑞利散射)，很大时用弗朗和费衍射理论可近似解决问题。米散射的特点是与波长无关，对各波长的散射能力相同，例如大气较浑浊时，大气中悬浮很多尘粒设液滴，这时的散射使天空呈灰白色。用米散射计算模型能广泛描述任何尺度的球状粒子的散射特点。...原创 2019-01-23 09:28:24 · 18922 阅读 · 0 评论 -
多重ProjectMap(投影纹理)原理和拓展应用(Demo和Shader源码)
请见Demo:http://www.artvily.com/renderCase?sample=projectMapMult效果图:投用纹理的基本原理: 以世界坐标空间中，检测当前像素位置是否能被投影纹理所在的空间(可由投影纹理对应的摄像机(后面称作PMCamera)来描述,)可见性(和光照计算一致)如果可见计算出对应的纹理坐标。以2D纹理为例,这里计算出来的纹理坐标来讲就是此像素位...原创 2019-01-11 12:41:36 · 549 阅读 · 1 评论 -
通过纹理数据以及其他参数在合适的纹理表现位置来"干扰"法线，来增强纹理表现的质感
demo:http://www.artvily.com/renderCase?sample=defaultLightInit以上demo使用了3个点光源(ADS光照)一般光照分为漫反射和镜面反射，这两部分可以分开计算法线的方式和混合比例来适应对应的表面材料的表现。而且干扰的算法和输入的干扰的参数可以是专门的纹理数据也可以是别的数据光照结果和源纹理混合也可以使用混合参数来调节这些...原创 2019-01-09 14:04:16 · 287 阅读 · 1 评论 -
WebGL直接写的火爆2D射击游戏(源码)
请看demo:http://www.artvily.com/renderCase?sample=shipAttack2d加载可能有点慢，稍等一下就能看到效果资源下载(或者直接从浏览器中就可以拿到源码和资源):https://download.csdn.net/download/vily_lei/10904799游戏可以直接在任何支持webGL的设备(PC或者移动)上流畅运行(整个游戏渲...原创 2019-01-08 20:40:25 · 2480 阅读 · 1 评论 -
RGB/XYZ Color Space Convert(RGB和XYZ色彩空间的相互转换矩阵)
如上图所示，左边为RGB色彩空间, 右边为XYZ色彩空间常用转换矩阵:更多的矩阵数据(感谢:http://brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html):RGB Working Space Reference White RGB to XYZ [M] XYZ to RGB [M]-1 Ado...原创 2019-01-03 10:18:27 · 17877 阅读 · 5 评论 -
加入反射和折射的多目标实时环境映射(WebGL Engine 实现的 Demo)
请见Demo:http://www.artvily.com/renderCase?sample=cubemapMult原创 2019-01-01 20:50:38 · 558 阅读 · 1 评论 -
反射和折射的混合
折射效果和反射效果可以通过各种形式混合，就能呈现不同的材质感觉原创 2019-01-01 11:41:32 · 421 阅读 · 0 评论 -
快速实现GLSL Shader(支持GLES2/GLES3)的一个辅助小系统<Ver1>(源码下载)
这个辅助的系统在浏览器环境下运行，用于快速预览和测试片段着色器。下载资源链接(如果找不到，可能还未通过审核。如有不便请留言, 实在下载不了请加QQ群: 722973433):https://download.csdn.net/download/vily_lei/10795631下载之后解压缩，请看ReadMe.本系统简洁轻巧,用于快速实现基于glsl es2/es3 的demo以方...原创 2018-11-20 12:22:53 · 1146 阅读 · 0 评论 -
GLSL Shader Fragment BlendMode Functions
vec4 blendMix( vec4 a, vec4 b, vec4 value ) { return a * value + b * ( 1 - value ); }vec4 blendMix( vec4 a, vec4 b, float value ) { return a * value + b * ( 1 - value ); } vec4 blendBase( vec4 a, v...原创 2018-10-29 15:34:47 · 260 阅读 · 0 评论 -
纯GLSL分步实现电影般画面的湖光山色＜Step2＞: 艳阳蓝天和碧水(WebGL实现)
上一篇:https://blog.csdn.net/vily_lei/article/details/83144725这一篇加了水，模拟了水面的反射和折射。Demo1(水面只有反射和自发光):http://www.artvily.com/sdf?sample=column&clip=lakeMountain/baseLake2precision highp float;...原创 2018-10-19 12:41:31 · 1122 阅读 · 1 评论 -
纯GLSL分步实现电影般画面的湖光山色＜Step1＞: 艳阳蓝天(WebGL实现)
在实时渲染领域，呈现一个绚丽的画面除了艺术美术的功力之外，还需要大部分的技术支持: 数理几何原理和渲染技术。GLSL(OpenGL的Shader语言,用于对GPU渲染过程实现编程控制)就是这些技艺和呈现之间的桥梁。一个稍微复杂的画面，用纯GLSL实现，除了要熟悉这个语法以及对应的GPU功能之外还需要熟悉数理原理和一些技巧，所以包含的内容比较多。湖光山色是一个富有诗意的画面，在Shade...原创 2018-10-18 12:33:00 · 643 阅读 · 1 评论 -
2002年之前的渲染技术年表
https://en.wikipedia.org/wiki/Rendering_(computer_graphics)原创 2018-10-16 09:02:20 · 197 阅读 · 0 评论 -
使用纹理(Texture)RGB数据来"干扰"法线(Normalize)的数据,强化材质表面质感
算法举例: vec3 tnv = normalize(nv + rgb - 0.5);一般材质表面在渲染中的粗糙凹凸表现由法线控制，用上述算法使法线通过将rgb值(0.0~1.0)转换为rgb(-0.5~0.5), 这个结果就可以模拟法线所在的位置叠加了凹凸变化。也因此反射的光强发生了响应的强弱变化。这个方法可以扩展使用，参数和算法可以自己在调整。有些地方这个方案直接可以省去法线贴图。下面...原创 2018-10-13 15:14:51 · 878 阅读 · 0 评论 -
多种纹理的复杂组合在渲染系统中的应用: WebGL演示
Demo:http://www.artvily.com/sample?sample=combinationTex纹理作为几何体表面的表现数据源的主力，很多地方需要用到。有时候需要用到多种纹理对象，例如一维二维三维纹理同在一个shader中用到，就需要渲染系统对纹理源的灵活的支持。在我的渲染系统中TextureBase对象有一个next成员变量，这样的话，就可以通过next来"挂载"多个不同...原创 2018-10-11 20:02:18 · 310 阅读 · 0 评论 -
对纹理进行混合运算也可以是很酷的效果Demo(WebGL实现)
Demo:http://www.artvily.com/sample?sample=sdftoy_4lXGRB主要就是纹理取值的混合操作，可以做的更复杂。上面这个算法相当于多张图由小放大层层叠起来的三维数据，效果立体感强多了Demo:http://www.artvily.com/sdf?sample=codeDemo&clip=toy4lXGRB2...原创 2018-10-09 15:10:27 · 554 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(13): 形体变形方法(WebGL实现)：Displacement(置换)
Demo:http://www.artvily.com/sdf?sample=codeDemo&clip=displaceExampleDisplacement(置换), 是"变形" 相关操作非常重要的工具，它使用一个因子(可能是个sdf或者其他函数)对一个sdf函数造成影像，可以加也可以乘。上图可以看到几种基本的变形结果。我的理解是:Displacement(置换),就是把一...原创 2018-10-09 12:57:35 · 691 阅读 · 1 评论 -
SDF(Signed-distance-field: 有向距离场)(12): Shadow And AO(WebGL实现)增强立体感
Demo1:http://www.artvily.com/sdf?sample=codeDemo&clip=shadowAndAO3Demo2:http://www.artvily.com/sdf?sample=codeDemo&clip=shadowAndAO2AO(Ambient Occlusion) 中文翻译为环境遮蔽， 这个功能可以在渲染中有效增强立体感。可...原创 2018-10-08 13:18:29 · 1056 阅读 · 1 评论 -
SDF(Signed-distance-field: 有向距离场)(11): 阴影(WebGL实现)
Demo:http://www.artvily.com/sdf?sample=codeDemo&clip=shadow01Thanks very much:http://www.iquilezles.org/www/articles/rmshadows/rmshadows.htm在常见的3D渲染引擎中，阴影一般都会用shadowmap, 这样可以尽可能的优先利用硬件资源。而S...原创 2018-10-08 12:42:06 · 1413 阅读 · 1 评论 -
Pi, Phi(黄金比例) and Fibonacci(斐波纳契数)
info:https://www.goldennumber.net/pi-phi-fibonacci/from: https://www.zhihu.com/question/28062458golden mean:https://static1.squarespace.com/static/523a572be4b0bea71219be32/t/530d43a3e4b046c4d2bc85...原创 2018-10-05 22:57:56 · 1297 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(10): 海面波动效果
Demo:http://www.artvily.com/sample?sample=sdfStep09distortion6波动的原理就是在距离震源相应的距离上有相应的振幅，而且是依据距离周期性的变化，一般就用cos或者sin函数来计算这个周期性，而参数就是距离震源的值。...原创 2018-10-01 21:35:36 · 896 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(9): 构建SDF空间模型六个重要基石
A.Transform(一般的缩放旋转平移以及旋转中心的更改)B.距离场函数及相应的变体(我把距离场函数描述的空间区域叫做距离场空间分布函数)C.Reapeat(某个区域或者整个空间重复某部分场函数计算)D.过渡/混合(Blend)（用于一个场函数描述的空间与另一个有过渡的衔接）E.布尔运算(交集，合并，差)F.Displace(置换)(以一个空间作为另外一个空间计算的因子)SDF: 这六个...原创 2018-09-30 16:33:20 · 2513 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(7): 距离场函数-基于CUBE计算方式产生的若干变体A
SDF非常好玩的地方之一就是通过距离场函数的实现来实现空间分布函数，这样可以创造神奇的空间几何体造型。这个样例就是通过变换CUBE的距离场函数，来实现其各种各异的变形，下面的demo只是展示了基本的变体(改变cube的计算方式生成的Cube变体)。Demo1:http://www.artvily.com/sample?sample=sdfStep09distortion3效果图:...原创 2018-09-29 10:01:03 · 4844 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(6): 空间复制(repeat)(生成大规模显示对象)
Demo1:http://www.artvily.com/sample?sample=sdfStep09distortionDemo2:http://www.artvily.com/sample?sample=sdfStep09distortion2通过这种方式和SDF独有的计算方式可以绝对轻松的"制造"非常大规模的"显示对象",效果图如下:...原创 2018-09-28 19:20:27 · 1258 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(5): 缩放-旋转-平移(复杂组合变换)
Demo1:http://www.artvily.com/sample?sample=sdfStep08TransformDemo2:http://www.artvily.com/sample?sample=sdfStep08Transform2Demo中包括设置旋转中心，父级变换对子集变换的影响等。...原创 2018-09-28 19:11:02 · 1054 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(4): 缩放-旋转-平移(源码和Demo)
Demo1:http://www.artvily.com/sample?sample=sdfStep08TransformDemo2:http://www.artvily.com/sample?sample=sdfStep07Thanks very much:https://www.shadertoy.com/view/4tcGDr下面是欧拉角形式的旋转代码:void rot...原创 2018-09-27 21:00:55 · 1252 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)WebGL GLSL(2)
Demo:http://www.artvily.com/sample?sample=sdfStep04Demo:http://www.artvily.com/sample?sample=sdfStep04athanks very much: https://www.shadertoy.com/view/MttGz7SDF空间计算的方法非常有意思，有兴趣的朋友一起交流...原创 2018-09-25 20:13:58 · 1223 阅读 · 1 评论 -
SDF(Signed-distance-field: 有向距离场)WebGL GLSL(1)
Demo:http://www.artvily.com/sample?sample=sdfBase01感谢:https://www.shadertoy.com/view/Xds3zN请参见:http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/http://www.iquilezles.o...原创 2018-09-20 17:47:16 · 1727 阅读 · 1 评论 -
GLSL Shader 中的一些有用的功能函数代码实现
//2D grid,for texture or post:bool grid(vec2 uv){ return fract(uv.x) > 0.5 ^^ fract(uv.y) > 0.5;}//Circle:bool circle(vec2 pos, float rad, vec2 uv){ return dot(uv - pos, uv - po...原创 2018-09-20 12:39:53 · 1161 阅读 · 0 评论