vily_lei的专栏

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..

请见Demo:http://www.artvily.com/renderCase?sample=mossMask这里模拟了青苔慢慢蔓延和消失的动态过程

请见demo:http://www.artvily.com/renderCase?sample=uvMultCalc///////////////// 着色器glsl代码示例(由编辑器生成) ///////////////// ** vshd_str: precision mediump float;precision mediump int;layout(location ...

Demo:http://www.artvily.com/renderCase?sample=deferredManyLights2Rendering Effect Screenshot:

请见Demo:http://www.artvily.com/renderCase?sample=oneFloatTexToMRT光照在 Deferred rendering 机制下性能会更好， 尤其是基于tile base rendering 或者 cluster rendering 的光照数据检索原理，会让性能更优。但是gbuffer在使用的时候，一般都需要硬件对MRT的支持, 即使支持...

Demo:http://www.artvily.com/renderCase?sample=tex3DRayMarch3D纹理在基于volume rendering的渲染机制的相关应用中有着广泛的应用。应用的领域非常广泛,例如考古、医学、材料科学，游戏等等。一般来说3D纹理，可以理解为具有三个维度(width,height,depth)的数据类似于三维数组。一般的2D纹理我们可以认为它就...

directX Shader 寄存器等资源限制详情

前段时间调整渲染系统的"渲染命令机队列"的运行结构和机制，以保证在渲染执行阶段尽可能的没有逻辑运算和判断来提升性能(主要优化cpu instruction cache)，今天在测试一个比较复杂的实时组合不同类型的多重纹理的demo，结果直接报了INVALID_OPERATION: bindTexture: textures can not be used with multiple targe...

请见demo:http://www.artvily.com/renderCase?sample=godrayPixelRadio01效果图:算法描述: 在片段作色阶段，依据当前pixel和相关参数(例如中心位置或者方向，色彩计算的权重)，计算出当前pixel的实际输出结果不需要对邻近像素采样(也就是类卷积运算,也就是不需要用径向模糊等相关计算)。这个基本原理可以用在面片(平面或者b...

demo:http://www.artvily.com/renderCase?sample=defaultLightInit以上demo使用了3个点光源(ADS光照)一般光照分为漫反射和镜面反射，这两部分可以分开计算法线的方式和混合比例来适应对应的表面材料的表现。而且干扰的算法和输入的干扰的参数可以是专门的纹理数据也可以是别的数据光照结果和源纹理混合也可以使用混合参数来调节这些...

请看demo:http://www.artvily.com/renderCase?sample=shipAttack2d加载可能有点慢，稍等一下就能看到效果资源下载(或者直接从浏览器中就可以拿到源码和资源):https://download.csdn.net/download/vily_lei/10904799游戏可以直接在任何支持webGL的设备(PC或者移动)上流畅运行(整个游戏渲...

折射效果和反射效果可以通过各种形式混合，就能呈现不同的材质感觉

这个辅助的系统在浏览器环境下运行，用于快速预览和测试片段着色器。下载资源链接(如果找不到，可能还未通过审核。如有不便请留言, 实在下载不了请加QQ群: 722973433):https://download.csdn.net/download/vily_lei/10795631下载之后解压缩，请看ReadMe.本系统简洁轻巧,用于快速实现基于glsl es2/es3 的demo以方...

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...

上一篇:https://blog.csdn.net/vily_lei/article/details/83144725这一篇加了水，模拟了水面的反射和折射。Demo1(水面只有反射和自发光):http://www.artvily.com/sdf?sample=column&clip=lakeMountain/baseLake2precision highp float;...

Demo:http://www.artvily.com/sample?sample=mrtgl2上图是先实施了两个目标输出的MRT然后绘再使用这个MRT的输出结果来制场景到一个RTT中最后又被一次绘制CUBE使用，之后输出到屏幕。(其实MRT和RTT只是输出目标是多个和一个的区别, 当然glsl代码也有区别)我的渲染系统的设计思路是用 RTT/MRT控制对象来管理这个流程。我的渲染系统...

Demo:http://www.artvily.com/sample?sample=mrtgl1a效果图:上图是先实施了两个目标输出的MRT然后绘再使用这个MRT的输出结果来制场景到一个RTT中最后又被一次绘制CUBE使用，之后输出到屏幕。(其实MRT和RTT只是输出目标是多个和一个的区别, 当然glsl代码也有区别)我的渲染系统的设计思路是用 RTT/MRT控制对象来管理这个流程...

在实时渲染领域，呈现一个绚丽的画面除了艺术美术的功力之外，还需要大部分的技术支持: 数理几何原理和渲染技术。GLSL(OpenGL的Shader语言,用于对GPU渲染过程实现编程控制)就是这些技艺和呈现之间的桥梁。一个稍微复杂的画面，用纯GLSL实现，除了要熟悉这个语法以及对应的GPU功能之外还需要熟悉数理原理和一些技巧，所以包含的内容比较多。湖光山色是一个富有诗意的画面，在Shade...

算法举例: vec3 tnv = normalize(nv + rgb - 0.5);一般材质表面在渲染中的粗糙凹凸表现由法线控制，用上述算法使法线通过将rgb值(0.0~1.0)转换为rgb(-0.5~0.5), 这个结果就可以模拟法线所在的位置叠加了凹凸变化。也因此反射的光强发生了响应的强弱变化。这个方法可以扩展使用，参数和算法可以自己在调整。有些地方这个方案直接可以省去法线贴图。下面...

Demo:http://www.artvily.com/sample?sample=combinationTex纹理作为几何体表面的表现数据源的主力，很多地方需要用到。有时候需要用到多种纹理对象，例如一维二维三维纹理同在一个shader中用到，就需要渲染系统对纹理源的灵活的支持。在我的渲染系统中TextureBase对象有一个next成员变量，这样的话，就可以通过next来"挂载"多个不同...

Demo:http://www.artvily.com/sample?sample=sdftoy_4lXGRB主要就是纹理取值的混合操作，可以做的更复杂。上面这个算法相当于多张图由小放大层层叠起来的三维数据，效果立体感强多了Demo:http://www.artvily.com/sdf?sample=codeDemo&clip=toy4lXGRB2...

Demo:http://www.artvily.com/sdf?sample=codeDemo&clip=displaceExampleDisplacement(置换), 是"变形" 相关操作非常重要的工具，它使用一个因子(可能是个sdf或者其他函数)对一个sdf函数造成影像，可以加也可以乘。上图可以看到几种基本的变形结果。我的理解是:Displacement(置换),就是把一...

SDF非常好玩的地方之一就是通过距离场函数的实现来实现空间分布函数，这样可以创造神奇的空间几何体造型。这个样例就是通过变换CUBE的距离场函数，来实现其各种各异的变形，下面的demo只是展示了另一种变体(改变cube的计算方式生成的Cube变体)。但是要注意细节几何形状在整个形体体积的比例，如果比例太大可能会出现撕裂破碎等情况，原因是SDF的检测机制在边界条件之外无法正常执行。Demo1:ht...

下面这是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...

Demo:http://www.artvily.com/sample?sample=sdfStep04Demo:http://www.artvily.com/sample?sample=sdfStep04athanks very much: https://www.shadertoy.com/view/MttGz7SDF空间计算的方法非常有意思，有兴趣的朋友一起交流...

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...

//2D grid,for texture or post:bool grid(vec2 uv){ return fract(uv.x) &gt; 0.5 ^^ fract(uv.y) &gt; 0.5;}//Circle:bool circle(vec2 pos, float rad, vec2 uv){ return dot(uv - pos, uv - po...

Demo:http://www.artvily.com/sample?sample=lineBase如果直接用opengl,绘制线更方便,webgl只是使用gles的一些api，而且各个浏览器支持不一样。如果打开Demo出现错误，请清空缓存再打开，因为我的每个版本有些代码有改动。...

Demo:http://www.artvily.com/sample?sample=pointCloud代码在浏览器缓存中(代码是基于自己渲染引擎的简化版,但是有详细分类)

demo:1.http://www.artvily.com/sample?sample=gpuPointParticle2.http://www.artvily.com/sample?sample=pointParticle

Demo:http://www.artvily.com/sample?sample=particle效果图:实现原理:粒子系统包含两个方式:1.纯粹由 GPU 计算, 每次运行时候只需传入时间和其他极少的参数,性能好，但是控制难度大，绘制批次不易管理。2.一个容器一次生成很多粒子，一个大的粒子容器只需绘制一次，通过给GPU动态传入更改了的数据来实现动态图像。这种方式特点是...

demo:http://www.artvily.com/sample?sample=multTex使用了三重纹理表现岩石地表间的湖泊

demo:http://www.artvily.com/sample?sample=lightLine通过绘制连续项链的面片(始终朝向摄像机)组成的"带子"，对这个带子模型使用纹理动画切换不同帧的纹理就实现了对应的效果。这个"带子"是3D空间的曲线，可以任意指定起点，中间若干点，终点。...

demo:http://www.artvily.com/palette?sample=palette&amp;clip=noise_01效果图:关于 noise的介绍:https://thebookofshaders.com/11/欢迎交流

demo:http://www.artvily.com/palette?sample=palette&amp;clip=AlphaChannelTex

请见: https://www.cnblogs.com/vilyLei/articles/9271698.html

模糊前:模糊后(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...