W3C home > Mailing lists > Public > public-gpu@w3.org > July 2021

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

From: Kai Ninomiya <kainino@google.com>
Date: Wed, 14 Jul 2021 10:47:35 -0700
Message-ID: <CANxMeyAwgNMYCZvfB9FfiSCpr7jRsh90-rW+B5XTyYM+sGXDwQ@mail.gmail.com>
To: Andrew Varga <grizzly33@gmail.com>
Cc: "Eamon O'Tuathail" <eamon.otuathail@gmail.com>, public-gpu@w3.org
+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

-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

Received on Wednesday, 14 July 2021 17:48:10 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 14 July 2021 17:48:11 UTC