图形图像与几何算法
含影
高交互性3D内容生产/协作,
跨平台3D引擎,
跨平台渲染引擎,
高性能计算
展开
-
OBB碰撞检测可直接用的C++源码和TypeScript源码以及对应3D测试演示
OBB碰撞检测可直接用的C++源码和TypeScript源码以及对应3D测试演示,加了3D演示程序,方便直观理解。原创 2023-05-07 09:53:02 · 1058 阅读 · 0 评论 -
截图的背景色如何去除?这里介绍一个小工具
屏幕截图,是方便常用的功能。例如从网页或者视频中截图。但是有时候想去除截图中的背景颜色,怎么办?下面这个案例介绍如何去掉截图中的蓝色背景色。这是去掉截图背景色的一个便捷的Web小工具。直接复制截图就能用。原创 2023-05-03 08:04:17 · 2193 阅读 · 0 评论 -
EWA(Elliptical Weighted Average)滤波
EWA(Elliptical Weighted Average)原创 2023-03-23 20:03:11 · 655 阅读 · 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 · 230 阅读 · 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 · 1098 阅读 · 0 评论 -
反射和折射的混合
折射效果和反射效果可以通过各种形式混合,就能呈现不同的材质感觉原创 2019-01-01 11:41:32 · 375 阅读 · 0 评论 -
GodRay应用<1>: 像素空间高效模拟光芒、爆炸、绒毛等效果
请见demo:http://www.artvily.com/renderCase?sample=godrayPixelRadio01效果图:算法描述: 在片段作色阶段,依据当前pixel和相关参数(例如中心位置或者方向,色彩计算的权重),计算出当前pixel的实际输出结果不需要对邻近像素采样(也就是类卷积运算,也就是不需要用径向模糊等相关计算)。这个基本原理可以用在面片(平面或者b...原创 2019-01-24 08:40:54 · 624 阅读 · 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 · 1084 阅读 · 1 评论 -
SDF(Signed-distance-field: 有向距离场)(9): 构建SDF空间模型六个重要基石
A.Transform(一般的缩放旋转平移以及旋转中心的更改)B.距离场函数及相应的变体(我把距离场函数描述的空间区域叫做距离场空间分布函数)C.Reapeat(某个区域或者整个空间重复某部分场函数计算)D.过渡/混合(Blend)(用于一个场函数描述的空间与另一个有过渡的衔接)E.布尔运算(交集,合并,差)F.Displace(置换)(以一个空间作为另外一个空间计算的因子)SDF: 这六个...原创 2018-09-30 16:33:20 · 2405 阅读 · 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 · 512 阅读 · 0 评论 -
2002年之前的渲染技术年表
https://en.wikipedia.org/wiki/Rendering_(computer_graphics)原创 2018-10-16 09:02:20 · 171 阅读 · 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 · 620 阅读 · 1 评论 -
纯GLSL分步实现电影般画面的湖光山色<Step1>: 艳阳蓝天(WebGL实现)
在实时渲染领域,呈现一个绚丽的画面除了艺术美术的功力之外,还需要大部分的技术支持: 数理几何原理和渲染技术。GLSL(OpenGL的Shader语言,用于对GPU渲染过程实现编程控制)就是这些技艺和呈现之间的桥梁。一个稍微复杂的画面,用纯GLSL实现,除了要熟悉这个语法以及对应的GPU功能之外还需要熟悉数理原理和一些技巧,所以包含的内容比较多。湖光山色是一个富有诗意的画面,在Shade...原创 2018-10-18 12:33:00 · 607 阅读 · 1 评论 -
加入反射和折射的多目标实时环境映射(WebGL Engine 实现的 Demo)
请见Demo:http://www.artvily.com/renderCase?sample=cubemapMult原创 2019-01-01 20:50:38 · 519 阅读 · 1 评论 -
多重ProjectMap(投影纹理)原理和拓展应用(Demo和Shader源码)
请见Demo:http://www.artvily.com/renderCase?sample=projectMapMult效果图:投用纹理的基本原理: 以世界坐标空间中,检测当前像素位置是否能被投影纹理所在的空间(可由投影纹理对应的摄像机(后面称作PMCamera)来描述,)可见性(和光照计算一致)如果可见计算出对应的纹理坐标。以2D纹理为例,这里计算出来的纹理坐标来讲就是此像素位...原创 2019-01-11 12:41:36 · 508 阅读 · 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 · 16806 阅读 · 5 评论 -
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 · 355 阅读 · 1 评论 -
3D引擎中高效拾取(Pick)像素级数据(可见对象, 深度,法线等)
请见Demo:http://www.artvily.com/renderCase?sample=mousePickNormal很多3D应用中需要获取像素级别的数据用于各种操作,例如需要知道光标选中了哪个显示对象这种常见的应用。其实合理的引擎渲染器渲染管理机制之下,很容易拿到几乎是任何想拿到的某个可见像素的信息,例如法线,切线,光照或阴影相关数据,三角形信息等等。上面的示例中演示了获...原创 2019-04-13 10:16:06 · 938 阅读 · 2 评论 -
10样本值采样核心 SSAO (屏幕空间环境遮蔽)优化(WebGL实现Demo)
Demo:http://www.artvily.com/renderCase?sample=ssao6效果图:SSAO 采样越少渲染效率越高,但是如果不加优化图像质量必然越差。以上效果是10个采样核心的样本在比较大半球半径情况下生成的SSAO(当然采样次数改为9次也可以)。主要优化的点有三个。1.对于一个表面点来讲距离这个点太近或者太贴近这个点的切面的位置其实对环境遮蔽影响不大...原创 2019-02-20 20:55:42 · 914 阅读 · 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 · 7879 阅读 · 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 · 4737 阅读 · 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 · 1492 阅读 · 5 评论 -
3D纹理展示方式之Slice(切片)
Demo:http://www.artvily.com/renderCase?sample=tex3D3D纹理在基于volume rendering的渲染机制的相关应用中有着广泛的应用。应用的领域非常广泛,例如考古、医学、材料科学,游戏等等。一般来说3D纹理,可以理解为具有三个维度(width,height,depth)的数据类似于三维数组。一般的2D纹理我们可以认为它就是一张图片(实...原创 2019-02-14 23:24:26 · 2504 阅读 · 0 评论 -
rayleigh and mie scattering(瑞利散射和米氏散射或着叫粗粒散射)相关
一般把粒子的直径与入射光波波长相当的微粒所造成的散射称为米散射, 米散射适合于任何粒子尺度,只是当微粒直径相对于光波波长而言很小时用瑞利散射(米散射的结果可简化为瑞利散射),很大时用弗朗和费衍射理论可近似解决问题。米散射的特点是与波长无关,对各波长的散射能力相同,例如大气较浑浊时,大气中悬浮很多尘粒设液滴,这时的散射使天空呈灰白色。用米散射计算模型能广泛描述任何尺度的球状粒子的散射特点。...原创 2019-01-23 09:28:24 · 17811 阅读 · 0 评论 -
通过纹理数据以及其他参数在合适的纹理表现位置来"干扰"法线,来增强纹理表现的质感
demo:http://www.artvily.com/renderCase?sample=defaultLightInit以上demo使用了3个点光源(ADS光照)一般光照分为漫反射和镜面反射,这两部分可以分开计算法线的方式和混合比例来适应对应的表面材料的表现。而且干扰的算法和输入的干扰的参数可以是专门的纹理数据也可以是别的数据光照结果和源纹理混合也可以使用混合参数来调节这些...原创 2019-01-09 14:04:16 · 256 阅读 · 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 · 2362 阅读 · 1 评论 -
GodRay应用<2>: 屏幕(像素)空间高效模拟光束,高速尾迹等效果
请见Demo:http://www.artvily.com/renderCase?sample=godrayShaftLight01效果图:现实中,很多时候都能见到光束(光散射),现在实时渲染中已经有很多方式(体积光效果更好)来模拟这种自然现象,来增强画面的表现力。这里是使用了最基本的径向后处理机制来实现这样类似的效果。原理很简单, 一般情况下绘制场景对象的时候,如果认为这个对象...原创 2019-01-24 09:09:31 · 843 阅读 · 0 评论 -
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 · 978 阅读 · 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 · 1306 阅读 · 1 评论 -
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 · 4717 阅读 · 0 评论 -
WebGL 中 glsl noise的一个应用: 水流波浪荡漾的感觉
demo:http://www.artvily.com/palette?sample=palette&clip=noise_01效果图:关于 noise的介绍:https://thebookofshaders.com/11/欢迎交流原创 2018-07-24 12:37:34 · 1779 阅读 · 0 评论 -
glsl 实现的热气流动及其变体的效果(源码)
上图(因为webgl的限制,无法再web跑):glsl:void main(){ vec4 color; float cosV = cos(vTime); color = texture(texSampler, 0.5 * vec2((uv.x + vTime * 0.1),(uv.y + vTime * 0.1))); float e = color.r; float seg = ...原创 2018-07-05 20:32:28 · 780 阅读 · 0 评论 -
WebGL glsl fragment 着色器实现的纹理动画: 神秘海洋
效果链接:点击打开链接glsl代码:this.vshdCode = "precision mediump float;" +"attribute vec3 a_vtx_pos;" +"attribute vec2 a_vtx_uv;" +"varying highp vec2 v_texUV;" ...原创 2018-07-04 21:43:36 · 1116 阅读 · 1 评论 -
WebGL glsl fragment 着色器实现的纹理动画: 雷达扫描效果
Demo:http://www.artvily.com/palette?sample=palette&clip=texRadar截图:glsl代码:this.vshdCode = "precision highp float;" +"attribute vec3 a_vtx_pos;" +"attribute ...原创 2018-07-04 21:38:59 · 1616 阅读 · 0 评论 -
opengl glsl 计算模糊(Blur) WebGL实现(glsl源码)
模糊前:模糊后(WebGL实现: 点击打开链接):一般的采样模糊方式达不到上述效果,这里给出个人实现的glsl代码:void main(){ vec4 color = vec4(0.0); int seg = 5; int i = -seg; int j = 0; float f = 0.0f; float dv = 2.0f/512.0f; float to...原创 2018-07-04 21:29:50 · 4651 阅读 · 1 评论 -
WebGL Texture Alpha Channel 应用动画
demo:http://www.artvily.com/palette?sample=palette&clip=AlphaChannelTex原创 2018-07-11 09:43:36 · 309 阅读 · 0 评论 -
关于渲染的一些小技术
1,pcfhttp://blog.csdn.net/jxw167/article/details/65632580原创 2018-02-27 14:04:39 · 167 阅读 · 0 评论 -
空间triangle和AABB的相交判定方法
1.检测triangle和AABB各自的包围球是否相交,如果相交则进入下一步,如果不相交直接返回 false2.检测triangle所在的平面是否和AABB相交,如果相交则进入下一步,如果不相交直接返回 false3.使用triangle的三个边所在的与triangle平面正交的平面与AABB做相交计算如果这三个平面的正半空间都包含了AABB的部分顶点,则triangle就和A原创 2015-10-29 17:03:06 · 462 阅读 · 0 评论 -
使3D空间中物体朝向和其速度方向一致的旋转矩阵计算方案
图像与几何算法原创 2015-04-30 18:00:44 · 1516 阅读 · 1 评论 -
用于游戏中不同性格怪物移动表现AI演示
一个程序功能或算法的实现很多都可以说是一个分类方案的应用。在很多arpg游戏中都有一些不同"性格"的怪物,当玩家接触它们的时候它们会有不同的表现。有些怪物你接近它,攻击它,他都没反应,这里将这类怪物称之为蒙昧型的。有些怪物你接近它,他会逃跑,这里将这类称为但小型的。有些怪物你接近它,他可能主动进攻你,进攻一下又会逃跑,这样反反复复,这类就称之为狡猾型的。有些怪物你接近它,他原创 2013-03-11 09:10:54 · 968 阅读 · 0 评论