Evan Wallace

The readme says litegl is a fork: https://github.com/jagenjo/litegl.js/tree/master#readme Evan Wallace should get some credit. Evan created that fantastic WebGL Water demo. http://madebyevan.com/ https://github.com/evanw

Good readings: https://madebyevan.com/figma/ https://madebyevan.com/figma/building-a-professional-design-tool-on-th… https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/ (old but interesting still)

Does anyone know of more examples of water simulations in WebGL? I’m looking for ways to implement waves with foam. I love Evan’s Pool demo. https://madebyevan.com/webgl-water/

Haha! For those unsure, this is one of the co-founders of Figma, and he also maintains esbuild. See the root domain (https://madebyevan.com/).

The author (Ean Wallace) also went on to co-found Figma, which was just sold to Adobe for 20B - https://madebyevan.com/

> Things like vector networks (https://madebyevan.com/figma/introducing-vector-networks/), which immediately impose themselves as clearly superior to the classical "vector path" model literally everyone else is using. This is Macromedia Flash erasure, which had all of the mechanics it seems Figma now has w/r/t paths.

Evan Wallace (co-founder of Figma) has one of the best visualizations of CRDTs in action https://madebyevan.com/algos/crdt-fractional-indexing/ In practice, most apps will only need Last-Writer-Wins registers and not the more complicated sequence CRDT's that you find in Y.js and Automerge. We've built a auto-syncing database that uses CRDTs under the hood but never exposes them through the API. So if you want all of the benefits of CRDTs e.g. offline-first user experience, checkout our project, Triplit!

CRDTs are incredible. I recommend checking out the original link [1] as well as this “awesome” list [2] [1] https://madebyevan.com/algos/ [2] https://github.com/alangibson/awesome-crdt

This looks like great stuff if you follow the pointers, but lists don't make good submissions to HN (which itself is already a list). They tend not to lead to deep discussion because comments are about lowest common denominator of the items on the list, and this is usually pretty generic. What's better is to pick the most interesting item on the list and submit that instead. https://hn.algolia.com/?dateRange=all&page=0&prefix=true&s… Edit: let's do that in this case. I've changed the URL from https://madebyevan.com/algos/ based on https://news.ycombinator.com/item?id=33764875.

Evan Wallace, the technical co-founder who build the Figma rendering engine and vector editor, is a web UI craftsman par excellence. Check out https://madebyevan.com .

Design tools are a multi-billion dollar market in just the US, and useful worldwide. Potential resources are not even a bit scarce. Figma already did the hard work of prod/tech design and fixing browsers, meaning followers will have a much easier path. https://madebyevan.com/figma/building-a-professional-design-tool-on-th… The same short-term thinking has been espoused at the dawn of every innovation. Thankfully some folks don’t listen.

Ah Evan Wallace, the creator of esbuild, CTO of Figma, and maker of one of my favorite tools, Diskitude [0] which shows disk space usage on Windows, all under 10 kilobytes. [0] https://madebyevan.com/diskitude/

Yup, that's the one! He's also the author of http://madebyevan.com/. I remember seeing that WebGL water experiment many years ago and being blown away. That FSM Designer came in handy for some classes where I had to draw FSMs too.

Gosh there are a lot of these programs, aren't there? For some reason I find it really hard to read these tree map visualisations. I know the theory and all that, but for me they just aren't an intuitive way of displaying that kind of information. For me a radial graph (i.e. pie chart like) is much easier to grok - I don't even have to think about it, I just get it. Seems like there must be plenty of people who don't think the same way though, given how many different tree map disk viewers there are out there! For what it's worth I use Diskitude (http://madebyevan.com/diskitude/) on Windows and Daisy Disk (https://daisydiskapp.com/) on Mac. Both are great!

This sounds pretty great. This technique would be really powerful if the worker thread could pass a buffer of the rendered results off to the main thread efficiently for use by the main thread. For example, a game has a worker thread to refine lightmaps while the main thread uses those lightmaps for rendering the game (similar to http://madebyevan.com/shaders/lightmap/). Does anyone know if this is possible? Also, what does this mean for GPU use on the worker? Can heavy GPU use in the worker still lock up the GPU and impact the GPU use of the main thread and the windowing system in the OS?

That's beautiful. WebGL makes you realize that all the "designers" fooling around with CSS are playing in the kiddie pool. Of course, as soon as you use WebGL, users expect the visual quality of an AAA game. What you tend to get is crap like this.[1] It's possible to get the GPU to do great things for you.[2] But that's a programming exercise. Good 3D content is expensive. Most of the WebGL demos available either have very little content, or are recycling old video games. All this technology, already deployed, and little good content for it. [1] http://montagejs.github.io/beachplanetblog/ [2] http://madebyevan.com/webgl-water/

his other stuff is also really amazing: http://madebyevan.com/webgl-water/

I think this is my favorite WebGL demo of all time: http://madebyevan.com/webgl-water/

Don't forget to check out all his other impressive works! http://madebyevan.com/

http://raptjs.com/ was also ported from C++ to js :) Note: it is a 2-player game. Check out http://madebyevan.com/ for a bunch of other projects he has worked on.

This crashes for me (FF4, Win7). I would have like to have seen it working, the image on the home page looks nice http://madebyevan.com/#webgl-path-tracing

Thanks for sharing - this architecture post is also a great read: https://madebyevan.com/figma/building-a-professional-design-tool-on-th… > Our vision for the future of design tools is one where both the tool and the content are easily available to anyone, anywhere > The reason this is hard is because the web wasn’t designed as a general-purpose computing platform. > We fully control memory layout and can use compact 32-bit floats or even bytes when appropriate instead of JavaScript’s 64-bit doubles...The generated code is completely in control of allocation, which makes it much easier to hit 60fps by avoiding GC pauses. All C++ objects are just reserved ranges in a pre-allocated typed array so the JavaScript GC is never involved. > One big issue for us was that certain browser configurations couldn’t allocate large ranges of continuous address space for the huge typed array that contains the entire emscripten memory space. The worst case was 32-bit Chrome on Windows which sometimes couldn’t even allocate a 256mb typed array because ASLR was fragmenting the address space. This has since been fixed. A great example of making a single bold architectural decision (building a design tool on the web instead of as an app) in service of a vision (prioritize live collaboration), and then thoughtfully resolving all of the performance tradeoffs that stem from this route.

They don't link to the Form S-1 prospectus from their announcement, but it's publicly available at https://www.sec.gov/Archives/edgar/data/1579878/000162828025033742/fig… Their highlighted metrics page: $821M LTM revenue, 46% YoY revenue growth, 18% non-GAAP operating margin, 91% gross margin. It's an incredible success story, and the engineering they did upfront (primarily led by co-founder Evan Wallace) that set the stage for their success is the stuff of legends. https://madebyevan.com/figma/ has links to numerous blog posts breaking it down, but here are some choice quotes: > [Evan] developed the hybrid C++/JavaScript architecture for Figma's editor that made it possible to build a best-in-class design tool in the browser. The document representation and canvas area is in C++ while the UI around the canvas is in JavaScript (the team eventually settled on TypeScript + React for this). This let us heavily optimize the document representation to reduce memory usage and improve editing speed while still using modern UI technologies for fast iteration on our UI. C++ development was done using Xcode (not in the browser) to provide a better debugging environment. > Even though the contents of Figma documents are similar to what HTML can display, Figma actually does all of its own document rendering for cross-browser consistency and performance. Figma uses WebGL for rendering which bypasses most of the browser's HTML rendering pipeline and lets the app work closely…

This is an insightful article, although I don't necessarily agree with the view that "everyone" needs to know everything from first principles to be good at their job. Talking about abstractions, during my past month, I was reading nand2tetris, and it's a compelling experience if you understand the exercise you are doing, which is not about building a computer from first principles; it's much more than that. It makes you really understand what's going on behind the layers of abstracting that have been raised. Sometimes, understanding every layer of complexity is impossible, but depending on the area you are in, we need at least to try to understand the roots of it. However, this is not for everyone; ask a musician if they are really in the weeds of why the instrument is producing music (the physics behind it!). They are probably aware that it's vibrating air, but, in general, they won't know the theory behind it. Everything is built on abstractions, and that's OK, with time we will add even more on top of what we have; now, the issue is when those abstractions lock you in with a mindset that prevents you from creating something new without relying on those same abstractions that help you build stuff. Many discoveries and inventions were made because they knew the layer of abstractions on top of it, and they just started again from scratch. Even Figma, the software, is built on a new core of concepts based on how the web was working back in the time [1] [1]…

Also some cool demos on his website: http://madebyevan.com/

It is made to perform much better than your typical electron app would. Saying electron-based == shitty is complete misunderstanding of the technology. Although i dislike Figma as much as the next guy, their app was in many ways very impressive. See Figma's cofounder old articles at https://madebyevan.com/figma/

It may look like a crappy Electron app, but Figma has a quite interesting architecture. The browser editor is developed in C++ and cross-compiled to JavaScript with emscripten. The rendering engine looks like its handling HTML, but it's actually rendering their own document format for cross-browser consistency. They have their own CRDT implementation to handle multi-user edits. [0] https://www.madebyevan.com/figma/building-a-professional-design-tool-o… [1] https://www.madebyevan.com/figma/ [2] https://www.madebyevan.com/figma/how-figmas-multiplayer-technology-wor…

I see, I thought 3D graphics in browsers already existed and worked in Linux for a very long time so this must be a new one then... what's the difference between WebGPU, and WebGL that allowed demos like this one since long ago? https://madebyevan.com/webgl-water/ Is there some reason WebGPU has difficulties getting implemented for Linux, like DRM features or so?

I was thinking SDFs and the Bill stuff at time of writing. Read my mind. Have to add work by Evan Wallace here too as he is a legend. https://madebyevan.com/shaders/fast-rounded-rectangle-shadows/ https://madebyevan.com/webgl-path-tracing/

I like Diskitude by Evan Wallace the most for this kind of quick and easy drive content sizes inspection. It does full scan, but is pretty fast and easy to use. And is super tiny. https://madebyevan.com/diskitude/