Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 36

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

  1. #11
    Senior Member
    Join Date
    May 2010
    Posts
    207

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

    Oh - and incidentally, using unnecessary "if" statements inside shaders is a really bad idea - especially on older hardware. Shaders are NOT general purpose CPU's and you can't treat GLSL like it was C or C++.

    On some older machines, both the 'then' and the 'else' part consume time, even if they aren't being executed!!! eg:

    if ( a )
    do_something () ;
    else
    do_something_else () ;

    ...executes at a speed that is equal to the time it would take to do BOTH "do_something" AND "do_something_else". Even modern machines will suffer this problem in pixel shaders under some rather common situations!!

    Hence, even when you have lighting and shadowing turned off - you're still paying the price for doing both. With your deeply-nested "if" statements, you're running every statement in the shader even if just one assignment was all that was needed!

    Since it looks like you're using uniform variables to switch various modes on and off - you'd be better to create different shaders for each combination of modes using #if/#else/#endif to keep your sanity! When you're rendering, consider sorting your objects according to the shader they need in order to minimize shader reloading.

    -- Steve

  2. #12
    Junior Member
    Join Date
    Sep 2010
    Posts
    15

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

    Wow thank you for the helpful advice. I have a lot to digest as I do this as a hobby and have been teaching myself WebGL/OpenGL for the past 6 months outside of work. There are some things regarding the textures I didn't understand but I want to do some Googling and be less tired before asking.

    I'll probably be posting some more questions tomorrow, after I get out of work, to make sure I understand. Thanks again. I really do owe you one.

  3. #13

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

    But my artifacts appears where is drawn in one draw batch and I don't even use a texture.

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

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

    OK guys - this is getting confusing!

    Firstly, I should explain that I have been doing 3D graphics since 1980. I've seen every kind of problem you could possibly imagine. So I'm not guessing when I'm telling you what's wrong!

    You two guys have totally different problems that just happen to look the same. They are both teeny-tiny roundoff kinds of problem that show up most clearly when antialiassing is enabled - which it typically is in Chrome and typically isn't in Firefox - and may be visible on some kinds of hardware and not others. In both cases you have made fairly elementary mistakes that I've seen 100 times before...but they appear to be different mistakes!

    Accusing Chrome is unfair...you'll both see these problems in Firefox too - but because of the antialiassing in Chrome, the statistical probability of a "crack" showing up is much greater - but the crack itself is much narrower. When Firefox shows the problem, it'll be MUCH bigger...but it's also less probable.

    To avoid further confusion - let me separate out my responses to each of you!

    @oak3d: The "drawn in one batch" thing doesn't matter a damn. The cause of the symptoms you are reporting are very different from those that xman84 is seeing - the panda/bear image almost certainly has cracks because the vertices aren't perfectly shared, even though it's only one draw call - and even if it's not textured. If you don't believe me (and to be fair, all I've got to go on is one screenshot!) try clearing the screen to some really bright color instead of white. If you clear the screen to green, do the "cracks" turn green? If they do then you must have fine cracks in your geometry that are letting the background color leak through - right? That's what I'm betting...but you should do the experiment. Do you know what a "T-edge" is? If not, I can explain that. I'm pretty certain that you either have T-edges or unshared vertices - or (much less likely) some other weird bad geometry issue.


    @xman84: Your texture atlas issues are at least a part of the problem - as I described before (although possibly not ALL of your problem). We know this for 100% certain because if you look at the 'cracks' on the building, some of them are red - and that's because you have red texture next to the grey/black "stone" texture. All of the cracks in the "grass" are white because the texture tile next to the green one is white. You never see red cracks in the grass because there is no red texture adjacent to the green one. Just to test my theory, look at the sky. There are white cracks on the left/right side of the map and green cracks at the top. Look at your texture atlas and guess what? You have grass next to one side of the blue patch and white on the other side. This isn't just a theory anymore...we have solid evidence! OpenGL/WebGL/Direct3D all do a trick where they blend the edges of adjacent texels together to avoid texture aliassing. At the very edges of your polygons, the texture UV coordinates are probably EXACTLY on the boundary between the grey/black stone and the bright red sub-map. So when WebGL blends in a little of the adjacent texel, you get some red mixed into the grey for a small fraction of the pixel. When you run in Firefox, the lack of polygon edge antialiassing is hiding this problem from you to some degree - but it WILL show up there under some circumstances...I guarantee it.

  5. #15
    Senior Member
    Join Date
    May 2010
    Posts
    207

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

    @oak3d: Your panda's body is a "volume of revolution" - right? I bet your code says something like:


    for ( a = 0 ; a < 360 ; a+=10 ) // Do a full circle in 10 degree steps
    {
    a0 = a * 3.14159 / 180.0 ; // Convert to radians
    x0 = sin ( a0 ) * radius ;
    y0 = cos ( a0 ) * radius ;
    a1 = (a+1) * 3.14159 / 180.0 ;
    x1 = sin ( a1 ) * radius ;
    y1 = cos ( a1 ) * radius ;
    // make a quad from x0,y0 to x1,y1...
    ...
    }

    If you did anything like that then you are assuming that the sine and cosine of 0*pi/180 are PRECISELY equal to those at 36*pi/180 - but they aren't because in floating point math, bigger numbers are stored less precisely than small ones - and those two angles are not precisely two-pi radians apart. Note that it doesn't matter whether you do this in amazingly high precision math - or even whether you typed pi in to enough decimal places...the nature of computers is that floating point numbers are never 100% precise.

    So if I'm right then it's no coincidence that the join between the first row of vertices and the last is where the crack shows up...and right down the center line of the panda is where it is! (That's my clue!)

    The fix (if my guess is right) is to change the calculation of 'a1':

    if ( a == 35 ) a1 = 0 * 3.14159/180.0 ; else a1 = (a+1)*3.14159/180.0 ;

    ...which ensures that the last column of vertices exactly lines up with the first.

    But better still, use an indexed rendering mode and make the index of the final row of triangles re-use the actual vertices from the first row so you're not relying on math precision at all.

    I can't be 100% sure of this - but I'd bet $10 that if you're generating the geometry programmatically that you did something kinda like that!

    This explains the vertical crack - but it can only explain the horizontal ones if you're also not sharing the vertices vertically between rows of triangles either. That suggests that you're sending at least twice as many vertices to the GPU as you need to - and your panda will probably take twice as long to draw as it ideally could.

    -- Steve

  6. #16
    Junior Member
    Join Date
    Sep 2010
    Posts
    15

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

    Steve,

    Would it better for me to do something like suggested here? Specifically the third pic from the top.
    http://www.ogre3d.org/forums/viewtopic.php?f=4&t=61602

    Which I think is what you suggested earlier with the inset. The picture is nice confirmation that I understand.

    Or should I just modify my texture coordinates slightly, say by .05 to get rid of the bleeding? I'll probably make the changes over the next day or two and report back.

    -Xavier

  7. #17

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

    Steve,
    Thank you for your detailed reply. I'll check out the mesh to see if there's anything as what you said.

  8. #18

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

    if its not Tjunctions like steve saiz, its most likely filtering
    to see if thats the cause use gl.( NEAREST ) texture filtering instead of LINEAR

  9. #19
    Senior Member
    Join Date
    May 2010
    Posts
    207

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

    @xman84:

    Quote Originally Posted by xman84
    Steve,

    Would it better for me to do something like suggested here? Specifically the third pic from the top.
    http://www.ogre3d.org/forums/viewtopic.php?f=4&t=61602

    Which I think is what you suggested earlier with the inset. The picture is nice confirmation that I understand.
    Yes - I think you understand.

    That's the kind of thing you have to do to the texture map - but you'll still have to inset your texture coordinates by a couple of pixels from where they are right now. An inset of 0.05 would probably be enough for a texture of around 128x128 resolution. You could make it a bit less than that for larger maps maybe.

    The problem is that there is no "correct" amount. If you have the eyepoint far enough back - or if the polygons are sufficiently edge-on, you'll still get some bleed. But hopefully the texture will be so "muddy" by then that you'll get away with it.

    I do this kind of thing a lot because atlassed textures save the need to have separate draw calls for things with a lot of different maps - and I use shader code to switch sub-maps on the fly to make simple animations and other effects.

    Keeping my UV coordinates a couple of pixels away from edge of each sub-map is good enough for most applications...perfection is overrated!

    The other trick (if you can) is to try to avoid having maps that are too violently different in color/tone in the same texture...and if you can't avoid that, at least try to arrange your maps so that the most similarly colored ones are together.

    Take a look at this atlas texture from my cowboy bar-fight game at http://tubagames.net for example:



    Good luck!

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

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

    Quote Originally Posted by zed
    if its not Tjunctions like steve saiz, its most likely filtering
    to see if thats the cause use gl.( NEAREST ) texture filtering instead of LINEAR
    You're getting as confused as I was! There are two completely separate problems going on in this thread.

    oak3d's problem (with his panda model) could be either Tjunctions (T-edges, whatever) or just roundoff error in the vertex math causing the polygons to not quite join up along their edges (I'm betting on the latter).

    xman84's problem (with his voxel-based world) is a texture color bleed problem - which could be "solved" using gl.NEAREST texture filtering as you suggest. But the quality implications of using totally unfiltered textures in a 3D application are fairly horrifying - definitely not something I'd ever recommend!

Page 2 of 4 FirstFirst 1234 LastLast

Similar Threads

  1. Chrome 9 to Chrome 10 Problems
    By p0pes in forum WebGL - General
    Replies: 8
    Last Post: 03-14-2011, 10:00 AM
  2. 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
  •