[HN Gopher] Show HN: CandyGraph, a flexible, fast-by-default Web...
___________________________________________________________________
Show HN: CandyGraph, a flexible, fast-by-default WebGL plotting
library
Author : wwwtyro
Score : 49 points
Date : 2021-05-23 16:28 UTC (6 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| westoncb wrote:
| This seems really nice in terms of how it's structured,
| performance capabilities etc., but unfortunately the lack of
| anti-aliasing (of lines and shapes) and fuzzy-looking text give a
| first appearance of low quality. (Maybe this just just an issue
| with how it's rendering on my machine?)
| bl0b wrote:
| This looks like a really cool library!
|
| Perhaps a few more examples of realtime interaction/animation on
| large-ish datasets would help show how fast and snappy it can be?
| ta988 wrote:
| The examples all look pixelated/blurry...
| wwwtyro wrote:
| Yeah, I neglected to account for device pixel ratio in the
| examples, so they will probably look blurry; I'll need to go
| back and fix those.
| saurik wrote:
| The examples are all so blurry :(. (I am on an iPhone X.)
| wwwtyro wrote:
| Yeah, I neglected to account for device pixel ratio in the
| examples, so they will probably look blurry; I'll need to go
| back and fix those.
| [deleted]
| choeger wrote:
| Maybe a stupid question, since I am not a web dev, but how
| exactly do you render the text with the GPU? Text rendering ain't
| simple. On top of that, how does that interact with the browser?
| Can the browser still select the font (size) of the rendered
| text? Can the user select it for copying?
| Jasper_ wrote:
| > how exactly do you render the text with the GPU?
|
| This library uses a prebaked SDF texture.
|
| https://github.com/wwwtyro/candygraph/blob/master/src/assets...
|
| > On top of that, how does that interact with the browser? Can
| the browser still select the font (size) of the rendered text?
| Can the user select it for copying?
|
| No.
| contriban wrote:
| For the latter questions, WebGL is rendered as an opaque bitmap
| in the browser (canvas element) so it amounts to an
| unselectable image as far as the user is concerned: It's all
| pixels and no text.
| codetrotter wrote:
| It'd be a fair bit of work, but from a technical point of
| view you could implement a click and a drag event handler
| that "selects" the text, and intercept Ctrl+C etc and place
| the text on the browser clipboard.
|
| Ultimately it would probably feel quite unnatural compared to
| the native text selection of the browser. And probably would
| not work very well except in a small subset of browsers.
|
| I think at some point in the future browsers and/or operating
| systems will ship with machine learning powered systems for
| recognizing text in bitmaps and for letting users copy
| recognized text. This is already possible today both with
| third party non-ML powered OCR software and with third party
| ML-powered software.
| ithkuil wrote:
| The new Google docs uses a canvas. The feature is not
| rolled out fully yet but there is a demo document attached
| to the announcement. The canvas demo document is fully
| selectable, it feels native. I assume it works as you
| described, so it's possible to make it feel right, with
| enough effort to detail.
| ridiculous_fish wrote:
| Awesome project! I'm curious how you draw lines? I found that
| drawing nice lines is quite painful in WebGL; I ended up using
| the "Screen-Space Projected Lines" technique here:
|
| https://mattdesl.svbtle.com/drawing-lines-is-hard
|
| and then using a fragment shader to antialias them.
| wwwtyro wrote:
| Thanks!
|
| That's a great write up. I used this approach:
| https://wwwtyro.net/2019/11/18/instanced-lines.html
| alok-g wrote:
| A general question on plotting libraries -- Why is there so much
| segregation between 2D and 3D capabilities. Most of them do one
| or the other.
| wwwtyro wrote:
| Copying a twitter thread[1] here for more explanation
|
| I built CandyGraph a few months ago to scratch an itch and never
| really got around to talking about it, but it's starting to get
| some use now, so here it is:
| https://github.com/wwwtyro/candygraph
|
| I wanted a plotting library that was designed to not only plot a
| zillion points very fast, but also deal with changes to the
| presentation of that data at interactive framerates. If I zoomed
| in on the plot, for example, I wanted the axes to update fast
| enough that I wouldn't have to worry about the hit. If I changed
| an axis from linear to log, the rendered data would update
| immediately; I didn't want the CPU to churn through a million
| data points and ship them to the GPU again before it rerendered.
|
| So CandyGraph was born. It adopts D3's elegant concept of scales,
| but it implements them on both the CPU and GPU. When data is
| rendered, the scaling takes place in the vertex shader. Changing
| a scale wont cause a missed frame.
|
| On top of scales sits coordinate systems, also implemented for
| the CPU and GPU. These combine multiple scales into a system
| capable of dealing with 2D points. It has cartesian and polar
| coordinate systems, currently.
|
| It renders everything on the GPU, even axes and text. No need to
| overlay your speedy WebGL plot with an SVG or another canvas for
| your axis rendering, and no need to take a perf hit for doing so.
| And of course, the data rendering itself is speedy; it's all
| instanced by default.
|
| Finally, CandyGraph comes with a small but growing collection of
| optimized primitives and higher-level objects to simplify common
| plotting tasks.
|
| If this sounds like it might scratch your itch, check out the
| tutorial and examples:
| https://wwwtyro.github.io/candygraph/tutorial/dist/
| https://wwwtyro.github.io/candygraph/examples/dist/
|
| CandyGraph is built on top of the embarassingly good regl
| library. CandyGraph is in major version zero, but it's usable
| (and in use) today.
|
| [1]https://twitter.com/wwwtyro/status/1396500134716973063
| c-smile wrote:
| > It renders everything on the GPU, even axes and text.
|
| Yeah, DOM needs immediate mode graphics. Like the one I've
| added to Sciter, this for example:
| element.paintForeground = function(gfx) { ...
| }
|
| allows to custom draw a) on top of default element's content
| (note: any element, not just <canvas>), b) with the paint
| frequency (60 FPS) and c) on GPU directly - gfx there is the
| same graphics that HTML content uses.
|
| So you can still use Context2D for GPU drawing without the need
| for WebGL.
|
| Even you can push vertices on WebGL fast enough there are other
| problems, text measurement and rendering for example. WebGL
| simply have no means for drawing texts.
|
| So I've added Graphics.Text - attributed text layout that
| caches chars-to-glyphs and layout calculations...
___________________________________________________________________
(page generated 2021-05-23 23:01 UTC)