Laya Shader3D之边缘光照

Laya 3DShader （边缘光照使用）

前言
自己提升，学习，接触到图形学、shader，希望研究一下，进一步提升自己。
这边会持续学习shader相关方向，由于使用的引擎是Laya，所以……这边就用Laya引擎研究、学习了。

   今后会学习研究下面的点：1、3Dshader效果2 、2Dshader效果3、后期处理效果4、实例化渲染应用5、……其他的这个账号会持续更新。上面都是官方文档有得，[2] 好像不多，得自己研究哈……所以说道路还是非常长滴。//以后应该会弄一个可以直接用得 效果包。

先就弄一下，官网得例子开始。得先弄明确的，把踩坑得记录一下

边缘光照效果   边缘光照效果，官网的例子。原理：相机到物体顶点的向量，与 顶点的法向量作用。通过 两个向量 的点乘，获得夹角的cos值，用这个cos值，来判断物体需要的亮度。后面就是根据这个cos值，对物体亮度进行调整了。

实际操作：
官网参考边缘光照

准备工作：
需要创建文件
shader.ts      shader.fs     shader.vs     mat.ts
//--------------------------------------------------------------------
shader.ts  用来设置shader相关 把shader加入
shader.fs  片元着色器
shader.vs 顶点着色器
mat.ts 材质，引用相关shader2、下面我会命名
shader.ts   ----->    ShaderBoderLighting.ts
shader.fs   ----->    BorderLighting.fs
shader.vs   ----->    BorderLighting.vs
mat.ts      ----->    MatBorderLighting.ts
//(命名不是非要这也，这我测试乱写的类名，就需要这四个就ok)3、目录结构
建议四个文件全部放在一个目录下。
我的目录结构
shaderShaderBoderLighting.tsBorderLighting.vsBorderLighting.fsMatBorderLighting.ts
//vs fs 要放在  SahderBoderLighting下才能够生效  自己测试得时候确实是这个情况。

ShaderBoderLighting.ts

import vs from "./BorderLighting.vs";
import fs from "./BorderLighting.fs";export default class ShaderBoderLighting {initShader(): void {//所有的attributeMap属性var attributeMap = {'a_Position': Laya.VertexMesh.MESH_POSITION0,'a_Normal': Laya.VertexMesh.MESH_NORMAL0,'a_Texcoord': Laya.VertexMesh.MESH_TEXTURECOORDINATE0,'a_BoneWeights': Laya.VertexMesh.MESH_BLENDWEIGHT0,'a_BoneIndices': Laya.VertexMesh.MESH_BLENDINDICES0};//所有的uniform属性var uniformMap = {'u_Bones': Laya.Shader3D.PERIOD_CUSTOM,//绑定'u_CameraPos': Laya.Shader3D.PERIOD_CAMERA,'u_MvpMatrix': Laya.Shader3D.PERIOD_SPRITE,'u_WorldMat': Laya.Shader3D.PERIOD_SPRITE,//贴图'u_boderLightingAlbedoTexture': Laya.Shader3D.PERIOD_MATERIAL,//边缘光照强度'u_boderLightingIntensity': Laya.Shader3D.PERIOD_MATERIAL,//边缘光照颜色'u_boderLightingColor': Laya.Shader3D.PERIOD_MATERIAL,};//加入自定义shadervar customShader = Laya.Shader3D.add("ShaderBoderLighting");var subShader = new Laya.SubShader(attributeMap, uniformMap);//把这个    shader的一个子着色器      加入自定义shader //注：一个customShader可以加入很多个 subShader自着色器，他们会按加入的顺序  用 下标来取用。customShader.addSubShader(subShader);//为自着色器加入 着色代码subShader.addShaderPass(vs, fs);}
}自己悟的，可能名词，专有名词不适太专业……/// 注：需要，改变材质，马上生效的，例如下面这个：//边缘光照颜色'u_boderLightingColor': Laya.Shader3D.PERIOD_MATERIAL,就要对应使用  Laya.Shader3D.PERIOD_MATERIAL  逐材质，要不然你改了材质，不会有变化///同一个目录下导入就行。 import vs from "./BorderLighting.vs";import fs from "./BorderLighting.fs";

2、材质编辑

export default class MatBorderLighting extends Laya.Material {//获取  u_boderLightingColor  的IDprivate BODER_LIGHTING_COLOR = Laya.Shader3D.propertyNameToID("u_boderLightingColor");//获取  u_boderLightingIntensity  的IDprivate BODER_LIGHTING_INTENSITY=Laya.Shader3D.propertyNameToID("u_boderLightingIntensity");//获取  u_boderLightingAlbedoTexture 的IDprivate ALBEDOTEXTURE = Laya.Shader3D.propertyNameToID("u_boderLightingAlbedoTexture");private _color: Laya.Vector3;private _texutrue: Laya.BaseTexture;private _boderLightIntensity: number = 1;constructor() {super();//初始直接设置这个材质使用的shader  ，  //与 上一个shader类文件中addShader里面的字符串一样//靠这个字符串索引  shader属于是this.setShaderName("ShaderBoderLighting");}/**设置边缘发光颜色 */set boderLightColor(vec3: Laya.Vector3) {this._color = vec3;//使用shaderValue 利用 上面得ID，对 shader需要得值  进行赋值//意思就是 this.BODER_LIGHTING_COLOR  使用 vec3//下面同样我就不写了//shaderValues是靠 类型(vec3) 和ID(number) 来获取设置的。this._shaderValues.setVector3(this.BODER_LIGHTING_COLOR, vec3);}/**设置边缘发光强度 0-1*/set boderLightIntensity(val: number) {this._boderLightIntensity = val;this._shaderValues.setNumber(this.BODER_LIGHTING_INTENSITY, val);}/**设置贴图*/set albedoTexture(val: Laya.BaseTexture) {this._texutrue = val;this._shaderValues.setTexture(this.ALBEDOTEXTURE, val);}get boderLightColor(): Laya.Vector3 {return this._shaderValues.getVector3(this.BODER_LIGHTING_COLOR);}get boderLightIntensity(): number {return this._shaderValues.getNumber(this.BODER_LIGHTING_INTENSITY);}get albedoTexture() {return this._shaderValues.getTexture(this.ALBEDOTEXTURE);}//我自己需要的克隆……可以加可以不加clone(): MatBorderLighting {let mat: MatBorderLighting = new MatBorderLighting();mat.boderLightIntensity = this._boderLightIntensity;mat.albedoTexture = this._texutrue;mat.boderLightColor = this._color;mat.renderQueue = this.renderQueue;return mat;}
}//这个步骤没有什么坑爹得地方。

3、vs、fs

BorderLighting.vs#include "Lighting.glsl";
attribute vec4 a_Position;
attribute vec2 a_Texcoord;
attribute vec3 a_Normal;
uniform mat4 u_MvpMatrix;
uniform mat4 u_WorldMat;
varying vec2 v_Texcoord;
varying vec3 v_Normal;
//是否是  带骨骼 是就定义相关骨骼的顶点数据(skinmeshrender 需要这样处理)
#ifdef BONEattribute vec4 a_BoneIndices;attribute vec4 a_BoneWeights;const int c_MaxBoneCount = 24;//数量uniform mat4 u_Bones[c_MaxBoneCount];//骨骼
#endif
varying vec3 v_PositionWorld;
void main()
{//一样的判断是否是带有骨骼#ifdef BONEmat4 skinTransform=mat4(0.0);skinTransform += u_Bones[int(a_BoneIndices.x)] * a_BoneWeights.x;skinTransform += u_Bones[int(a_BoneIndices.y)] * a_BoneWeights.y;skinTransform += u_Bones[int(a_BoneIndices.z)] * a_BoneWeights.z;skinTransform += u_Bones[int(a_BoneIndices.w)] * a_BoneWeights.w;vec4 position = skinTransform * a_Position;gl_Position=u_MvpMatrix * position;mat3 worldMat=mat3(u_WorldMat * skinTransform);#else gl_Position=u_MvpMatrix * a_Position ;mat3 worldMat=mat3(u_WorldMat);#endif//用 varying变量 传 UV值到片元着色器v_Texcoord=a_Texcoord;//用 varying变量 传 法向量值到片元着色器v_Normal=worldMat*a_Normal;//获取世界坐标利用varying变量传入片元着色器#ifdef BONEv_PositionWorld=(u_WorldMat*position).xyz;#elsev_PositionWorld=(u_WorldMat*a_Position).xyz;#endifgl_Position=remapGLPositionZ(gl_Position);
}

BorderLighting.fs

#ifdef FSHIGHPRECISIONprecision highp float;
#elseprecision mediump float;
#endif
#include "Lighting.glsl";
varying vec2 v_Texcoord;
uniform sampler2D u_boderLightingAlbedoTexture;
uniform vec3 u_boderLightingColor;
varying vec3 v_Normal;uniform vec3 u_CameraPos;
varying vec3 v_PositionWorld;void main()
{vec3 normal=normalize(v_Normal);//计算眼睛到顶点的向量vec3 toEyeDir = normalize(u_CameraPos-v_PositionWorld);//计算 1-点乘float Rim = 1.0 - max(0.0,dot(toEyeDir, normal));//pow(Rim,3.0)*2.0;  这边就是边缘光照的范围vec3 Emissive =  u_boderLightingColor * pow(Rim,3.0)*2.0;  //赋值片元颜色gl_FragColor = texture2D(u_boderLightingAlbedoTexture, v_Texcoord) + vec4(Emissive,1.0);// gl_FragColor = vec4(normal,0);
}

写完了，就使用吧，使用代码如下：

 //找一个程序最开始的地方，把  自定义shader类  初始化new ShaderBoderLighting().initShader();//初始化之后可以让物体，使用我们创建的材质let mat = new MatBorderLighting();mat.boderLightColor =  borderColor;mat.boderLightIntensity =  boderInstenty;mat.albedoTexture = albedoTexture;this._render.sharedMaterial = mat;//改好了，付好了值就可以用了 。

我使用的代码：
普通模型替换材质成自定义mat

注意：这个效果顶点越多，效果越好，弧形越多，效果越好。顶点少了，弧度少了，就没啥效果了，例如一个正方体。
他的法向量，方向很单一，就做不出区分，所以，边缘光照效果就不会是想要的效果。

效果图：
无边缘光照

有红色的边缘光照

上面代码都亲测可用的。

如果有什么说得不对，或是有误得地方还请各位指出。

有问题可以留言问我。

以后会写更多效果。

Laya Shader3D之边缘光照相关推荐

4.边缘光照的描边shader
[思路]:面向摄像机的物体,它的表面法线[normal]和视角向量[viewDir]的[夹角]越靠近边缘就越大.那么就可以根据这个夹角进行处理,夹角越大,那么发射光越强,就可以实现我们想要的效果. S ...
ARM 在Unity3D 中的美术优化解决方案 5.光照
(注意:虽然我们选择了渐进 CPU 光照贴图,但我们鼓励你试用渐进 GPU 光照贴图并进行性能分析.根据系统 GPU 的不同,性能可能会有所差异.) Unity 引擎提供了三个生成光照贴图的选项 - ...
Arm和Unity联合推出：适用于移动应用程序的3D美术优化-[5]光照
目录 1.光照 - 概述 1.概述 2.关于渲染管线的说明 2.光照模式和类型 1.光照模式 2.烘焙光照 3.实时光照 4.混合光照 5.实时光源和光源类型 6.总结 3.静态对象的光照 1.概述 ...
Laya水波shader
先上主要代码: WaterMaterial.ts import Shader3D = Laya.Shader3D; import SubShader = Laya.SubShader; import ...
FXAA抗锯齿算法--Laya引擎
先看效果图 FXAA抗锯齿算法是通过后处理方式实现(所谓后处理就是把本帧内需要渲染的数据由GPU执行完渲染后再由相机把最终内容绘制成一张纹理在纹理的基础上进行二次渲染加工称为后处理. ) 优点: ...
Laya Air - 如何在Laya3D中实现屏幕后期特效?
前言最近由于项目的原因,不得不去学习了一下Laya这款游戏引擎,在学习使用过程中,我发现在Laya官方文档中关于对屏幕后期处理相关的介绍比较少,就只有官方提供了一个Bloom全屏泛光的后期特效. 而 ...
LayaShader3D 之波动的橡皮人
前面看了一个游戏,一个休闲小游戏一个橡皮人跑,身上的网格在不停的上下起伏,看起来就像一个水泡人一样. 今天想动手试验一下思路: 1.每个点需要自己的规律上下起伏. 2.上下起伏用正弦函数. 3.需 ...
LayaBox CommandBuffer描边使用详细
项目需要使用LayaBox做一个给3D物体动态描边的一个功能,前前后后踩了一些坑算是把这个东西给做出来了把我改好的代码贴上,分享给大家. (1)想要使用描边你的引擎版本必须 >=2.9.0 (2 ...
shader 4 杂一些和函数名词、数据结构
Normal: 法线 Normao mapping: 法线贴图 Lighting mapping: 光照贴图 Bump mapping: 凹凸贴图:模拟粗糙外表面的技术. FX-Water ...
Unity3D图形性能优化
图形性能优化图形开销在哪里游戏的图形显示部分主要消耗计算器的两个系统:GPU和CPU.任何优化的第一规则都是查明性能瓶颈在哪里,因为优化GPU和优化CPU的策略常常是不同的(甚至常常是相互对立的- ...

Laya Shader3D之边缘光照

Laya Shader3D之边缘光照相关推荐

最新文章

热门文章