怎么用2dshader写一个渐变色

之肖

如题，如何在3.3.8版本中，写一个2d渐变色的shader，官网的自定义shader部分看的不是很明白，有没有更详细的教程

LayaAir(机器人)

2D 自定义渐变 shader 的思路是利用 UV 坐标在片元着色器里 mix 两个颜色。下面给一个完整的做法。

第一步：创建 .shader 文件

在 IDE 的 assets 目录下新建一个 gradient2d.shader，内容如下：

Shader3D Start
{
    type: Shader3D,
    name: Gradient2D,
    shaderType: D2_TextureSV,
    attributeMap: {
        a_posuv: [0, Vector4],
        a_attribColor: [1, Vector4],
        a_attribFlags: [2, Vector4],
        a_customs: [3, Vector4]
    },
    uniformMap: {
        u_startColor: { type: Color, default: [1, 0, 0, 1] },
        u_endColor: { type: Color, default: [0, 0, 1, 1] },
        u_angle: { type: Float, default: 0 }
    },
    shaderPass: [
        {
            VS: gradientVS,
            FS: gradientFS
        }
    ]
}
Shader3D End

GLSL Start
#defineGLSL gradientVS
    #define SHADER_NAME GradientVS
    #include "Sprite2DVertex.glsl";
    void main() {
        vertexInfo info;
        getVertexInfo(info);
        v_texcoordAlpha = info.texcoordAlpha;
        v_color = info.color;
        v_useTex = info.useTex;
        v_useClip = info.useClip;
        v_customs = info.customs;
        gl_Position = getPosition(info.pos);
    }
#endGLSL

#defineGLSL gradientFS
    #define SHADER_NAME GradientFS
    #if defined(GL_FRAGMENT_PRECISION_HIGH)
    precision highp float;
    #else
    precision mediump float;
    #endif
    #include "Sprite2DFrag.glsl";

    uniform vec4 u_startColor;
    uniform vec4 u_endColor;
    uniform float u_angle;

    void main() {
        clip();
        vec4 texColor = getSpriteTextureColor();

        float rad = u_angle * 3.14159265 / 180.0;
        vec2 dir = vec2(cos(rad), sin(rad));
        float t = clamp(dot(v_texcoordAlpha.xy, dir), 0.0, 1.0);
        vec4 gradColor = mix(u_startColor, u_endColor, t);

        texColor *= gradColor;
        setglColor(texColor);
    }
#endGLSL
GLSL End

关键点：shaderType: D2_TextureSV 表示这是给 Sprite/Graphics 用的 2D shader，顶点格式和内置 Sprite2DTexture 一致。v_texcoordAlpha.xy 就是 UV 坐标，用来做渐变插值。u_angle 控制渐变方向（0 = 左→右，90 = 上→下）。

第二步：使用

在 IDE 中基于这个 shader 创建一个 .lmat 材质文件，调整 startColor / endColor / angle 参数。然后在代码里：

// 加载 shader 和图片
let sp = new Laya.Sprite();
sp.loadImage("res/your-image.png");
Laya.stage.addChild(sp);

Laya.loader.load("res/gradient2d.shader").then(() => {
    let mat = new Laya.Material();
    mat.setShaderName("Gradient2D");
    sp.graphics.material = mat;
    sp.graphics.useSpriteState = false;
});

也可以直接在 IDE 属性面板里把材质拖给 Sprite 的 material 字段，不用写代码。

如果不需要图片纹理、只要纯色渐变填充一个矩形，可以先 sp.graphics.drawRect(0, 0, width, height, "#ffffff") 画一个白色矩形，再挂这个材质，渐变色就会乘上去。

以上由AI自动回复，仅供参考。

之肖

LayaAir(机器人) 按照这个方法执行，在ide里面材质球的预览是对的，在网页运行，sprite只会显示白色，并没有显示成渐变色，这是怎么回事

之肖

发现填充一个白色矩形，渐变不会生效，必须要给一个图片纹理才能生效，怎样才能只要纯色渐变，不要图片纹理

LayaAir(机器人)

问题出在 setglColor 函数里。它内部有这段逻辑：

float useTex = step(1.0, v_useTex);
color = mix(vec4(1., 1., 1., 1.), color, useTex);

drawRect 没有纹理，v_useTex 为 0，所以不管你传什么颜色进去，都会被替换成白色。这就是渐变不生效的原因。

解决办法：片元着色器里不要用 setglColor，自己写输出。把 gradientFS 的 main 改成这样：

void main() {
    clip();

    float rad = u_angle * 3.14159265 / 180.0;
    vec2 dir = vec2(cos(rad), sin(rad));
    float t = clamp(dot(v_texcoordAlpha.xy, dir), 0.0, 1.0);
    vec4 gradColor = mix(u_startColor, u_endColor, t);

    // 有纹理就乘上纹理色，没纹理就直接用渐变色
    float useTex = step(1.0, v_useTex);
    vec4 texColor = getSpriteTextureColor();
    vec4 color = mix(gradColor, texColor * gradColor, useTex);

    color.a *= v_color.w;
    color.rgb *= v_color.rgb;
    gl_FragColor = color;
}

这样 drawRect 白色矩形 + 这个材质就能直接显示纯色渐变了。

以上由AI自动回复，仅供参考。

LayaAir大为

sprite2dtextureshader1.zip

1kB

您可以使用这个文件，AI写的那个着色器有些问题

之肖

LayaAir大为大佬目前有两个问题

之肖

LayaAir大为第一个问题是精灵还是需要赋值纹理才能显示渐变，第二个是渐变颜色编辑器模式和运行模式不一致，目前看编辑器颜色是对的
这个是编辑模式下的颜色
这个是运行模式下的颜色

LayaAir大为

之肖我再看一下

LayaAir(机器人)

两个问题分别说：

1. 纯色渐变不需要纹理的问题

和之前 #5 楼说的一样，不要调 setglColor，自己写 gl_FragColor 输出。setglColor 内部在没有纹理时会把颜色强制设为白色。你在片元着色器里直接根据 v_useTex 判断即可：有纹理就乘纹理色，没纹理就直接用渐变色。

2. 编辑器和运行时颜色不一致

这是色彩空间的问题。引擎在 2D 渲染时会根据渲染目标决定是否使用线性空间（GAMMASPACE 宏）。你的 uniform 颜色值是 sRGB/Gamma 空间的，但在线性空间渲染时直接使用就会偏暗——就是你截图里那种红变暗红、蓝变紫的效果。

在片元着色器里对 uniform 颜色做一下色彩空间转换就行了：

vec4 startColor = u_startColor;
vec4 endColor = u_endColor;
#ifndef GAMMASPACE
    startColor = gammaToLinear(startColor);
    endColor = gammaToLinear(endColor);
#endif
vec4 gradColor = mix(startColor, endColor, t);

gammaToLinear 函数在 Sprite2DFrag.glsl 里已经定义了，include 之后直接用。这样编辑器预览和运行时的颜色就一致了。

以上由AI自动回复，仅供参考。

LayaAir大为

试了一下，设置一个白色的纹理应该是最简单的方法，别的方法效果都不理想，如果没有特殊需求的话您就设置一个白色纹理吧
另一个您说的效果不一致的问题我这里没有复现

1355578854

LayaAir大为有一说一，我觉得有点过度封装了，自定义还是不太方便

shiyang

1355578854 you can you up,no can no bb

LayaAir(机器人)

确实 2D shader 这块 setglColor 的封装在纯色渐变场景下不太友好——没纹理时强制输出白色（color = color * useTex + (1.0 - useTex)），导致必须挂个纹理才能看到效果。

不过不用白色纹理也能绕过，片元着色器里不调 setglColor，自己写 gl_FragColor 就行：

void main() {
    clip();
    float rad = u_angle * 3.14159265 / 180.0;
    vec2 dir = vec2(cos(rad), sin(rad));
    float t = clamp(dot(v_texcoordAlpha.xy, dir), 0.0, 1.0);

    vec4 startColor = u_startColor;
    vec4 endColor = u_endColor;
    #ifndef GAMMASPACE
        startColor = gammaToLinear(startColor);
        endColor = gammaToLinear(endColor);
    #endif

    vec4 gradColor = mix(startColor, endColor, t);

    // 有纹理就乘纹理色，没纹理直接用渐变色
    float useTex = step(1.0, v_useTex);
    vec4 texColor = getSpriteTextureColor();
    vec4 color = mix(gradColor, texColor * gradColor, useTex);

    color.a *= v_color.w;
    vec4 transColor = v_color;
    #ifndef GAMMASPACE
        transColor = gammaToLinear(v_color);
    #endif
    color.rgb *= transColor.rgb;
    gl_FragColor = color;
}

这样 drawRect 白色矩形直接挂材质就能出渐变，不需要额外准备纹理图片。色彩空间转换也处理了，编辑器和运行时颜色应该一致。

以上由AI自动回复，仅供参考。

1355578854

shiyang 快写个给他看看，

shiyang

1355578854 太简单了，不写