[LayaAir 2.0]继承自Laya.BaseMaterial并且自定义Shader的的自定义材质如何设置透明渲染

我自定义了一个继承自Laya.BaseMaterial的材质。想要设置为透明渲染,但文档和教程搜索无果,想请教如何做才能实现。
export default class CMat extends Laya.BaseMaterial {   


public static _mainTex : number;
public static _mainCol : number;
inited : boolean = false;

constructor() {
super();
if(!this.inited)
{
CMat._mainTex = Laya.Shader3D.propertyNameToID("u_MainTex");
CMat._mainCol = Laya.Shader3D.propertyNameToID("u_MainCol");
CMat.initShader();

this.inited = true;
}
this.setShaderName("CMatShader");
}

public SetMainTex(value)
{
this._shaderValues.setTexture(CMat._mainTex, value);
}

public SetMainCol(value)
{
this._shaderValues.setVector3(CMat._mainCol, value);
}
/**
* 设置渲染相关状态。
*/


private static initShader(): void {
var attributeMap:Object = {
'a_Position': Laya.VertexMesh.MESH_POSITION0,
'a_Normal': Laya.VertexMesh.MESH_NORMAL0,
'a_Texcood0': Laya.VertexMesh.MESH_TEXTURECOORDINATE0
};
var uniformMap:Object = {
'u_MvpMatrix': Laya.Shader3D.PERIOD_SPRITE,
'u_WorldMat': Laya.Shader3D.PERIOD_SPRITE,
'u_MainTex': Laya.Shader3D.PERIOD_MATERIAL,
'u_MainCol': Laya.Shader3D.PERIOD_MATERIAL
};
var vs:string = `
#include "Lighting.glsl";
attribute vec4 a_Position;
attribute vec3 a_Normal;
attribute vec2 a_Texcood0;

uniform mat4 u_MvpMatrix;
uniform mat4 u_WorldMat;

varying vec3 v_Normal;
varying vec2 uv;
varying vec4 worldPos;

void main()
{
gl_Position = u_MvpMatrix * a_Position;
mat3 worldMat = mat3(u_WorldMat);
v_Normal = worldMat * a_Normal;
worldPos = u_WorldMat * a_Position;
uv = a_Texcood0;
gl_Position = remapGLPositionZ(gl_Position);
}`;
var ps:string = `
#ifdef FSHIGHPRECISION
precision highp float;
#else
precision mediump float;
#endif

uniform sampler2D u_MainTex;
uniform vec3 u_MainCol;

varying vec3 v_Normal;
varying vec2 uv;
varying vec4 worldPos;

void main()
{
vec4 col = texture2D(u_MainTex, uv);
//gl_FragColor = vec4(worldPos.xyz, 1.0);
float d = distance(worldPos.xyz, vec3(.0, .0, .0)) * 0.15;
col.xyz *= d;
col.xyz *= u_MainCol;
col.a = 0.5;
gl_FragColor = col;
}`;

var customShader:Laya.Shader3D = Laya.Shader3D.add("CMatShader");
var subShader:Laya.SubShader = new Laya.SubShader(attributeMap, uniformMap);
customShader.addSubShader(subShader);
subShader.addShaderPass(vs, ps);
}

}
已邀请:

赞同来自: March

我也发现这个问题了,在BaseMaterial构造函数里会把renderQueue的值设置成RENDERQUEUE_OPAQUE(不透明),但是我在自定义材质里也修改了
this.renderQueue = BaseMaterial.RENDERQUEUE_TRANSPARENT;
this.alphaTest = false;
仍然没有透明效果,但是参考Laya自己的材质是可以的,可能需要更加深入的研究一下源码
问题原因已找到,在设置pass的时候要添加state
let stateMap = {
's_Cull': Shader3D.RENDER_STATE_CULL,
's_Blend': Shader3D.RENDER_STATE_BLEND,
's_BlendSrc': Shader3D.RENDER_STATE_BLEND_SRC,
's_BlendDst': Shader3D.RENDER_STATE_BLEND_DST,
's_DepthTest': Shader3D.RENDER_STATE_DEPTH_TEST,
's_DepthWrite': Shader3D.RENDER_STATE_DEPTH_WRITE
};
var pass1: ShaderPass = subShader.addShaderPass(vs1, ps1, stateMap);
然后在构造函数里分别设置这些值(参考BlinnPhongMaterial设置renderModle的函数
this.renderQueue = BaseMaterial.RENDERQUEUE_TRANSPARENT;
this.alphaTest = false;
this._shaderValues.setBool(OutlineMaterial.DEPTH_WRITE, false);
this._shaderValues.setInt(OutlineMaterial.CULL, RenderState.CULL_BACK);
this._shaderValues.setInt(OutlineMaterial.BLEND, RenderState.BLEND_ENABLE_ALL);
this._shaderValues.setInt(OutlineMaterial.BLEND_SRC, RenderState.BLENDPARAM_SRC_ALPHA);
this._shaderValues.setInt(OutlineMaterial.BLEND_DST, RenderState.BLENDPARAM_ONE_MINUS_SRC_ALPHA);
this._shaderValues.setInt(OutlineMaterial.DEPTH_TEST, RenderState.DEPTHTEST_LESS);
这样就可以透明渲染了

133*****047

赞同来自:

兄弟,问题解决了吗

要回复问题请先

商务合作
商务合作