![](https://img-blog.csdnimg.cn/20190927151053287.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
glsl/hlsl
glsl或hlsl相关内容, 包括知识点、用例、经验分享等
含影
高交互性3D内容生产/协作,
跨平台3D引擎,
跨平台渲染引擎,
高性能计算
展开
-
DirectX HLSL Shader versions and resource limits(DX Shader 寄存器等资源限制)
directX Shader 寄存器等资源限制详情原创 2019-02-14 15:28:08 · 295 阅读 · 0 评论 -
3D引擎性能优化: glsl es 中不推荐使用 普通 struct 结构体类型的 uniform
precision mediump float;uniform sampler2D u_sampler0;//uniform sampler2D u_sampler1;//uniform vec4 u_cameraParam;uniform vec4 u_colors[2];// The common structure uniform is the bad implements, it is low runtime performeance, because:// gl.getUnif..原创 2021-01-28 10:52:28 · 499 阅读 · 0 评论 -
纹理操作: Mask 和 Blend ---- 青苔的生长与消失(GLSL源码)
请见Demo:http://www.artvily.com/renderCase?sample=mossMask这里模拟了青苔慢慢蔓延和消失的动态过程原创 2020-03-09 23:21:45 · 473 阅读 · 2 评论 -
在片段着色器中通过对uv进行多重变换实现丰富的纹理表现效果(GLSL源码)示例
请见demo:http://www.artvily.com/renderCase?sample=uvMultCalc///////////////// 着色器glsl代码示例(由编辑器生成) ///////////////// ** vshd_str: precision mediump float;precision mediump int;layout(location ...原创 2020-03-08 23:42:46 · 590 阅读 · 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 · 1089 阅读 · 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 · 228 阅读 · 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 · 1080 阅读 · 1 评论 -
对纹理进行混合运算也可以是很酷的效果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 · 502 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(8): 距离场函数-基于CUBE计算方式产生的若干变体B
SDF非常好玩的地方之一就是通过距离场函数的实现来实现空间分布函数,这样可以创造神奇的空间几何体造型。这个样例就是通过变换CUBE的距离场函数,来实现其各种各异的变形,下面的demo只是展示了另一种变体(改变cube的计算方式生成的Cube变体)。但是要注意细节几何形状在整个形体体积的比例,如果比例太大可能会出现撕裂破碎等情况,原因是SDF的检测机制在边界条件之外无法正常执行。Demo1:ht...原创 2018-09-30 14:16:57 · 1703 阅读 · 0 评论 -
反射和折射的混合
折射效果和反射效果可以通过各种形式混合,就能呈现不同的材质感觉原创 2019-01-01 11:41:32 · 374 阅读 · 0 评论 -
GodRay应用<1>: 像素空间高效模拟光芒、爆炸、绒毛等效果
请见demo:http://www.artvily.com/renderCase?sample=godrayPixelRadio01效果图:算法描述: 在片段作色阶段,依据当前pixel和相关参数(例如中心位置或者方向,色彩计算的权重),计算出当前pixel的实际输出结果不需要对邻近像素采样(也就是类卷积运算,也就是不需要用径向模糊等相关计算)。这个基本原理可以用在面片(平面或者b...原创 2019-01-24 08:40:54 · 623 阅读 · 0 评论 -
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 · 2352 阅读 · 1 评论 -
通过纹理数据以及其他参数在合适的纹理表现位置来"干扰"法线,来增强纹理表现的质感
demo:http://www.artvily.com/renderCase?sample=defaultLightInit以上demo使用了3个点光源(ADS光照)一般光照分为漫反射和镜面反射,这两部分可以分开计算法线的方式和混合比例来适应对应的表面材料的表现。而且干扰的算法和输入的干扰的参数可以是专门的纹理数据也可以是别的数据光照结果和源纹理混合也可以使用混合参数来调节这些...原创 2019-01-09 14:04:16 · 252 阅读 · 1 评论 -
3D纹理展示方式之RayMarch(光线投射)(glsl源码说明)
Demo:http://www.artvily.com/renderCase?sample=tex3DRayMarch3D纹理在基于volume rendering的渲染机制的相关应用中有着广泛的应用。应用的领域非常广泛,例如考古、医学、材料科学,游戏等等。一般来说3D纹理,可以理解为具有三个维度(width,height,depth)的数据类似于三维数组。一般的2D纹理我们可以认为它就...原创 2019-02-14 23:56:51 · 1476 阅读 · 5 评论 -
Opengl报错 INVALID_OPERATION: bindTexture: textures can not be used with multiple targets. 原因
前段时间调整渲染系统的"渲染命令机队列"的运行结构和机制,以保证在渲染执行阶段尽可能的没有逻辑运算和判断来提升性能(主要优化cpu instruction cache),今天在测试一个比较复杂的实时组合不同类型的多重纹理的demo,结果直接报了INVALID_OPERATION: bindTexture: textures can not be used with multiple targe...原创 2019-02-14 15:24:24 · 2086 阅读 · 2 评论 -
Deferred rendering Gbuffer优化: 单张Float16纹理存储更多信息来“模拟“MRT
请见Demo:http://www.artvily.com/renderCase?sample=oneFloatTexToMRT光照在 Deferred rendering 机制下性能会更好, 尤其是基于tile base rendering 或者 cluster rendering 的光照数据检索原理,会让性能更优。但是gbuffer在使用的时候,一般都需要硬件对MRT的支持, 即使支持...原创 2019-04-22 12:32:48 · 597 阅读 · 0 评论 -
Deferred Lighting: 2640 dynamic lights in single view(WebGL Demo)(没有使用Computer Shader)
Demo:http://www.artvily.com/renderCase?sample=deferredManyLights2Rendering Effect Screenshot:原创 2019-06-26 20:33:12 · 185 阅读 · 3 评论 -
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 · 612 阅读 · 1 评论 -
渲染系统中MRT和RTT的应用组合(WEBGL2 GLSL ES3实现)
Demo:http://www.artvily.com/sample?sample=mrtgl2上图是先实施了两个目标输出的MRT然后绘再使用这个MRT的输出结果来制场景到一个RTT中最后又被一次绘制CUBE使用,之后输出到屏幕。(其实MRT和RTT只是输出目标是多个和一个的区别, 当然glsl代码也有区别)我的渲染系统的设计思路是用 RTT/MRT控制对象来管理这个流程。我的渲染系统...原创 2018-10-18 21:00:30 · 1120 阅读 · 0 评论 -
渲染系统中MRT和RTT的应用组合(WEBGL1 GLSL ES1实现)
Demo:http://www.artvily.com/sample?sample=mrtgl1a效果图:上图是先实施了两个目标输出的MRT然后绘再使用这个MRT的输出结果来制场景到一个RTT中最后又被一次绘制CUBE使用,之后输出到屏幕。(其实MRT和RTT只是输出目标是多个和一个的区别, 当然glsl代码也有区别)我的渲染系统的设计思路是用 RTT/MRT控制对象来管理这个流程...原创 2018-10-18 20:54:39 · 872 阅读 · 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 · 4637 阅读 · 1 评论 -
glsl 实现的热气流动及其变体的效果(源码地址)
请见: https://www.cnblogs.com/vilyLei/articles/9271698.html原创 2018-07-06 09:56:16 · 381 阅读 · 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 · 1775 阅读 · 0 评论 -
3D游戏中闪电/光线等类似效果的一种实现原理
demo:http://www.artvily.com/sample?sample=lightLine通过绘制连续项链的面片(始终朝向摄像机)组成的"带子",对这个带子模型使用纹理动画切换不同帧的纹理就实现了对应的效果。这个"带子"是3D空间的曲线,可以任意指定起点,中间若干点,终点。...原创 2018-07-27 20:38:09 · 1256 阅读 · 0 评论 -
多重纹理的应用: 表现岩石地表间的湖泊的动态效果
demo:http://www.artvily.com/sample?sample=multTex使用了三重纹理表现岩石地表间的湖泊原创 2018-07-28 11:57:22 · 270 阅读 · 0 评论 -
glsl (WebGL) 粒子系统(Demo: 爆炸和跟随)
Demo:http://www.artvily.com/sample?sample=particle效果图:实现原理:粒子系统包含两个方式:1.纯粹由 GPU 计算, 每次运行时候只需传入时间和其他极少的参数,性能好,但是控制难度大,绘制批次不易管理。2.一个容器一次生成很多粒子,一个大的粒子容器只需绘制一次,通过给GPU动态传入更改了的数据来实现动态图像。这种方式特点是...原创 2018-08-28 18:49:07 · 3829 阅读 · 0 评论 -
基于GL_POINTS的粒子系统会节省很多显存和带宽
demo:1.http://www.artvily.com/sample?sample=gpuPointParticle2.http://www.artvily.com/sample?sample=pointParticle原创 2018-09-08 14:43:31 · 753 阅读 · 0 评论 -
glsl(WebGL演示)白云朵朵效果
Demo:http://www.artvily.com/sample?sample=pointCloud代码在浏览器缓存中(代码是基于自己渲染引擎的简化版,但是有详细分类)原创 2018-09-10 20:35:49 · 1208 阅读 · 1 评论 -
3D空间画线演示(这里使用webgl 所以不能设置线宽)
Demo:http://www.artvily.com/sample?sample=lineBase如果直接用opengl,绘制线更方便,webgl只是使用gles的一些api,而且各个浏览器支持不一样。如果打开Demo出现错误,请清空缓存再打开,因为我的每个版本有些代码有改动。...原创 2018-09-18 19:34:36 · 1027 阅读 · 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 · 1168 阅读 · 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 · 1107 阅读 · 0 评论 -
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 · 1606 阅读 · 1 评论 -
SDF(Signed-distance-field: 有向距离场)(3): 空间划分原理(源码解释)
下面这是SDF常用的三个函数:// intersect(求交)vec2 mult(vec2 tA, vec2 tB) { if(tA.x > tB.x) return tA; return tB;}// union(合并)vec2 add(vec2 tA, vec2 tB) { if(tA.x < tB.x) return tA; retu...原创 2018-09-26 18:53:27 · 10569 阅读 · 0 评论 -
多种纹理的复杂组合在渲染系统中的应用: WebGL演示
Demo:http://www.artvily.com/sample?sample=combinationTex纹理作为几何体表面的表现数据源的主力,很多地方需要用到。有时候需要用到多种纹理对象,例如一维二维三维纹理同在一个shader中用到,就需要渲染系统对纹理源的灵活的支持。在我的渲染系统中TextureBase对象有一个next成员变量,这样的话,就可以通过next来"挂载"多个不同...原创 2018-10-11 20:02:18 · 274 阅读 · 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 · 826 阅读 · 0 评论 -
纯GLSL分步实现电影般画面的湖光山色<Step1>: 艳阳蓝天(WebGL实现)
在实时渲染领域,呈现一个绚丽的画面除了艺术美术的功力之外,还需要大部分的技术支持: 数理几何原理和渲染技术。GLSL(OpenGL的Shader语言,用于对GPU渲染过程实现编程控制)就是这些技艺和呈现之间的桥梁。一个稍微复杂的画面,用纯GLSL实现,除了要熟悉这个语法以及对应的GPU功能之外还需要熟悉数理原理和一些技巧,所以包含的内容比较多。湖光山色是一个富有诗意的画面,在Shade...原创 2018-10-18 12:33:00 · 601 阅读 · 1 评论 -
WebGL Texture Alpha Channel 应用动画
demo:http://www.artvily.com/palette?sample=palette&clip=AlphaChannelTex原创 2018-07-11 09:43:36 · 303 阅读 · 0 评论