Question

我有一个使用着色器的麻烦，我正在使用three.js进行一些测试。

当我将它应用于平面几何体时，它具有黑色背景。

好的，所以我知道如果我在我的代码中添加“transparent：true”，黑色背景就应该这样，但是我留下了实际的星也略微透明。

我已尝试过所有尝试使星星不透明但背景透明但无济于事。

用于将着色器添加到平面几何体的代码是。

uniforms = {
            resolution: { type: "v2", value: new THREE.Vector2(1.0,1.0) },
            baseStarTexture: { type: "t", value: THREE.ImageUtils.loadTexture('images/tex06.jpg') },
            overlayStarTexture : {type: "t", value: THREE.ImageUtils.loadTexture('images/tex07.jpg') },
            time:         { type: "f", value: 0.5 }
        };

        uniforms.baseStarTexture.value.wrapS = uniforms.baseStarTexture.value.wrapT = THREE.RepeatWrapping;
        uniforms.overlayStarTexture.value.wrapS = uniforms.overlayStarTexture.value.wrapT = THREE.RepeatWrapping;

        var itemMaterial = new THREE.ShaderMaterial({
            attributes: attributes,
            uniforms: uniforms,
            vertexShader: vertShader,
            fragmentShader: fragShader,
            blending: THREE.AdditiveBlending,
            transparent: true,
            depthTest: true,
            depthWrite: false

        });

        var sphere = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), itemMaterial);

片段着色器如下：

        uniform float noiseScale;
    uniform sampler2D overlayStarTexture;
    uniform sampler2D baseStarTexture;
    uniform float baseSpeed;
    uniform float alpha;
    uniform float time;
    varying vec2 vUv;
    varying vec3 vNormal;
    uniform vec2 resolution;

    float snoise(vec3 uv, float res)    // by trisomie21
    {
        const vec3 s = vec3(1e0, 1e2, 1e4);

        uv *= res;

        vec3 uv0 = floor(mod(uv, res))*s;
        vec3 uv1 = floor(mod(uv+vec3(1.), res))*s;

        vec3 f = fract(uv); f = f*f*(3.0-2.0*f);

        vec4 v = vec4(uv0.x+uv0.y+uv0.z, uv1.x+uv0.y+uv0.z,
                      uv0.x+uv1.y+uv0.z, uv1.x+uv1.y+uv0.z);

        vec4 r = fract(sin(v*1e-3)*1e5);
        float r0 = mix(mix(r.x, r.y, f.x), mix(r.z, r.w, f.x), f.y);

        r = fract(sin((v + uv1.z - uv0.z)*1e-3)*1e5);
        float r1 = mix(mix(r.x, r.y, f.x), mix(r.z, r.w, f.x), f.y);

        return mix(r0, r1, f.z)*2.-1.;
    }

    float freqs[4];

    void main(void) {

        freqs[0] = texture2D( overlayStarTexture, vec2( 0.01, 0.25 ) ).x;
        freqs[1] = texture2D( overlayStarTexture, vec2( 0.07, 0.25 ) ).x;
        freqs[2] = texture2D( overlayStarTexture, vec2( 0.15, 0.25 ) ).x;
        freqs[3] = texture2D( overlayStarTexture, vec2( 0.30, 0.25 ) ).x;

        float brightness    = freqs[1] * 0.25 + freqs[2] * 0.25;
        float radius        = 0.24 + brightness * 0.2;
        float invRadius     = 1.0/radius;

        vec3 orange         = vec3( 0.8, 0.65, 0.3 );
        vec3 orangeRed      = vec3( 0.8, 0.35, 0.1 );
        float time          = time * 0.1;
        float aspect        = resolution.x/resolution.y; //This need to be viewport res x/y
        vec2 uv             = vUv/resolution.xy;
        vec2 p              = -0.5 + uv;
        p.x *= aspect;

        float fade      = pow( length( 2.0 * p ), 0.5 );
        float fVal1     = 1.0 - fade;
        float fVal2     = 1.0 - fade;

        float angle     = atan( p.x, p.y )/3.2832;
        float dist      = length(p);
        vec3 coord      = vec3( angle, dist, time * 0.1 );

        float newTime1  = abs( snoise( coord + vec3( 0.0, -time * ( 0.35 + brightness * 0.001 ), time * 0.015 ), 15.0 ) );
        float newTime2  = abs( snoise( coord + vec3( 0.0, -time * ( 0.15 + brightness * 0.001 ), time * 0.015 ), 45.0 ) );
        for( int i=1; i<=5; i++ ){
            float power = pow( 2.8, float(i + 1) );
            fVal1 += ( 0.5 / power ) * snoise( coord + vec3( 0.0, -time, time * 0.2 ), ( power * ( 10.0 ) * ( newTime1 + 1.0 ) ) );
            fVal2 += ( 0.5 / power ) * snoise( coord + vec3( 0.0, -time, time * 0.2 ), ( power * ( 25.0 ) * ( newTime2 + 1.0 ) ) );
        }

        float corona        = pow( fVal1 * max( 1.1 - fade, 0.0 ), 2.0 ) * 50.0;
        corona              += pow( fVal2 * max( 1.1 - fade, 0.0 ), 2.0 ) * 25.0;
        corona              *= 1.5 - newTime1;
        vec3 starSphere     = vec3( 0.0 );

        vec2 sp = -1.0 + 2.0 * uv;
        sp.x *= aspect;
        sp *= ( 2.0 - brightness );
        float r = dot(sp,sp);
        float f = (1.0-sqrt(abs(1.0-r)))/(r) + brightness * 0.5;
        if( dist < radius ){
            corona          *= pow( dist * invRadius, 24.0);
            vec2 newUv;
            newUv.x = sp.x*f;
            newUv.y = sp.y*f;
            newUv += vec2( time, 0.0 );

            vec3 texSample  = texture2D( baseStarTexture, newUv ).rgb;
            float uOff      = ( texSample.g * brightness * 4.5 + time * 25.0 ); //This alters the speed of the star surface
            vec2 starUV     = newUv + vec2( uOff, 0.0);
            starSphere      = texture2D( baseStarTexture, starUV ).rgb;
        }

        float starGlow  = min( max( 7.8 - dist * ( 25.0 - brightness ), 0.0 ), 0.5 );
        gl_FragColor.rgb    = vec3( f * ( 0.75 + brightness * 0.3 ) * orange ) + starSphere + corona * orange + starGlow * orangeRed;
        gl_FragColor.a      = 1.0;
    }

顶点着色器是：

    varying vec2 vUv;
varying vec3 vNormal;
attribute float displacement;
void main() {
    vUv = uv;
    vNormal = normal;

    gl_Position = projectionMatrix *
                  modelViewMatrix *
                  vec4(position,1.0);
}

此外，如果我从“THREE.AdditiveBlending”更改混合，它只会让飞机再次显示，这就是为什么它的设置。

但如果我是个傻瓜，请告诉我！

非常感谢任何帮助。

由于

罗素。

背景透明度three.js shaderMaterial

0 个答案: