Results 1 to 7 of 7

Thread: Managing the transparency textures

  1. #1
    Junior Member
    Join Date
    Mar 2011
    Posts
    4

    Managing the transparency textures

    Hi,

    I've made a map creator for cs 1.6 and now i pass it to 3D with WEBGL, and i've a lot of problem with the transparency...

    The function :

    Code :
    gl.enable(gl.GL_ALPHA_TEST);
    gl.glAlphaFunc(gl.GREATER, 0.1);

    Is not supported so i've bug with my texture ...

    Please, how to resolve it ? i don't want to sort all my block for show :

    1 - all the block without transparency
    2 - transparency block from farest to closest

    Boring to code and i'm sure that it will be slowest :/

    if you want to see the map creator (with this bug for now) :
    http://www.worldcraft-online.com/worldcraft4.php?l=fr

  2. #2
    Junior Member
    Join Date
    Mar 2011
    Posts
    4

    Re: Managing the transparency textures

    Oups i give you the french version, and i can't modify the post so here is the english one :

    http://www.worldcraft-online.com/worldcraft4.php?l=uk

    Your comments are appreciated

  3. #3
    Senior Member
    Join Date
    May 2010
    Location
    Toronto, Canada
    Posts
    845

    Re: Managing the transparency textures

    Wrong forum?
    Disclaimer: Employee of Qualcomm Canada. Any opinions expressed here are personal and do not necessarily reflect the views of my employer. LinkedIn profile.

  4. #4
    Senior Member
    Join Date
    May 2010
    Posts
    207

    Re: Managing the transparency textures

    No - this is the right forum.

    In WebGL (and in OpenGL-ES 2.0 - on which WebGL is based), there is no support for the entire "AlphaTest" mechanism.

    You don't need it because you can do it in your fragment shader. So instead of saying:

    gl.alphaTest ( gl.GREATER, 0.5 ) ;

    (or whatever) - instead, you write into your fragment shader:

    if ( output.a < 0.5 ) discard ;
    gl_FragColor = output ;

    ...which achieves the right effect - if the alpha of the output is less than 0.5 then throw the pixel away without rendering it.

    -- Steve

  5. #5
    Junior Member
    Join Date
    Mar 2011
    Posts
    4

    Re: Managing the transparency textures

    Thank for the admin, he move the topic...


    It look simple for you SteveBaker, but i don't know where i put this 2 lines of code :/

    Here is my 2 shaders taken from : http://learningwebgl.com/lessons/lesson10/

    Code :
    <script id="shader-fs" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision highp float;
        #endif
     
        varying vec2 vTextureCoord;
     
        uniform sampler2D uSampler;
     
        void main(void) {
     
            gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
     
        }
    </script>

    Code :
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;
        attribute vec2 aTextureCoord;
     
        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;
     
        varying vec2 vTextureCoord;
     
        void main(void) {
            gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
            vTextureCoord = aTextureCoord;
        }
    </script>

    It's the only piece of code where i found a "FragColor"

    Thank you in advance, in the last problem on my script ...

  6. #6
    Senior Member
    Join Date
    May 2010
    Posts
    207

    Re: Managing the transparency textures

    So this is your Fragment Shader:
    Code :
        varying vec2 vTextureCoord;
        uniform sampler2D uSampler;
        void main(void) {
            gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
        }
    The line that begins "gl_FragColor" writes the final pixel color to the screen. The texture2D function looks up the texture and returns the RGBA color. You need to check the Alpha value before writing it to the screen...so:
    Code :
        varying vec2 vTextureCoord;
        uniform sampler2D uSampler;
        void main(void)
        {
            vec4 color = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)) ;
            if ( color.a < 0.1 ) discard ;
            gl_FragColor = color ;
        }
    The first line of 'main' looks up the texture color.
    The second line tests the alpha part of the color and discard's the pixel if it's sufficiently transparent. The "discard" command in GLSL is like calling "exit(0)" in a C++ program - it aborts the shader without writing any pixel data.
    The third line writes the pixel to the screen.

    Incidentally, your texture lookup code could be simpler. vTextureCoord is already a 'vec2' so you don't need a cast:
    Code :
     
          vec4 color = texture2D(uSampler, vTextureCoord);

  7. #7
    Junior Member
    Join Date
    Mar 2011
    Posts
    4

    Re: Managing the transparency textures

    Thank you, your help is amazing

    Now it's pretty good, i still have some problem but it's almost not important

    Thank again

Similar Threads

  1. Managing the transparency textures
    By GordonF_69 in forum OpenCL
    Replies: 2
    Last Post: 01-01-1970, 12:00 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •