Page 1 of 4 1234 LastLast
Results 1 to 10 of 36

Thread: Has anyone used a texture atlas and used it in Chrome?

  1. #1
    Junior Member
    Join Date
    Sep 2010
    Posts
    15

    Has anyone used a texture atlas and used it in Chrome?

    I created a texture atlas and in Chrome there is some white on the edges of the cubes. However in Firefox it displays just fine. When I use colors there are not white edges either in Chrome or Firefox so it appears to be strictly a texturing problem. The texture atlas is 64 x 64 pixels and there are 16 total textures within the texture atlas at a width of 16 each.

    Has anyone had a similar issue or know maybe why I am having this problem?

  2. #2

    Re: Has anyone used a texture atlas and used it in Chrome?

    Yes, I experienced the same problem, it seems to be related to the hardware platform you are using. When I tested it in another pc, the problem just disappeared.
    My platform with problems: AMD Phenom II x4 945, GTX460, Win7
    Fine platform: Intel Core2 E7500, 9500GT, WinXP

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

    Re: Has anyone used a texture atlas and used it in Chrome?

    Could one of you guys share a screenshot and a copy of the texture map & shader?

  4. #4

  5. #5

    Re: Has anyone used a texture atlas and used it in Chrome?

    The artifacts only appears on Chrome. In firefox it's fine on all platforms.

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

    Re: Has anyone used a texture atlas and used it in Chrome?

    How certain are you that your vertices are accurately snapped together - with no 'T-edges'? One common difference between Chrome and Firefox (on some hardware) is that Chrome will enable antialiasing when Firefox won't.

    If your vertices are not 100% perfectly shared - then you'll get teeny-tiny gaps (which we're seeing white background through) that are visible because the antialiasing is rendering the edges just perfectly...but without antialiasing, the gaps would show up less often (but be much more noticeable when they do show up).

    That's my best theory...but it's hard to guess from such little information.

    As a test, turn off antialiasing when you create your rendering context. If that makes Chrome and Firefox look the same - then I'm 99% sure I'm right. If it doesn't make a difference...then I need to have another think...so show us the texture AND the shader.

  7. #7
    Junior Member
    Join Date
    Sep 2010
    Posts
    15

    Re: Has anyone used a texture atlas and used it in Chrome?

    vertex shader:
    Code :
    attribute vec3 aVertexPosition;
    attribute vec3 aVertexNormal;
    attribute vec2 aTextureCoord;
    attribute float aInShade;
    attribute vec4 aVertexColor;
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;
    uniform mat4 uNMatrix;
    uniform vec3 uAmbientColor;
    uniform vec3 uLightingDirection;
    uniform vec3 uDirectionalColor;
    uniform bool uUseLighting;
    uniform bool uUseShadows;
    uniform bool uUseColor;
    varying vec2 vTextureCoord;
    varying vec3 vLightWeighting;
    varying vec4 vColor;
     
    vec3 halfLambertDiffuse(void) {
      vec4 transformedLightingDirection = uMVMatrix * vec4(uLightingDirection, 0.0);
      vec4 transformedNormal = uNMatrix * vec4(aVertexNormal, 1.0);
      float directionalLightWeighting = max(sqrt(0.5 * dot(transformedNormal.xyz, transformedLightingDirection.xyz) + 0.5), 0.0);
      //float directionalLightWeighting = max(dot(transformedNormal.xyz, transformedLightingDirection.xyz), 0.6);
      vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting;
      return vLightWeighting;
    }
     
    void main(void)
    {
      vec4 mvPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
      gl_Position = uPMatrix * mvPosition;
      if (!uUseColor) {
        vTextureCoord = aTextureCoord;
        if (!uUseLighting) {
          vLightWeighting = vec3(1.0, 1.0, 1.0);
        } else {
          //shading with shadows
          if (uUseShadows) {
            if (aInShade == 0.0) {
             vLightWeighting = halfLambertDiffuse();
            } else {
              vLightWeighting = uAmbientColor;
            }   
          } else { 
            //shading only
            vLightWeighting = halfLambertDiffuse();
          }
        }
      } else {
        vColor = aVertexColor;
        if (uUseLighting) {
          vLightWeighting = halfLambertDiffuse();
        }
      }
    }

    fragment shader:
    Code :
    #ifdef GL_ES
    precision highp float;
    #endif
    varying vec2 vTextureCoord;
    varying vec3 vLightWeighting;
    varying vec4 vColor;
    uniform sampler2D uSampler;
    uniform bool uUseColor;
    uniform bool uUseLighting;
    void main(void)
    {
      if (!uUseColor) {
        vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
        gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);
        //gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
      } else {
        if (!uUseLighting) {
          gl_FragColor = vColor;
        } else {
          gl_FragColor = vec4(vColor.rgb * vLightWeighting, vColor.a);
        }
      }
    }

    Everything in the game world is made of cubes. Notice the textured cubes have the white edges vs the colored cubes (the character) has no white edges.


  8. #8
    Junior Member
    Join Date
    Sep 2010
    Posts
    15

    Re: Has anyone used a texture atlas and used it in Chrome?

    Another angle:

  9. #9
    Junior Member
    Join Date
    Sep 2010
    Posts
    15

    Re: Has anyone used a texture atlas and used it in Chrome?

    texture:

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

    Re: Has anyone used a texture atlas and used it in Chrome?

    There is no bug in driver, browser or WebGL here. Your program is the problem. You're probably getting away with it on some systems because the results sensitively depend on roundoff error - and antialiassing is almost certainly what's making it more noticable. However, with the issues I describe below, you'll eventually see issues on any platform under some camera angles/lighting/whatever.

    There are a couple of issues here:

    1) If you draw two cubes bang up against each other (eg on the ground), the top row of pixels of front-facing vertical face of the further cube will potentialy have the exact same Z coordinate as the far edge of the upper face of the nearer cube...so they will "flimmer"/"Z-fight" at some camera angles. You can't make a voxel game just by drawing a bunch of cubes - you have to eliminate the faces of cubes that are butting up against other cubes.

    2) When you render a texture with LINEAR or MIPMAP_LINEAR modes, then adjacent texels will be linearly blended. Hence you can't use atlassed textures that are packed together tightly like that. You have to inset the area you use out of each sub-map by at least a few texels and color the "no-man's land" between the sub-maps in the same color as the adjacent sub-maps. So instead of using UV values like 0.0 to 0.25 for one map and 0.25 to 0.5 for the next - use 0.0+(inset/mapres) to 0.25-(inset/mapres) for one and 0.25+(inset/mapres) to 0.5-(inset/mapres) for the next...where 'inset' is 2.0 or so and 'mapres' is the resolution of your map in texels. If you're MIPmapping (which you don't seem to be doing in your screenshot - but you'll definitely need to do to avoid horrible moire & aliassing because you're using perspective) then there is no amount of "inset" that'll perfectly avoid the problem at lower MIP levels - so you'd also do well to avoid textures of violently differing colors being right next to each other in the atlas...try to keep similar colors together. If you have unused areas in the map...paint them a neutral color that's similar to the nearby maps.

    Because your foreground character seems to be working - I deduce that (2) is your main problem...but I predict that (1) will also come back to bite you. 3D graphics are quite intolerant of this kind of inattention to roundoff and precision issues.

    -- Steve

Page 1 of 4 1234 LastLast

Similar Threads

  1. Texture atlas for objects with shared vertexes.
    By unparagoned in forum OpenGL ES general technical discussions
    Replies: 3
    Last Post: 04-03-2009, 10:09 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
  •