WebGL view implementation

[ghost]

The boilerplate is there, and we can look at the View interface for details on what needs implementing.

---

Potentially useful links:

• https://webglfundamentals.org/webgl/lessons/webgl-text-glyphs.html
• https://stackoverflow.com/questions/24525410/possible-to-draw-a-string-hello-world-as-a-texture-at-run-time
• https://stackoverflow.com/questions/25319040/display-text-with-webgl
• https://www.eventbrite.com/engineering/its-2015-and-drawing-text-is-still-hard-webgl-threejs/

[georgiemathews]

Some other interesting work done on this:
https://github.com/evanw/theta
https://medium.com/@evanwallace/easy-scalable-text-rendering-on-the-gpu-c3f4d782c5ac

[DanielJoyce]

Actually, you'd might want to use this too.

https://github.com/libgdx/libgdx/wiki/Distance-field-fonts

You can render a font to a buffer once, and then use that for font scaling

[acheronfail]

Here's another, slightly related http://wdobbie.com/post/gpu-text-rendering-with-vector-textures/

It has a pretty cool demo here http://wdobbie.com/pdf/

I'd like to implement an initial WebGL version sometime soon, just trying to decide on what's going to be best for performance (and also trying to find time to get around to it!).

---

EDIT: looks like GitHub's new experimental editor also uses WebGL in electron to render text: https://github.com/atom/xray

[goulashify]

Hi, cool project!

I'm interested on extending xi-electron and digging a bit into xi-editor, would an early try at the implementation with PixiJS be ok?

I don't know much about WebGL and shaders and all, i guess Pixi is a good start (not too verbose framework on top of WebGL), then individual parts (like the gutter for a start) could be replaced with more performant WebGL code with custom shaders and stuff?

[acheronfail]

@danigulyas thanks!

I want the WebGL view to be as low-level as possible, so we can get some good benchmarks on its performance related to the Canvas and DOM renderers when they're all complete - basically I didn't want there to be any WebGL framework (except perhaps http://twgljs.org/ since it's so small).

But the project is designed in such a way that you can add a PixiJS renderer right into it, just look at how the Canvas is implemented (in src/renderer/view/canvas/ and you can add a PixiJS view under src/renderer/view/pixijs!

I'd be more than happy to include it as a separate view there 👍😄👍

[Justinfront]

Have you considered using Kha for render it's low level and has low level text support, it renders using Shaders ( webgl or native ), in theory it should not be too hard to port TS to Haxe and I would be willing to help out if I can, this would open up opportunites for use of tech like https://github.com/Kode/Krom.
Have experimented with more complex text layout than Kha supports out of the box, but I am sure better code could be written ( click on right fields to adjust text field ) Kha webgl, it's feasible to tween the fontsize there is another demo on that somewhere.
https://nanjizal.github.io/SimpleText/build/html5/index.html
I think Kha text should be fast enough for scrolling etc... as it utilises instancing.
Other Haxe approaches maybe using Heaps or OpenFL ( similar to PixiJS underneath ? ), but think Kha may offer most power and flexibility ( haxeUI has perhaps better textfield implementation with Kha than link above ) and it can be use without all of haxeUI.