Ray Marching Soft Shadows in 2D
rykap.com
Ray Marching Soft Shadows in 2D
1–10 of 37 posts
Re: Ray Marching Soft Shadows in 2D
#2This reminded me of a shadow casting engine for the Pico-8 (https://medium.com/hackernoon/pico-8-lighting-part-1-thin-da...).
Despite the limitations of the "console" the result is quite impressive: https://miro.medium.com/max/384/1*xgIPZgLgcJGBnRhFeJIJLQ.gif
Re: Ray Marching Soft Shadows in 2D
#3There’s a simple trick you can use if you want to generate the distance field for text or simple shapes in the browser. The way you do it is by repeatedly drawing the text with strokeText, varying the stroke width and the stroke color.
For example, you fill the background with 100% white, and then draw a 10px stroke at 90% gray, 9px at 80%, 8px at 70%, etc. This is, most importantly, an extremely fast way to generate a distance field for text from JavaScript in the browser.
I mention this because the mystery of the getDistance() function is often one of the tricky parts of demos like these.
Re: Ray Marching Soft Shadows in 2D
#4Failed to get uniform location
Re: Ray Marching Soft Shadows in 2D
#5Uncaught ReferenceError: TouchEvent is not defined
Re: Ray Marching Soft Shadows in 2D
#6There’s a simple trick you can use if you want to generate the distance field for text or simple shapes in the browser. The way you do it is by repeatedly drawing the text with strokeText, varying the stroke width and the stroke color. For example, you fill the background with 100% white, and then draw a 10px stroke at 90% gray, 9px at 80%, 8px at 70%, etc. This is, most importantly, an extremely fast way to generate…
That is really awesome, thank you.
Re: Ray Marching Soft Shadows in 2D
#7There’s a simple trick you can use if you want to generate the distance field for text or simple shapes in the browser. The way you do it is by repeatedly drawing the text with strokeText, varying the stroke width and the stroke color. For example, you fill the background with 100% white, and then draw a 10px stroke at 90% gray, 9px at 80%, 8px at 70%, etc. This is, most importantly, an extremely fast way to generate…
Author here. That's a neat trick!
> I mention this because the mystery of the getDistance() function is often one of the tricky parts of demos like these.
I agree! In the demos I use a library I wrote to generate 2D distance fields: https://github.com/ryankaplan/gpu-distance-field
It's also pretty fast :)
Re: Ray Marching Soft Shadows in 2D
#8Uncaught ReferenceError: TouchEvent is not defined
You're on Safari, aren't you?
Re: Ray Marching Soft Shadows in 2D
#9There’s a simple trick you can use if you want to generate the distance field for text or simple shapes in the browser. The way you do it is by repeatedly drawing the text with strokeText, varying the stroke width and the stroke color. For example, you fill the background with 100% white, and then draw a 10px stroke at 90% gray, 9px at 80%, 8px at 70%, etc. This is, most importantly, an extremely fast way to generate…
I don't get it how would this help you to write a function to get distance to a shape from any point on a canvas.
Edit: oh wait, you measure the pixel color :) nice