Re: As foundation for a large text editor web app, would WebGPU be quicker than the 2DContext in HTML Canvas?

+1. There are a number of examples out there that show using GL for editor
rendering can be extremely efficient. You may only need WebGL 1.0, which
has almost 100% reach; WebGL 2.0 or WebGPU will reach fewer users and will
probably provide only small benefits - unless you have specific usecases
for them (like if you have custom GPU text rendering algorithms or
something).

-Kai (he/they)


On Wed, Jul 14, 2021 at 4:27 AM Andrew Varga <grizzly33@gmail.com> wrote:

> I think yes, using WebGL or WebGPU would be much faster than using the
> canvas 2D context if it's optimized properly.
> A good example is makepad, which is open source, written in Rust and uses
> WebGL:
> https://github.com/makepad/makepad
> demo:
> https://makepad.dev/
>
> I suspect the difference between WebGL and WebGPU will not be significant,
> at least initially while WebGPU is still very new.
>
> On Wed, Jul 14, 2021 at 11:44 AM Eamon O'Tuathail <
> eamon.otuathail@gmail.com> wrote:
>
>> There are a number of ways of creating a text editor in a web app:
>> 1) using contenteditable
>> 2) using hidden text area (e.g. as seen with the Visual Studio Code's
>> Monaco text editor)
>>
>> https://www.mozzafiller.com/posts/how-does-monaco-editor-enable-textediting-on-a-web-page
>> 3) using HTML Canvas
>>
>> It seems for the larger text editor projects there is a trend to using
>> the HTML Canvas-approach, mostly using the 2D Context with some use of
>> WebGL. Here are some examples:
>>
>> Visual Studio Code's use of canvas for the integrated terminal is
>> described here:
>> https://code.visualstudio.com/blogs/2017/10/03/terminal-renderer
>>
>> The Register here writes about Google moving its editors to Canvas:
>>   https://www.theregister.com/2021/05/13/google_warns_docs_rewrite_will/
>> Also Y Combinator has a very interesting thread discussing this:
>>   https://news.ycombinator.com/item?id=27129858
>>
>> In particular in the Y Combinator discussion I note Microsoft's Tyiar
>> states:
>> -----------------
>> "I wrote the terminal canvas renderers in VS Code that has been called
>> out a few times here. Initially I implemented a canvas renderer using just
>> a 2d context to draw many textures which sped things up "5 to 45 times"[1]
>> over the older DOM renderer.
>> Since then I moved onto a WebGL renderer[2] which was mostly a personal
>> project, it's basically the first canvas renderer but better in every way
>> since it works by organizing a typed array (very fast) and sending it to
>> the GPU in one go, as opposed to piece meal and having the browser do its
>> best to optimize/reduce calls. This was measured to improve performance by
>> up to 900% in some cases over the canvas renderer"
>> ----------------
>>
>> I suspect WebGPU will be faster than WebGL, so my question is, would a
>> text editor based on WebGPU be the absolutely fastest way of delivering a
>> modern text editing experience in a web browser/PWA app?
>>
>> Anyone got thoughts if this would be the case or real world (prototype)
>> experience of this?
>>
>> Eamon O'Tuathail
>> https://clipcode.net
>>
>