Crafting Painterly Shaders
Maxime Heckel's blog post explores developing painterly shaders in WebGL using the Kuwahara filter, detailing its implementation in React Three Fiber and discussing enhancements for improved visual quality and post-processing techniques.
Read original article
Maxime Heckel's blog post discusses the development of painterly shaders for WebGL, focusing on achieving a watercolor-like effect using the Kuwahara filter. The author expresses a long-standing interest in creating shaders that replicate traditional painting styles, inspired by notable 3D artists. After extensive research, Heckel discovered the Kuwahara filter, which is effective in transforming images into painterly outputs while preserving edges and reducing noise. The article details the filter's mechanics, including its ability to maintain sharpness and color quantization, and outlines the implementation process in a React Three Fiber scene. The author also highlights the importance of post-processing techniques in achieving the desired artistic effects. Additionally, improvements to the Kuwahara filter are discussed, including the use of a circular kernel to enhance the visual quality of the output. The post serves as a comprehensive guide for developers looking to incorporate painterly effects into their WebGL projects.
- The Kuwahara filter is key to achieving painterly effects in WebGL shaders.
- The filter preserves edges while reducing noise, making it suitable for artistic applications.
- Implementation details for the Kuwahara filter in a React Three Fiber scene are provided.
- The article discusses enhancements to the filter, including the use of a circular kernel for better visual results.
- The post emphasizes the significance of post-processing in creating stylized outputs.
Related
Eight million pixels and counting: improving texture atlas allocation in Firefox (2021)
Improving texture atlas allocation in WebRender with the guillotiere crate reduces texture memory usage. The guillotine algorithm was replaced due to fragmentation issues, leading to a more efficient allocator. Visualizing the atlas in SVG aids debugging. Rust's simplicity and Cargo fuzz testing are praised for code development and robustness. Enhancements in draw call batching and texture upload aim to boost performance on low-end Intel GPUs by optimizing texture atlases.
So you think you know box shadows?
This article explores creative uses of box shadows in web design, covering basics, layering for effects, simulating 3D, and performance considerations. It showcases innovative applications with code snippets and demos.
Show HN: Free e-book about WebGPU Programming
"WebGPU Unleashed" is a tutorial for beginners in graphics programming using the WebGPU API, covering foundational concepts, basic tasks, and advanced techniques like Gaussian splatting in an interactive format.
Fluid Simulation and Web Assembly
Eric Hayes developed an interactive fluid simulation in C++ using Smoothed Particle Hydrodynamics, optimizing performance with a grid system and addressing challenges related to stability and Web Assembly compatibility.
The Best Darn Grid Shader (Yet)
Ben Golus is developing a grid shader to surpass texture-based grids, focusing on user-configurable line widths, perspective thickness, and minimizing aliasing for improved visual quality in real-time rendering.
9 commentsLooking at the results, it seems that the author defines a base color (green for the leaves) and moves up and down in brightness using what amounts to a multiplication for the shadows and an add for the lights. The result feels a bit harsh and unnatural.
I would suggest that he also plays a bit with the hue values.
1. That he darkens the lights but moves the green towards yellow.
2. That he lightens the darks, but moves the green towards blue.
I created a flash app where you could upload a photo and then paint an impressionist style painting from it. You could either auto generate or use your mouse to paint sections of the photo.
I only have the one screen shot of it now https://imgur.com/a/5g40UEr
If I recall correctly I I'd take the position of the mouse, plus a rough direction it was traveling in, and then apply a few random brush strokes which would have a gradient applied from the start to the end of the stroke which was sampled from the underlying photo. The strokes length would be limited if it detected any edges on the photo near to the starting point.
In the end it was only a couple of hundred lines of ActionScript but it all came together to achieve quite a neat effect.
I'd love it if they had a mastodon account.
[0] https://sketchfab.com/3d-models/watercolor-bird-b2c20729dd4a...
I guess this also applies to the diffusion models. They look just as if a human did it! But as that gets more common, there will be added value in doing whatever they can't do, because only that will look truly human.
Related
Eight million pixels and counting: improving texture atlas allocation in Firefox (2021)
Improving texture atlas allocation in WebRender with the guillotiere crate reduces texture memory usage. The guillotine algorithm was replaced due to fragmentation issues, leading to a more efficient allocator. Visualizing the atlas in SVG aids debugging. Rust's simplicity and Cargo fuzz testing are praised for code development and robustness. Enhancements in draw call batching and texture upload aim to boost performance on low-end Intel GPUs by optimizing texture atlases.
So you think you know box shadows?
This article explores creative uses of box shadows in web design, covering basics, layering for effects, simulating 3D, and performance considerations. It showcases innovative applications with code snippets and demos.
Show HN: Free e-book about WebGPU Programming
"WebGPU Unleashed" is a tutorial for beginners in graphics programming using the WebGPU API, covering foundational concepts, basic tasks, and advanced techniques like Gaussian splatting in an interactive format.
Fluid Simulation and Web Assembly
Eric Hayes developed an interactive fluid simulation in C++ using Smoothed Particle Hydrodynamics, optimizing performance with a grid system and addressing challenges related to stability and Web Assembly compatibility.
The Best Darn Grid Shader (Yet)
Ben Golus is developing a grid shader to surpass texture-based grids, focusing on user-configurable line widths, perspective thickness, and minimizing aliasing for improved visual quality in real-time rendering.