acheronfail / xi-electron

A front-end for the xi-editor built with modern web technologies.
MIT License
343 stars 24 forks source link

WebGL view implementation #6

Open ghost opened 7 years ago

ghost commented 7 years ago

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


Potentially useful links:

georgiemathews commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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.