Stories with Tag shader

• Programming SDF Animations of Rick and Morty

  permalink

  Posted: 2025-02-06 03:30:34

  Verbose tl;dr

  This blog post details the process of creating animated Rick and Morty characters using signed distance functions (SDFs) in GLSL shaders. The author explains SDFs, demonstrates how to construct them for basic shapes, and then combines and transforms these shapes to build more complex figures like Rick's head. The animation is achieved by manipulating the SDFs within the shader based on time, creating effects like Rick's wobbling cheeks and blinking eyes. The post provides code snippets and animated GIFs showcasing the results, offering a practical tutorial on using SDFs for creating procedural animations.

  This blog post by Daniel Chase Hooper details the process of creating animated Signed Distance Field (SDF) renderings of Rick and Morty characters. The author meticulously outlines his workflow, beginning with a thorough explanation of SDFs and their advantages for animation, particularly their scalability and smooth rendering capabilities. He emphasizes how SDFs represent shapes implicitly through distance functions, allowing for easy manipulation and morphing.

  Hooper then delves into the specific tools and techniques employed. He utilizes the GLSL shading language within the Fragmentarium software environment, a platform known for its real-time fractal and generative art capabilities. He highlights the iterative development process, starting with basic geometric primitives represented as SDFs and gradually combining and transforming them to construct the complex forms of the characters. He provides explicit code examples demonstrating how to create SDFs for circles, rectangles, and lines, and illustrates how Boolean operations like union, subtraction, and intersection, implemented through minimum, maximum, and smooth minimum/maximum functions respectively, are used to combine these primitives.

  The post extensively covers the animation aspect, describing how time-dependent variables can be introduced into the SDF functions to create dynamic movements. He specifically shows how sinusoidal functions are used to generate oscillating and wave-like motions for Rick's eyebrows, hair, and mouth. Furthermore, he explains how these principles are extended to create more complex animations, such as the portal gun's swirling energy and Morty's characteristic facial expressions.

  Hooper also discusses the challenges faced during the project, such as achieving desired aesthetic results through careful parameter tuning and balancing computational complexity with visual fidelity. He showcases several iterations of the animation, highlighting the progressive improvements and refinements made throughout the process. The post concludes by providing the complete source code, enabling readers to experiment with and modify the animations themselves, fostering further exploration of SDF-based animation techniques. The overall tone is educational, providing a comprehensive and practical guide to creating SDF animations within the context of a visually engaging example featuring popular cartoon characters.

  • SDF
  • Signed Distance Fields
  • animation
  • programming
  • Rick and Morty
  • graphics
  • WebGL
  • GLSL
  • shader
  • computer graphics
  • 2D Animation
  • Cartoon Animation
  • Creative Coding

  Summary of Comments ( 22 )
  https://news.ycombinator.com/item?id=42958696

  Verbose tl;dr

  Hacker News users generally praised the author's clear explanation of Signed Distance Fields (SDFs) and the clever application to animating Rick and Morty. Several commenters appreciated the interactive demos and the progressive complexity, making the concepts easier to grasp. Some discussed the performance implications of SDF rendering, particularly on the web, and suggested potential optimizations. One user highlighted the potential of SDFs beyond 2D, pointing to their use in 3D rendering and game development. Others shared similar projects or resources related to SDFs and creative coding. The overall sentiment was positive, with many expressing admiration for the project's technical achievement and educational value.

  The Hacker News post titled "Programming SDF Animations of Rick and Morty" sparked a discussion with several interesting comments. Many users expressed admiration for the technical achievement and the visual appeal of the animated Rick and Morty characters created using signed distance functions (SDFs).

  Several commenters delved into the technical aspects of SDFs, discussing their advantages and use cases. One user highlighted the efficiency of SDFs for rendering smooth, scalable graphics, particularly for animations. Another explained how SDFs allow for complex shapes to be represented mathematically, enabling smooth transformations and animations. There was also a discussion of the mathematical principles behind SDFs and how they work.

  Some comments focused on the creative application of SDFs. One user praised the author's ability to translate the distinct style of Rick and Morty into the SDF format. Another suggested potential applications of this technique in game development and other visual media.

  A few comments touched upon the performance implications of SDF rendering. One user inquired about the performance on different hardware, while another discussed the potential for optimization using techniques like ray marching.

  Some users expressed interest in learning more about SDFs and requested resources for further exploration. They discussed various libraries and tools that could be used for creating SDF-based animations.

  A couple of comments humorously related the technical content back to the Rick and Morty universe, appreciating the blend of technical skill and pop culture reference. One such comment playfully suggested that Rick Sanchez himself might have used SDFs in his interdimensional adventures.

  Overall, the comments reflect a positive reception of the author's work, with a mix of technical discussion, appreciation for the creative application, and lighthearted humor.

• Surface-Stable Fractal Dithering

  permalink

  Posted: 2025-01-23 22:50:11

  Verbose tl;dr

  Surface-Stable Fractal Dithering introduces a novel dithering technique that maintains detail and avoids shimmering artifacts when applied to animated or deforming 3D surfaces. It achieves this by generating spatially correlated dither patterns using fractal Brownian motion, ensuring temporal coherence as the surface changes. This method produces visually pleasing results for various applications like reducing banding in low-bit color displays or adding stylized noise to textures, outperforming traditional dithering approaches in dynamic scenarios. The provided code implementation offers a flexible and efficient way to integrate this technique into existing graphics pipelines.

  This GitHub repository, titled "Dither3D," introduces a novel dithering technique called "Surface-Stable Fractal Dithering" designed specifically for enhancing the visual quality of textures applied to 3D models within a real-time rendering context. Traditional dithering methods, while effective at mitigating banding artifacts arising from limited bit-depth color representation, often exhibit temporal instability, meaning the dithering pattern shifts and shimmers as the camera or object moves. This shimmering effect, though sometimes subtle, can be distracting and detract from the immersive experience, particularly in animated scenes or when viewing objects with fine details.

  Surface-Stable Fractal Dithering addresses this issue by generating a dithering pattern that remains fixed relative to the surface of the 3D model. This is achieved through the use of a fractal noise function that is evaluated in tangent space, a coordinate system intrinsically linked to the surface of the model. As the model moves and rotates, the dithering pattern, being tied to this tangent space, moves and rotates with it, maintaining a consistent visual relationship with the surface. This effectively eliminates the temporal instability that plagues traditional dithering techniques, resulting in a smoother, more stable appearance, even when the camera or objects are in motion.

  The implementation provided within the repository utilizes a pre-computed 3D texture representing the fractal noise. This texture is sampled in tangent space during the rendering process, and the resulting value is used to perturb the color or other relevant properties of the rendered pixels. This approach allows for efficient real-time performance, as the computationally intensive fractal noise generation is performed offline. Furthermore, the fractal nature of the noise function ensures a visually pleasing and perceptually uniform dithering pattern. The repository likely includes code examples demonstrating how to integrate this technique into existing rendering pipelines. This method promises improved visual fidelity for applications requiring real-time rendering of textured 3D models, particularly in scenarios where temporal stability is crucial, such as virtual reality or video games.

  • dithering
  • fractal
  • 3d
  • rendering
  • graphics
  • surface
  • stable
  • Algorithm
  • texture
  • noise
  • shader
  • GPU
  • Real-time
  • image processing
  • computer graphics

  Summary of Comments ( 5 )
  https://news.ycombinator.com/item?id=42808889

  Verbose tl;dr

  Hacker News commenters generally praised the visual appeal and technical ingenuity of the dithering technique. Several highlighted the cleverness of leveraging 3D surfaces for dithering, finding it both unexpected and effective. Some expressed curiosity about the performance and potential applications, particularly in real-time scenarios and stylized rendering. A few commenters delved into the technical details, discussing the specifics of fractal noise generation and the implications of different surface types. There was also a brief discussion comparing this method to traditional dithering techniques and its potential advantages in preserving detail and minimizing banding artifacts. One commenter suggested potential improvements like exploring alternative distance functions and optimizing for different color spaces.

  The Hacker News post titled "Surface-Stable Fractal Dithering," linking to the GitHub repository runevision/Dither3D, has generated a moderate amount of discussion with a generally positive tone toward the presented dithering technique.

  Several commenters express fascination with the visual results of the dithering algorithm, describing it with terms like "mesmerizing" and "beautiful." One commenter highlights the apparent stability of the dithering patterns even when the 3D model is rotated, appreciating the lack of "crawlies," a common artifact in some dithering methods.

  A thread emerges discussing the practical applications of this technique. While some suggest potential uses in stylized rendering or achieving a retro aesthetic, others question the performance implications, especially in real-time scenarios. The original author (runevision) joins the conversation to clarify that the current implementation isn't optimized for speed, focusing instead on exploring the visual properties of the algorithm. They also mention that the technique could potentially benefit from GPU acceleration.

  Further discussion delves into the technical aspects of the dithering method. One commenter correctly identifies it as a variation of ordered dithering, and another speculates about the possibility of applying similar principles to temporal dithering for video. The possibility of using blue noise dithering is also raised, with comparisons to the fractal approach presented.

  One commenter expresses curiosity about the "surface-stable" aspect, prompting the author to explain how the algorithm maps 3D coordinates to a fractal space, resulting in the stable dithering patterns even under transformations. This explanation sparks further discussion about the mathematical properties of the fractal used.

  A few commenters share links to related resources, including articles on different dithering techniques and examples of fractal art. This adds further context to the discussion and provides additional avenues for exploration.

  Overall, the comments reflect a strong interest in the novel dithering technique presented. The discussion explores both the aesthetic and technical aspects, ranging from subjective impressions of the visual results to more in-depth analyses of the underlying algorithm. While some questions about performance and practical applications remain, the overall sentiment is positive and encourages further development and exploration of the technique.