DavidBM
-
Posts
11 -
Joined
-
Last visited
Everything posted by DavidBM
-
Finally I made a library for this: https://github.com/DavidBM/pixi-nativeGLline
-
Bug fixed. Now you can draw lines with 2 points.
- 12 replies
-
- 1
-
-
- webgl
- performance
- (and 1 more)
-
I have wrote a little library that extend the pixi's Graphics object. If you make '1px' line, it uses GL_LINES. If you make '>1px' line, it uses the pixi algorithm. https://github.com/DavidBM/pixi-nativeGLline I tried to use GL_LINES instead of GL_LINE_STRIP, because GL_LINE_STRIP can't paint separate lines. The problem is that now you need to add 3 points per line, when the correct would be 2 points. I don't know why. Anyway, I'll keep updating it and improving it.
- 12 replies
-
- 1
-
-
- webgl
- performance
- (and 1 more)
-
pd: What project are you doing?
-
Umm, I tried your code and with one Graphics object with 2.000 points only got 15 FPS. Javascript only takes 0.1ms to draw the object, but seem that the graphic card can't draw 2000 vertexs. May need a special shader?. ¿What are you performance? pd: With my intel 4600 -> 1 graphic object with 2.000 lines -> 15FPS. With my nvidia 650 -> 1 graphic object with 20.000 lines 55FPS
-
Maybe this link can help you: http://www.html5gamedevs.com/topic/776-pixijs-now-draws-primitives-webgl-and-canvas/ Pixi computes polygons from lines to have nice corners. Draw lines in webgl (openGL ES) in windows are not trivial. In my post I have similar problems: http://www.html5gamedevs.com/topic/10124-mmo-strategy-game-drawing-graph-map/
-
That seems to be a filter in pixi for me. More information in: http://www.goodboydigital.com/pixijs-webgl-filters/ The new version 2.0 have fragment Shaders. Maybe they are better for you.
-
I've been researching a bit more and I found that drawing lines with a variable width is not trivial. Here the explanation: https://code.google.com/p/angleproject/issues/detail?id=119 Nowadays firefox, chrome and explorer 11 in windows can only draw lines of 1px width. The main reason is that directx doesn't support lines and OpenGL ES standard only requires 1px line width to be implemented. These are my ideas: 1- Draw rectangles, rotate it and scale the X and Y coordinate separately. I remain worry about the performance. 2- Use baricentric coordinates. Creating a mesh that represent the lines and draw it with a personalized shader. Explanation: http://codeflow.org/entries/2012/aug/02/easy-wireframe-display-with-barycentric-coordinates/ Any ideas? Anyone has experience with barycentric coordinates? The next week I will investigate the baricentric coordinates. Have fun! Edit: Baricentric coordinates is for triangles. Maybe a triangle for line and a shader that only render one edge?
-
Hi! I'm David, co-founder and front end of Arpic Games, a startup in Valencia (spain). We are making Starriser, an MMO of space strategy in real time. We are talking hundreds of thousands of players in real time in a giant world steering huge fleets of ships and managing planets, waging wars and trading with other players. A snapshot of the Starriser's galaxy: https://www.dropbox.com/s/sqro8ylbdkzqgfk/Starriser%20Galaxy.png?dl=0 This is a little one. Basically, the map is a graph. Nowadays Starriser uses Canvas 2D natively. I'm researching for graphic libraries and Pixi seems to be the best. The only problem is the primitives draw system. Pixi makes polygons from lines to have nice corners. The problem here is that its computation is slow. Well, not slow in general, slow if you put 5.000 lines and need to change their thickness every time the user zooms in. Even more if you smooth the zoom. Basically, I need to change the thickness of 5.000 lines without affecting performance. Computing every frame's line's polygons in a zoom animation its too much. A possible solution I thought is to use native webgl primitives. They don't have nice corners, but I don't need then. Is there any way to use native webGL lines in pixi? Finally, in my research I've noticed that pixi is a great solid library. Great work! Thanks! David.