Coder Social home page Coder Social logo

Visual quality of Label about cesium HOT 7 CLOSED

mramato avatar mramato commented on May 16, 2024
Visual quality of Label

from cesium.

Comments (7)

pjcozzi avatar pjcozzi commented on May 16, 2024

If it fixes the problem, we should make it an option on the LabelCollection. This requires a minor shader tweak. Do you want to try it? I can help you.

from cesium.

mramato avatar mramato commented on May 16, 2024

So I took a crack at it and it definitely makes text look way better. The "quick" test I did was change line 46 in BillboardCollectionVS.glsl from

gl_Position = agi_viewportOrthographic * vec4(positionWC.xy, -positionWC.z, 1.0);

to

gl_Position = agi_viewportOrthographic * vec4(floor(positionWC.xy), -positionWC.z, 1.0);

Which now causes billboards to align to pixel. I assume the next step would be to add a set/get AlignToPixel method to Billboard and have billboard collection pass that to the shader. This would default to false, but LabelCollection would default it to true (since it uses a BillboardCollection underneath).

My main problem is that I have no idea what I'm doing. My first guess would be to turn originAndShow into originAndShowAndAlign and add a branching condition to call floor or not, based on the value of Alight, but I know branching conditions can be bad. Am I anywhere near close with my idea? How should I do this?

from cesium.

pjcozzi avatar pjcozzi commented on May 16, 2024

As long as the branch is coherent, I wouldn't worry about it. Coherence is
easy to define for fragment shaders in screen space, but is less obvious
for vertex shaders; however, I assume it is simply the order of vertices in
the draw call. For kicks, alignToPixel could be zero or one, and we could
do lerp(positionWC.xy, floor(positionWC.xy) , alignToPixel) or other
tricks, but this isn't any better.

Can we just always align to a pixel? In what cases does this hurt visual
quality?

On Thu, May 10, 2012 at 6:48 PM, Matthew Amato <
[email protected]

wrote:

So I took a crack at it and it definitely makes text look way better. The
"quick" test I did was change line 46 in BillboardCollectionVS.glsl from

gl_Position = agi_viewportOrthographic * vec4(positionWC.xy,
-positionWC.z, 1.0);

to

gl_Position = agi_viewportOrthographic * vec4(floor(positionWC.xy),
-positionWC.z, 1.0);

Which now causes billboards to align to pixel. I assume the next step
would be to add a set/get AlignToPixel method to Billboard and have
billboard collection pass that to the shader. This would default to false,
but LabelCollection would default it to true (since it uses a
BillboardCollection underneath).

My main problem is that I have no idea what I'm doing. My first guess
would be to turn originAndShow into originAndShowAndAlign and add a
branching condition to call floor or not, based on the value of Alight, but
I know branching conditions can be bad. Am I anywhere near close with my
idea? How should I do this?


Reply to this email directly or view it on GitHub:

#15 (comment)

www.seas.upenn.edu/~pcozzi/

from cesium.

mramato avatar mramato commented on May 16, 2024

Aligning to pixel can make moving billboards appear jumpy as they snap from pixel to pixel, I notice this on my machine. We may be able to get the "best of both worlds" by only rounding the y component. This will still make the text sharper, but also cut down on the jumpiness. I tried this out on my machine and I think it might be the best solution.

gl_Position = agi_viewportOrthographic * vec4(positionWC.x, floor(positionWC.y), -positionWC.z, 1.0);

from cesium.

pjcozzi avatar pjcozzi commented on May 16, 2024

Sounds like a good idea. We can always add an option later. If we add the
option, we can consider doing at the collection level, not per billboard.
This way we would not need to store the flag per vertex; instead, it would
be a uniform.

On Fri, May 11, 2012 at 11:40 AM, Matthew Amato <
[email protected]

wrote:

Aligning to pixel can make moving billboards appear jumpy as they snap
from pixel to pixel, I notice this on my machine. We may be able to get
the "best of both worlds" by only rounding the y component. This will
still make the text sharper, but also cut down on the jumpiness. I tried
this out on my machine and I think it might be the best solution.

gl_Position = agi_viewportOrthographic * vec4(positionWC.x,
floor(positionWC.y), -positionWC.z, 1.0);


Reply to this email directly or view it on GitHub:

#15 (comment)

www.seas.upenn.edu/~pcozzi/

from cesium.

mramato avatar mramato commented on May 16, 2024

Cozzi, assuming there are no issues with my change, can you close this out? Thanks.

from cesium.

pjcozzi avatar pjcozzi commented on May 16, 2024

Looks good. Good catch updating the JavaScript code that is used to compute the screen-space position of a billboard.

from cesium.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.