webgl - Background transparency three.js shaderMaterial -

i having spot of bother shader using tests three.js.

when apply plane geometry has black background.

ok, know if add "transparent: true" code black background should go, does, left actual star being transparent.

i have tried try , make star not transparent background transparent no avail.

the code im using adding shader plane geometry is.

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); 

the fragment shader follows:

        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)    // 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 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 speed of 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;     } 

and vertex shader :

    varying vec2 vuv; varying vec3 vnormal; attribute float displacement; void main() {     vuv = uv;     vnormal = normal;      gl_position = projectionmatrix *                   modelviewmatrix *                   vec4(position,1.0); } 

also if change blending "three.additiveblending" makes plane show again why set on that.

but please let me know if i'm being fool!

any appreciated.

thanks

russell.