playcanvas / engine

JavaScript game engine built on WebGL, WebGPU, WebXR and glTF
https://playcanvas.com
MIT License
9.33k stars 1.32k forks source link

Thick Lines #2011

Open Maksims opened 4 years ago

Maksims commented 4 years ago

It would be great, to have engine solution for thick lines. renderLine - provides gpu based lines, which guarantees only 1 pixel wide lines, but multi-pixel lines, are up to platform. And uses immediate renderer, so mainly used for debugging purposes.

Thick lines - are common thing to use, and useful in various ways, not just for debugging, but in games and apps as well. So list of features would be:

  1. Rendered as normal model, with materials as usual.
  2. Affected by light and cast shadows.
  3. Can have option to face camera always, or be fixed orientation.
  4. Have different endings, like lineCap on canvas2d.
  5. Can be rendered in world, or as an element on screen.
  6. Ensure there is a way to provide either material opacity map to make lines dotted.
  7. Modes of UVs, with tiling or based on line length.
  8. Shader chunks, just like on normal models should be changeable, so custom rendering features can be implemented.
LeXXik commented 4 years ago

While working with lines, I noticed they are not culled. Could be added as a features too.

Maksims commented 4 years ago

When rendering to world layer, with depthTest: true, still no culling currently?

LeXXik commented 4 years ago

My bad, it does. Thanks for pointing, @Maksims :) You can ignore my comment.

mvaligursky commented 2 years ago

interesting article on thick line rendering https://wwwtyro.net/2021/10/01/instanced-lines-part-2.html

willeastcott commented 2 years ago

Very cool. Even if it wasn't core engine functionality, it would be awesome to implement that paper as some kind of extension/plugin/script.

mvaligursky commented 2 years ago

and this one was really nice too .. builds on the link I mentioned, but does some kind of coverage based AA https://www.khronos.org/assets/uploads/developers/presentations/Crazy_Panda_How_to_draw_lines_in_WebGL.pdf