[]描边Shader,使用了两个Pass

看LayaAir2.0的文档说是支持了Shader的多pass渲染,写出个小示例,仅供参考,示例工程请参阅附件

截图如下:

QQ截图20180925185004.png


QQ截图20180925185016.png

 
核心代码如下
export default class OutlineMaterial extends Laya.BaseMaterial {
constructor() {
super()

var attributeMap = {
'a_Position': Laya.VertexMesh.MESH_POSITION0,
'a_Normal': Laya.VertexMesh.MESH_NORMAL0,
'a_Texcoord': Laya.VertexMesh.MESH_TEXTURECOORDINATE0,
}
var uniformMap = {
'u_MvpMatrix': [Laya.Sprite3D.MVPMATRIX, Laya.Shader3D.PERIOD_SPRITE],
'u_WorldMat': [Laya.Sprite3D.WORLDMATRIX, Laya.Shader3D.PERIOD_SPRITE],
'u_Texture': [OutlineMaterial.DIFFUSETEXTURE, Laya.Shader3D.PERIOD_MATERIAL]
}

var outlineShader = Laya.Shader3D.add("OutlineShader", attributeMap, uniformMap);

var outline_vs = `
attribute vec4 a_Position;
uniform mat4 u_MvpMatrix;
uniform mat4 u_WorldMat;
attribute vec3 a_Normal;
varying vec3 v_Normal;
void main()
{
gl_Position = u_MvpMatrix * a_Position;
mat3 worldMat = mat3(u_WorldMat);
v_Normal = worldMat * a_Normal;
gl_Position.xy += v_Normal.xy * 0.04;
}`
var outline_ps = `
#ifdef FSHIGHPRECISION
precision highp float;
#else
precision mediump float;
#endif
varying vec3 v_Normal;
void main()
{
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}`

var base_vs = `
attribute vec4 a_Position;
attribute vec2 a_Texcoord;
attribute vec3 a_Normal;

varying vec2 v_Texcoord;
varying vec3 v_Normal;

uniform mat4 u_MvpMatrix;
uniform mat4 u_WorldMat;

void main()
{
mat3 worldMat = mat3(u_WorldMat);
v_Normal = worldMat * a_Normal;
v_Texcoord=a_Texcoord;
gl_Position = u_MvpMatrix * a_Position;
}`

var base_ps = `
#ifdef FSHIGHPRECISION
precision highp float;
#else
precision mediump float;
#endif
varying vec3 v_Normal;
varying vec2 v_Texcoord;

uniform sampler2D u_Texture;

void main()
{
gl_FragColor = texture2D(u_Texture, v_Texcoord);
}`

outlineShader.addShaderPass(outline_vs, outline_ps)
outlineShader.addShaderPass(base_vs, base_ps)

this.setShaderName("OutlineShader")

this.getRenderState(0).cull = 1
}

set diffuseTexture (value) {
this._shaderValues.setTexture(OutlineMaterial.DIFFUSETEXTURE, value)
}
}

 
已邀请:

 

赞同来自:

感谢分享

AILHC

赞同来自:

请问你这个是Laya2.0????

Six.Sir

赞同来自:

感谢分享,保存先

小庆

赞同来自:

升级到2.1.0后,处理了一下兼容的问题,第二个pass效果不对了,不知道可以不可以麻烦帮忙看看。

王淼淼

赞同来自:

请问getRenderState() 这个函数在哪里可以查到?
感觉这官网上的资料也太少了……

 

 

Diavlog

赞同来自:

2.1.0的版本问题解决了?这个shader修复好了吗?

阳光宅男

赞同来自:

带骨骼会动的 这样写是不行的。的转到摄像头空间 法线xy放大点才行

要回复问题请先

商务合作
商务合作