4 ms·
Painting with math: A gentle study of raymarching
- tehsauce 3y agoFor anyone interested in playing around with SDFs, my friend and I made this open source library to make working with them more efficient, and you can write shaders using javascript https://github.com/shader-park/shader-park-core https://github.com/shader-park/shader-park-core
- deleted 3y ago[deleted]
- CyberDildonics 3y agoWhy would you write a shader using javascript and not the dedicated shading language built into every web browser?
- tehsauce 3y agoGLSL is great! But it is very limited in many aspects. Js enables us to create a more ergonomic APIs for SDFs similar to processing/p5. You can easily mix the glsl and js code, and it also allows you to directly implement transformations on SDF functions, like revolving or extruding a 2D SDF into a 3D one with a transformation function: https://shaderpark.com/sculpture/-NeEtQ1JEccER6MjPQzq https://shaderpark.com/sculpture/-NeEtQ1JEccER6MjPQzq It's not meant to be a replacement for glsl, just to open up some cool new possibilities!
- CyberDildonics 3y agoTo be clear you are talking about generating SDF data in javascript, you aren't actually writing shaders in javascript like you said earlier.
- tehsauce 3y agoIt’s not obvious in that previous example, but you can also write shaders in js, in addition to the built in abstractions for SDFs. https://shaderpark.com/sculpture/-Nc57ho13qXl3G7fQ2wy https://shaderpark.com/sculpture/-Nc57ho13qXl3G7fQ2wy There are some limitations but again the point is just to explore new possibilities!
- CyberDildonics 3y agoThe first question was why anyone would write a shader in javascript, then it turned out it wasn't actually shaders written in javascript. Now you're telling me you can again, but the question is still why.
- tehsauce 3y agoThe first example was a js shader too but because it also included glsl it could have been easy to miss that. So the second example just emphasizes that better. Regarding why, see my first answer or feel free to browse the thousands of other examples on the site!
- CyberDildonics 3y agoWhy do you keep calling these shaders? Javascript isn't running on the GPU and it isn't doing any rendering. If making SDF data is called a shader, all scene setup is not and geometry creation would be the same.
- tehsauce 3y agoMaybe another example will be helpful :) https://shaderpark.com/sculpture/-M_TY8dwxuyliltrFjP2 https://shaderpark.com/sculpture/-M_TY8dwxuyliltrFjP2 No SDFs involved in this one.
- CyberDildonics 3y ago
- xnx 3y agoNice article. A lot of this looks very familiar from some demoscene videos.
- kwoff 3y agoDefinitely bookmarked the article. I've been watching a playlist which is making shader programming click for me: https://www.youtube.com/watch?v=u5HAYVHsasc&list=PLGmrMu-IwbguU_nY2egTFmlg691DN7uE5 https://www.youtube.com/watch?v=u5HAYVHsasc&list=PLGmrMu-Iwb... "The Art of Code" channel, "ShaderToy Tutorials" playlist. I think if you know some geometry/trigonometry, once you wrap your head around writing a function that maps any pixel to a color (and how you add or multiply colors, and think in vectors), it starts to get fun. If you want a recommendation, I'd start with videos 30 and 37 in the playlist for a cool demo, then the 1st 4 videos (note: the video quality improves in later videos), then 10 and 11, then RayMarching starts in 22-24 and 29. (Many other videos in that channel are great for shader programming techniques, too.)
- pianoben 3y agoI had to look at that headline three times before it stopped reading "Painting with Meth". Seemed a very non-HN topic!
- whywhywouldyou 3y agoFascinating stuff!
- antegamisou 3y agoGood to see high quality articles gaining traction. If the article looks too verbose, be sure to check out, as the author cites, Inigo Quilez's videos Painting a Landscape with Maths - https://www.youtube.com/watch?v=BFld4EBO2RE https://www.youtube.com/watch?v=BFld4EBO2RE Painting a Character with Maths - https://www.youtube.com/watch?v=8--5LwHRhjk https://www.youtube.com/watch?v=8--5LwHRhjk Bonus: Painting with Maths in Google Sheets - https://www.youtube.com/watch?v=JnCkF62gkOY https://www.youtube.com/watch?v=JnCkF62gkOY
- xeonmc 3y agoHow does performance compare with rasterization if you do not do any light bounces?