Question

我希望那里可能有一位GLSL大师可以帮助这个，我尝试使用三个单独的纹理将三个纹理混合在一起作为alpha通道（黑白图像），我希望它们在彼此之上堆叠，而不会增加下面一个的亮度，但我使用threejs和ShaderMaterial类。我可以成功地在每一层上绘制不透明图，但是当我试图将它们组合起来时，它们似乎很奇怪地相乘和混合（意味着图像变得更亮，每层涂在顶层）

我正在使用的纹理示例......

扩散：

Alpha地图（黑白）：

我的片段着色器就是这样......

            #ifdef GL_ES
            precision highp float;
            #endif

            uniform sampler2D tOne;
            uniform sampler2D tSec;
            uniform sampler2D tThi;

            uniform sampler2D aOne;
            uniform sampler2D aSec;
            uniform sampler2D aThi;

            varying vec2 vUv;


            void main(void)
            {
                vec3 c;
                vec3 d;
                vec3 e;
                vec3 f;

                vec3 m1;
                vec3 m2;

                vec4 Ca = texture2D(tOne, vUv);
                vec4 Cb = texture2D(tSec, vUv);
                vec4 Cc = texture2D(tThi, vUv);
                vec4 Aa = texture2D(aOne, vUv);
                vec4 Ab = texture2D(aSec, vUv);
                vec4 Ac = texture2D(aThi, vUv);

                c = (Ca.rgb * Aa.rgb)*1.0;
                d = (Cb.rgb * Ab.rgb)*1.0;
                e = (Cc.rgb * Ac.rgb)*1.0;

                f = (c.rgb + d.rgb + e.rgb * (1.0))*1.0;

                gl_FragColor= vec4(f, 1.0);

            }

如果我用......运行它。

gl_FragColor= vec4(c, 1.0);

结果：

或

gl_FragColor= vec4(d, 1.0);

结果：

或

gl_FragColor= vec4(e, 1.0);

结果：

我可以看到每个图层都有正确的不透明度和rgb值但正如我所说，我很难将它们组合在一起，以便它们保持正确的rgb值，它们似乎会倍增并在此刻变亮。

我已经在某处读到了默认情况下将blendmode指定为打开的情况。但是我不确定你会怎样关闭像threejs这样的东西。

当前结果：

期望的结果：

或许我的计算只需要修复层的组合

对此有何帮助将不胜感激？

谢谢你所有的时间！

-Rhys Thomas

工作！

MarGenDo - 您是明星 !!! ，你是对的，我不得不开始添加alpha的反转部分，以便它进入下一层。

按照你的建议继续使用它和改进的alphas！

纠正alphas：

虽然我确定我可以尝试使用着色器进行alpha合并，但你的逻辑绝对合理！

再次感谢 MarGenDo

再次工作

首先感谢MarGenDo和传奇的gman，对我来说效果最好的解决方案是gmans，因为我不能处理减去alphas等等，混合命令工作得很漂亮!!!此外，如果你想看到它的运作，请看看http://www.polygonprophecy.com/html5/Island - 最好在手机上观看，因为它允许你放大和缩小（捏和拳），也围绕岛旋转（两个手指旋转），它现在非常快速到使用良好的着色器编程（再次两个!!!），希望在坏手机上也能快速工作！ gman你的血腥明星!!

注意，这是我的最终结果着色器： -

        #ifdef GL_ES
        precision highp float;
        #endif

        uniform sampler2D tOne;
        uniform sampler2D tSec;
        uniform sampler2D tThi;

        uniform sampler2D aOne;
        uniform sampler2D aSec;
        uniform sampler2D aThi;

        varying vec2 vUv;


        void main(void)
        {
            vec4 Ca = texture2D(tOne, vUv);
            vec4 Cb = texture2D(tSec, vUv);
            vec4 Cc = texture2D(tThi, vUv);
            vec4 Aa = texture2D(aOne, vUv);
            vec4 Ab = texture2D(aSec, vUv);
            vec4 Ac = texture2D(aThi, vUv);
            vec4 g;

            g = vec4(0);

            g = mix(g, Ca, Aa);
            g = mix(g, Cb, Ab);
            g = mix(g, Cc, Ac);

            gl_FragColor= vec4(g.rgb, Aa.rgb+Ab.rgb+Ac.rgb);

        }

Answer 1

Well, your problem is in your alpha textures. You have to change them a bit. For example in the middle you are adding up color values of all three textures but you only want to see one of them (rock texture). Every alpha texture except the rock should be black in the middle.

This is an example how your sand alpha texture should look like.

(sorry for my ugly drawing but I hope you understand what I mean)

Answer 2

我认为这可能适用于原始的alpha纹理

implicit def myDateColumnType = MappedColumnType.base[LocalDate, Date](
  ld => new java.sql.Date(ld.toDateTimeAtStartOfDay(DateTimeZone.UTC).getMillis),
  d  => new LocalDateTime(d.getTime).toLocalDate
)

implicit def myTimeColumnType = MappedColumnType.base[LocalTime, Time](
  lt => new java.sql.Time(javaTimeFormatter.parse(lt.toString(localTimeFormatter)).getTime),
  t  => new LocalTime(t.getTime)
)

implicit def myTimestampColumnType = MappedColumnType.base[DateTime,  Timestamp](
  dt => new java.sql.Timestamp(dt.getMillis),
  ts => new DateTime(ts.getTime, DateTimeZone.UTC)
)

尝试出来

＆＃13;

            vec4 Ca = texture2D(tOne, vUv);
            vec4 Cb = texture2D(tSec, vUv);
            vec4 Cc = texture2D(tThi, vUv);
            vec4 Aa = texture2D(aOne, vUv);
            vec4 Ab = texture2D(aSec, vUv);
            vec4 Ac = texture2D(aThi, vUv);

            // This is the default color. 
            // The color when all the alphas are zero
            f = vec4(0);

            f = mix(f, Ca, Aa);
            f = mix(f, Cb, Ab);
            f = mix(f, Cc, Ac);

            gl_FragColor= vec4(f, 1.0);

＆＃13;

"use strict";
var gl = twgl.getWebGLContext(document.getElementById("c"));
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);

var arrays = {
  position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0],
};
var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);

var textures = twgl.createTextures(gl, {
  tOne: { src: "https://i.imgur.com/P5bZckC.jpg", crossOrigin: "", },
  tSec: { src: "https://i.imgur.com/2FI5CHY.jpg", crossOrigin: "", },
  tThi: { src: "https://i.imgur.com/YV0Wrxn.jpg", crossOrigin: "", },
  aOne: { src: "https://i.imgur.com/Kzk0cEx.jpg", crossOrigin: "", },
  aSec: { src: "https://i.imgur.com/weFi9dr.jpg", crossOrigin: "", },
  aThi: { src: "https://i.imgur.com/Ebkh1j1.jpg", crossOrigin: "", },
}, function() {
  
  var uniforms = {
    tOne: textures.tOne,
    tSec: textures.tSec,
    tThi: textures.tThi,
    aOne: textures.aOne,
    aSec: textures.aSec,
    aThi: textures.aThi,
  };

  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  twgl.setUniforms(programInfo, uniforms);
  twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);

});

＆＃13;

GLSL使用alpha分层纹理，没有乘法

工作！

2 个答案: