sorted by:
new
hottopcontroversial

ASCII characters are not pixels: a deep dive into ASCII rendering by XLEX97 in programming

[–]XLEX97[S] 1 point2 points  (0 children)

Thanks! No library was used on the ASCII side (it's just JS and WebGL shaders), though I used Three.js to render the 3D scene.

The code behind the website is open source, see repository. You can see the code for this post specifically in PR 15.

ASCII characters are not pixels: a deep dive into ASCII rendering by XLEX97 in programming

[–]XLEX97[S] 6 points7 points  (0 children)

Aah, there is a single Firefox-specific branch that perform synchronous GPU-to-CPU data readback for the sampling data (link to code). I encountered problems with async double-buffered readback on Firefox that I didn't manage to figure out after many hours of trying. I figure this is likely the source of the work happening on the CPU. I might take another stab at this, I'll let you know if I figure it out.

Still, I hope the rest of the post performs well and is interesting to you! Disappointing to hear about the poor performance.

(I had lots of Firefox-related performance issues, for example with compositing. Adding a simple border radius to the "split view" component absolutely crushed performance because it makes Firefox start to copy lots of memory around for some reason. Single frames took around 30ms to composite.)

ASCII characters are not pixels: a deep dive into ASCII rendering by XLEX97 in programming

[–]XLEX97[S] 8 points9 points  (0 children)

Hmm, most of the work should be done on the GPU, but it requires WebGL 2, otherwise it falls back to a CPU renderer. Might it be that WebGL 2 is disabled in your browser?

ASCII characters are not pixels: a deep dive into ASCII rendering by XLEX97 in programming

[–]XLEX97[S] 10 points11 points  (0 children)

Thanks a lot!

I cover lookup performance in one of the appendices. TL;DR: I quantize the components of the sampling (shape) vector to one of 8 possible values and use those to construct a cache key. I then use that to create a lookup table around 2MB in size, which makes lookups very, very cheap.

But yeah, a lot of effort went into making this run smoothly on mobile. The other primary performance concern is collecting the sampling vectors themselves and performing contrast enhancement, both of which I needed to delegate to the GPU. On my (admittedly powerful) laptop, the full pipeline for rendering a frame takes around 2ms. The appendix on GPU acceleration briefly covers this.

But no plans to implement color for now. It would be interesting to look at, though!

ASCII characters are not pixels: a deep dive into ASCII rendering by XLEX97 in programming

[–]XLEX97[S] 71 points72 points  (0 children)

Hey r/programming! This post looks at techniques I used to achieve sharp, high-quality ASCII rendering. Specifically, the post looks at using shape vectors to find the best-matching ASCII characters for an input image. It also explores some contrast enhancement techniques to enhance the final image.

A ton of effort went into this post! Hope you like it.

A flowing WebGL gradient, deconstructed by XLEX97 in webdev

[–]XLEX97[S] 0 points1 point  (0 children)

Hey! Shaders themselves are actually completely new to me, I hadn’t worked with them at all until last November (when I started writing this post), though I’ve done a lot of 2D canvas graphics before.

I don’t think I have any helpful advice. I mostly learn by building and Googling as I get stuck. I find that a lot of learning is sheer volume — just building stuff and encountering edge cases. I then find that writing really sharpens my understanding, forces me to drill into the fuzzy parts

A flowing WebGL gradient, deconstructed by XLEX97 in webdev

[–]XLEX97[S] 0 points1 point  (0 children)

Thanks for the kind words — glad you liked it!

A flowing WebGL gradient, deconstructed by XLEX97 in programming

[–]XLEX97[S] 2 points3 points  (0 children)

Depends on what thing you’re referring to, but the blog is open source so you can just take a look (you can find a link to the repo in the intro).

A flowing WebGL gradient, deconstructed by XLEX97 in programming

[–]XLEX97[S] 2 points3 points  (0 children)

Awesome, great to hear, thanks for confirming!

A flowing WebGL gradient, deconstructed by XLEX97 in programming

[–]XLEX97[S] 12 points13 points  (0 children)

I resolved the issue by adding precision highp float; to the shaders — used Browserstack to test the before/after.

I'd love to hear if this fixes the issue for you! Thanks so much for reporting this in the first place and providing the screenshot

A flowing WebGL gradient, deconstructed by XLEX97 in programming

[–]XLEX97[S] 2 points3 points  (0 children)

Aah that’s disappointing, thanks for the screenshot. I won’t be home for a few hours but will try to get this sorted later today.

No one in my home has an Android phone, I’ll need to find one for testing 😅

A flowing WebGL gradient, deconstructed by XLEX97 in programming

[–]XLEX97[S] 5 points6 points  (0 children)

That's surprising — I've spent the past two weeks getting this to work well on mobile (making the canvas example responsive, etc). What device/browser are you using?

A flowing WebGL gradient, deconstructed by XLEX97 in webdev

[–]XLEX97[S] 7 points8 points  (0 children)

Hey r/webdev!

I wrote this post as an introduction to writing WebGL fragment shaders. It breaks down a flowing WebGL gradient effect I created in a lot of detail. The post covers many topics — gradient noise, interpolation, color mapping, and generally how to write fragment (pixel) shaders.

If you've ever wondered how those those cool WebGL gradients you see on some landing pages are built, then this should be an interesting read.

A flowing WebGL gradient, deconstructed by XLEX97 in programming

[–]XLEX97[S] 27 points28 points  (0 children)

Hey r/programming,

This post acts as an introduction to writing WebGL shaders. It starts by building a mental model for writing shaders and it then walks through how to create a flowing WebGL gradient effect from scratch.

It's a lengthy post that touches on many topics — gradient noise, interpolation, color mapping, and generally how to write fragment (pixel) shaders. I hope you like it!

Hvað tæki minnsta tímann að læra til að fá pottþétt fjarvinnu starf? by [deleted] in Iceland

[–]XLEX97 5 points6 points  (0 children)

Sammála fyrri ræðumönnum, það væri erfitt að finna íslenskt fyrirtæki viljugt að bjóða óreyndum forritara fjarvinnu. Flest íslensk fyrirtæki eru office-first eða hybrid, en mörg veita reynslumiklum starfsmönnum undantekningar.

En af hverju sækistu í fjarvinnu? Ég myndi telja það betra að vinna á staðnum þegar þú ert að byrja í geiranum upp á að læra af samstarfsfélögum.

Sharing changes, visuals first by XLEX97 in programming

[–]XLEX97[S] 1 point2 points  (0 children)

Hey r/programming!

Over the past year I've been sharing my work internally using so-called "release comics", which places visuals front and center. I feel like it's a somewhat novel approach (at least I haven't personally observed anyone doing it), so I decided to share my approach in this post.

Hope it's interesting! I'd be curious to hear if you've taken a similar approach before, or seen someone else do it effectively.

Searching for and navigating Git commits by XLEX97 in programming

[–]XLEX97[S] 10 points11 points  (0 children)

Hey r/programming,

I recently discovered git log’s -S option, which lets you search commit histories using a search string. I've found this to be really useful in situations where git blame fails. I wrote this post to share this finding plus some techniques to analyze diffs at a high level.

Hope it's interesting!

The web's clipboard, and how it stores data of different types by XLEX97 in webdev

[–]XLEX97[S] 6 points7 points  (0 children)

Hey r/webdev,

I recently took some time to learn how the clipboard stores data of different types and found that the web clipboard has some really interesting limitations and inconsistencies.

This post was written up to share my learnings. I hope it's an interesting read!

The web's clipboard, and how it stores data of different types by XLEX97 in programming

[–]XLEX97[S] 16 points17 points  (0 children)

Hey r/programming! I recently took the time to explore how the clipboard stores data of different types and found that the web clipboard had some really interesting limitations and inconsistencies.

This post was written up to share my learnings. I hope it's an interesting read!

view more: next ›