Nathan Reed successfully ran a scaled-down version of the GPT-2 language model entirely within a web browser using WebGL shaders. By leveraging the parallel processing power of the GPU, he achieved impressive performance, generating text at a reasonable speed without any server-side computation. This involved creatively encoding model parameters as textures and implementing the transformer architecture's intricate operations using custom shader code, demonstrating the potential of WebGL for complex computations beyond traditional graphics rendering. The project highlights the power and flexibility of shader programming for tasks beyond its typical domain, offering a fascinating glimpse into using readily available hardware for machine learning inference.
The author envisions a future (2025 and beyond) where creating video games without a traditional game engine becomes increasingly viable. This is driven by advancements in web technologies like WebGPU, which offer native performance, and readily available libraries handling complex tasks like physics and rendering. Combined with the growing accessibility of AI tools for asset creation and potentially even gameplay logic, the barrier to entry for game development lowers significantly. This empowers smaller teams and individual developers to bring their unique game ideas to life, focusing on creativity rather than wrestling with complex engine setup and low-level programming. This shift mirrors the transition seen in web development, moving from manual HTML/CSS/JS to higher-level frameworks and tools.
Hacker News users discussed the practicality and appeal of the author's approach to game development. Several commenters questioned the long-term viability of building and maintaining custom engines, citing the significant time investment and potential for reinventing the wheel. Others expressed interest in the minimalist philosophy, particularly for smaller, experimental projects where creative control is paramount. Some pointed out the existing tools like raylib and Love2D that offer a middle ground between full-blown engines and building from scratch. The discussion also touched upon the importance of understanding underlying principles, regardless of the chosen tools. Finally, some users debated the definition of a "game engine" and whether the author's approach qualifies as engine-less.
This MetaPost tutorial demonstrates the language's versatility by showcasing various graphical techniques. It covers creating geometric shapes, manipulating paths and curves, applying transformations like rotations and scaling, working with text and labels, and generating patterned fills. The post emphasizes practical examples, like drawing a clock face, a spiral, and a function graph, illustrating how to combine MetaPost's features for creating complex and visually appealing illustrations. It serves as a good introduction to the language's capabilities for generating vector graphics, especially for mathematical or technical diagrams.
Hacker News users discuss the utility and elegance of MetaPost, particularly for diagrams and figures. Several commenters praise its declarative approach, finding it more intuitive and less fiddly than alternatives like TikZ/PGF. Some highlight the integration with LaTeX and the power of being able to programmatically generate graphics. Others note MetaPost's age and the steeper learning curve compared to newer tools, although the quality of the output and the control it offers are seen as worthwhile trade-offs. The ability to express geometric relationships directly within the code is also mentioned as a significant advantage. A few users express a desire for a modernized, actively developed version of MetaPost, suggesting it could be even more powerful with improvements to the build process and editor integration.
The blog post "15 Years of Shader Minification" reflects on the evolution of techniques to reduce shader code size, crucial for performance in graphics programming. Starting with simple regex-based methods, the field progressed to more sophisticated approaches leveraging abstract syntax trees (ASTs) and dedicated tools like Shader Minifier and GLSL optimizer. The author emphasizes the importance of understanding GLSL semantics for effective minification, highlighting challenges like varying precision and cross-compiler quirks. The post concludes with a look at future directions, including potential for machine learning-based optimization and the increasing complexity posed by newer shader languages like WGSL.
HN users discuss the challenges and intricacies of shader minification, reflecting on its evolution over 15 years. Several commenters highlight the difficulty in optimizing shaders due to the complex interplay between hardware, drivers, and varying precision requirements. The effectiveness of minification is questioned, with some arguing that perceived performance gains often stem from improved compilation or driver optimizations rather than the minification process itself. Others point out the importance of considering the specific target hardware and the potential for negative impacts on precision and stability. The discussion also touches upon the trade-offs between shader size and readability, with some suggesting that smaller shaders aren't always faster and can be harder to debug. A few commenters share their experiences with specific minification tools and techniques, while others lament the lack of widely adopted best practices and the ongoing need for manual optimization.
Evan Wallace's "WebGL Water" demonstrates a real-time water simulation using WebGL. The simulation calculates the height of the water surface at each point in a grid, and then renders that surface with reflections and refractions. User interaction, like dragging the mouse, creates ripples and waves that propagate realistically across the surface. The post details the technical implementation, including the use of framebuffer objects, vertex and fragment shaders, and a numerical solver for wave propagation based on a simplification of shallow water equations. It represents an early and impressive example of browser-based 3D graphics using WebGL.
Commenters on Hacker News express appreciation for the simplicity and elegance of Evan Wallace's WebGL water simulation, particularly its age (2010) and the fact it runs smoothly even on older hardware. Several highlight the educational value of the clear, concise code, making it a good learning resource for WebGL and graphics programming. Some discuss the underlying techniques, like summing sine waves to create the wave effect, and how surprisingly realistic results can be achieved with relatively simple methods. A few commenters share their own experiences experimenting with similar simulations and offer links to related resources. Performance, particularly on mobile, and the clever use of JavaScript are also points of discussion.
The blog post details the author's process of livecoding graphics in Common Lisp using a combination of Quicklisp libraries, specifically cl-cairo2 and Qtools. They leverage the REPL's interactive nature to rapidly iterate and experiment with visual elements, modifying code and seeing immediate results in a Cairo graphics window. The author explains their setup and workflow, emphasizing the advantages of Lisp's dynamic environment for this type of creative coding, showcasing how functions can be redefined and tweaked on-the-fly to manipulate shapes, colors, and other graphical parameters. This approach allows for a fluid and exploratory development experience, turning the coding process itself into a performative act.
HN users generally praised the author's technical skill and the visual appeal of the live coding demo. Some expressed interest in learning more about Common Lisp and the specific libraries used. A few commenters discussed the practical applications of live coding graphics, suggesting uses in game development, generative art, and data visualization. One commenter pointed out the potential accessibility issues related to color choices in the examples. Another highlighted the historical precedent of Lisp machines and their graphical capabilities, connecting the demo to that lineage. The perceived complexity of Common Lisp was also mentioned, with some users acknowledging its steep learning curve but also its power and flexibility.
This blog post breaks down the creation of a smooth, animated gradient in WebGL, avoiding the typical texture-based approach. It explains the core concepts by building the shader program step-by-step, starting with a simple vertex shader and a fragment shader that outputs a solid color. The author then introduces varying variables to interpolate colors across the screen, demonstrates how to create horizontal and vertical gradients, and finally combines them with a time-based rotation to achieve the flowing effect. The post emphasizes understanding the underlying WebGL principles, offering a clear and concise explanation of how shaders manipulate vertex data and colors to generate dynamic visuals.
Hacker News users generally praised the article for its clear explanation of WebGL gradients. Several commenters appreciated the author's approach of breaking down the process into digestible steps, making it easier to understand the underlying concepts. Some highlighted the effective use of visual aids and interactive demos. One commenter pointed out a potential optimization using a single draw call, while another suggested pre-calculating the gradient into a texture for better performance, particularly on mobile devices. There was also a brief discussion about alternative methods, like using a fragment shader for more complex gradients. Overall, the comments reflect a positive reception of the article and its educational value for those wanting to learn WebGL techniques.
The Blend2D project developed a new high-performance PNG decoder, significantly outperforming existing libraries like libpng, stb_image, and lodepng. This achievement stems from a focus on low-level optimizations, including SIMD vectorization, optimized Huffman decoding, prefetching, and careful memory management. These improvements were integrated directly into Blend2D's image pipeline, further boosting performance by eliminating intermediate copies and format conversions when loading PNGs for rendering. The decoder is designed to be robust, handling invalid inputs gracefully, and emphasizes correctness and standard compliance alongside speed.
HN commenters generally praise Blend2D's PNG decoder for its speed and clean implementation. Some appreciate the detailed blog post explaining its design and optimization strategies, highlighting the clever use of SIMD intrinsics and the decision to avoid complex dependencies. One commenter notes the impressive performance compared to LodePNG, particularly for large images. Others discuss potential further optimizations, such as using pre-calculated tables for faster filtering, and the challenges of achieving peak performance with varying image characteristics and hardware platforms. A few users also share their experiences integrating or considering Blend2D in their projects.
Driven by a desire to understand how Photoshop worked under the hood, the author embarked on a personal project to recreate core functionalities in C++. Focusing on fundamental image manipulation like layers, blending modes, filters (blur, sharpen), and transformations, they built a simplified version without aiming for feature parity. This exercise provided valuable insights into image processing algorithms and the complexities of software development, highlighting the importance of optimization for performance, especially when dealing with large images and complex operations. The project, while not a full Photoshop replacement, served as a profound learning experience.
Hacker News users generally praised the author's project, "Recreating Photoshop in C++," for its ambition and educational value. Some questioned the practical use of such an undertaking, given the existence of Photoshop and other mature image editors. Several commenters pointed out the difficulty in replicating Photoshop's full feature set, particularly the more advanced tools. Others discussed the choice of C++ and suggested alternative languages or libraries that might be more suitable for certain aspects of image processing. The author's focus on performance optimization and leveraging SIMD instructions also sparked discussion around efficient image manipulation techniques. A few comments highlighted the importance of UI/UX design, often overlooked in such projects, for a truly "Photoshop-like" experience. A recurring theme was the project's value as a learning exercise, even if it wouldn't replace existing professional tools.
Dithering is a technique used to create the illusion of more colors and smoother gradients in images with a limited color palette. The post "Dithering in Colour" explores various dithering algorithms, focusing on how they function with color images. It explains ordered dithering using matrices like the Bayer matrix, and error-diffusion dithering methods such as Floyd-Steinberg, which distribute quantization errors to neighboring pixels. The post visually demonstrates the effects of these algorithms with examples, highlighting the trade-offs between different methods in terms of perceived noise and color accuracy. It concludes by mentioning how dithering remains relevant today for stylistic effects and performance optimization, even with modern displays capable of displaying millions of colors.
HN users generally praised the article for its clear explanation of dithering, particularly its interactive visualizations. Several commenters shared their experiences with dithering, including its use in older games and demos. Some discussed the subtle differences between various dithering algorithms, while others highlighted the continued relevance of these techniques in resource-constrained environments or for stylistic effect. One commenter pointed out a typo in the article, which the author promptly corrected. A few users mentioned alternative resources on the topic, including a related blog post and a book.
This post introduces rotors as a practical alternative to quaternions and matrices for 3D rotations. It explains that rotors, like quaternions, represent rotations as a single action around an arbitrary axis, but offer a simpler, more intuitive geometric interpretation based on the concept of "geometric algebra." The author argues that rotors are easier to understand and implement, visually demonstrating their geometric meaning and providing clear code examples in Python. The post covers basic rotor operations like creating rotations from an axis and angle, composing rotations, and applying rotations to vectors, highlighting rotors' computational efficiency and stability.
Hacker News users discussed the practicality and intuitiveness of using rotors for 3D rotations. Some found the rotor approach more elegant and easier to grasp than quaternions, especially appreciating the clear geometric interpretation and connection to bivectors. Others questioned the claimed advantages, arguing that quaternions remain the superior choice for performance and established library support. The potential benefits of rotors in areas like interpolation and avoiding gimbal lock were acknowledged, but some commenters felt the article didn't fully demonstrate these advantages convincingly. A few requested more comparative benchmarks or examples showcasing rotors' practical superiority in specific scenarios. The lack of widespread adoption and existing tooling for rotors was also raised as a barrier to entry.
Using mix() with step() to simulate conditional assignments in shaders is often less efficient than directly using branch instructions. While seemingly branchless, this mix()/step() approach can introduce extra computations and potentially disrupt hardware optimizations related to predication. Modern GPUs are adept at handling branches efficiently, especially when they are predictable, so relying on them is often faster and simpler than employing arithmetic workarounds. Therefore, default to standard branching unless profiling reveals a specific performance bottleneck that can be demonstrably addressed by a mix()/step() alternative.
HN users generally agreed that the article's advice is sound, particularly for modern GPUs. Several pointed out that mix() and step() can be more efficient than branching, especially when dealing with SIMD architectures where branching can lead to thread divergence. Some emphasized that profiling is crucial, as the optimal approach can vary depending on the specific GPU and shader complexity. One commenter noted that while branching might be faster in simple cases, mix() offers more predictable performance as shader complexity increases. Another cautioned against premature optimization and recommended focusing on algorithmic improvements first. A few users shared alternative techniques like using lookup textures or bitwise operations for certain conditional scenarios. Finally, there was discussion about the evolution of GPU architecture and how older advice regarding branching might no longer apply.
This blog post details a method for realistically simulating shallow water flow over terrain. The author utilizes a heightmap to represent the terrain and employs a simplified shallow water equations model to govern water movement. This model calculates water height and velocity, accounting for factors like terrain slope and gravity. The simulation iteratively updates the water's state using numerical integration, allowing for dynamic changes in water distribution and flow patterns based on the underlying terrain. Visualization is achieved through a simple rendering technique that adjusts terrain color based on water depth, creating a visually convincing representation of shallow water flowing over varied terrain.
Commenters on Hacker News largely praised the clarity and educational value of the blog post on simulating water over terrain. Several appreciated the author's focus on intuitive explanation and avoidance of overly complex mathematics, making the topic accessible to a wider audience. Some pointed out the limitations of the shallow water equations used, particularly regarding their inability to model breaking waves, while others suggested alternative approaches or resources for further exploration, such as smoothed-particle hydrodynamics (SPH) and the book "Fluid Simulation for Computer Graphics." A few commenters also shared their own experiences and projects related to fluid simulation. Overall, the discussion was positive and focused on the technical aspects of the simulation.
The Graphics Codex is a comprehensive, free online resource for learning about computer graphics. It covers a broad range of topics, from fundamental concepts like color and light to advanced rendering techniques like ray tracing and path tracing. Emphasizing a practical, math-heavy approach, the Codex provides detailed explanations, interactive diagrams, and code examples to facilitate a deep understanding of the underlying principles. It's designed to be accessible to students and professionals alike, offering a structured learning path from beginner to expert levels. The resource continues to evolve and expand, aiming to become a definitive and up-to-date guide to the field of computer graphics.
Hacker News users largely praised the Graphics Codex, calling it a "fantastic resource" and a "great intro to graphics". Many appreciated its practical, hands-on approach and clear explanations of fundamental concepts, contrasting it favorably with overly theoretical or outdated textbooks. Several commenters highlighted the value of its accompanying code examples and the author's focus on modern graphics techniques. Some discussion revolved around the choice of GLSL over other shading languages, with some preferring a more platform-agnostic approach, but acknowledging the educational benefits of GLSL's explicit nature. The overall sentiment was highly positive, with many expressing excitement about using the resource themselves or recommending it to others.
This blog post breaks down the "Tiny Clouds" Shadertoy by iq, explaining its surprisingly simple yet effective cloud rendering technique. The shader uses raymarching through a 3D noise function, but instead of directly visualizing density, it calculates the amount of light scattered backwards towards the viewer. This is achieved by accumulating the density along the ray and weighting it based on the distance traveled, effectively simulating how light scatters more in denser areas. The post further analyzes the specific noise function used, which combines several octaves of Simplex noise for detail, and discusses how the scattering calculations create a sense of depth and illumination. Finally, it offers variations and potential improvements, such as adding lighting controls and exploring different noise functions.
Commenters on Hacker News largely praised the "Tiny Clouds" shader's elegance and efficiency, admiring the author's ability to create such a visually appealing effect with minimal code. Several discussed the clever use of trigonometric functions and noise to generate the cloud shapes, and some delved into the specifics of raymarching and signed distance fields. A few users shared their own experiences experimenting with similar techniques, and offered suggestions for further exploration, like adding lighting variations or animation. One commenter linked to a related Shadertoy example showcasing a different approach to cloud rendering, prompting a brief comparison of the two methods. Overall, the discussion highlighted the technical ingenuity behind the shader and fostered a sense of appreciation for its concise yet powerful implementation.
Someone has rendered the entirety of the original Doom (1993) game, including all levels, enemies, items, and even the intermission screens, as individual images within a 460MB PDF file. This allows for a static, non-interactive experience of browsing through the game's visuals like a digital museum exhibit. The PDF acts as a unique form of archiving and presenting the game's assets, essentially turning the classic FPS into a flipbook.
Hacker News users generally expressed amusement and appreciation for the novelty of rendering Doom as a PDF. Several commenters questioned the practicality, but acknowledged the technical achievement. Some discussed the technical aspects, wondering how it was accomplished and speculating about the use of vector graphics and custom fonts. Others shared similar projects, like rendering Quake in HTML. A few users pointed out potential issues, such as the large file size and the lack of interactivity, while others jokingly suggested printing it out. Overall, the sentiment was positive, with commenters finding the project a fun and interesting hack.
Summary of Comments ( 20 )
https://news.ycombinator.com/item?id=44109257
HN commenters largely praised the author's approach to running GPT-2 in WebGL shaders, admiring the ingenuity and "hacky" nature of the project. Several highlighted the clever use of texture memory for storing model weights and intermediate activations. Some questioned the practical applications, given performance limitations, but acknowledged the educational value and potential for other, less demanding models. A few commenters discussed WebGL's suitability for this type of computation, with some suggesting WebGPU as a more appropriate future direction. There was also discussion around optimizing the implementation further, including using half-precision floats and different texture formats. A few users shared their own experiences and resources related to shader programming and on-device inference.
The Hacker News post discussing running GPT-2 in WebGL and GPU shader programming has generated a moderate number of comments, focusing primarily on the technical aspects and implications of the approach.
Several commenters express fascination with the author's ability to implement such a complex model within the constraints of WebGL shaders. They commend the author's ingenuity and deep understanding of both GPT-2 and the nuances of shader programming. One commenter highlights the historical context, recalling a time when shaders were used for more general-purpose computation due to limited access to compute shaders. This reinforces the idea that the author is reviving a "lost art."
There's a discussion around the performance characteristics of this approach. While acknowledging the technical achievement, some commenters question the practical efficiency of running GPT-2 in a browser environment using WebGL. They point out the potential bottlenecks, such as data transfer between the CPU and GPU, and the inherent limitations of JavaScript and browser APIs compared to native implementations. A specific concern raised is the overhead of converting model weights to half-precision floating-point numbers, a requirement for WebGL 1.0. However, another commenter suggests potential optimizations, such as using WebGL 2.0 which supports 32-bit floats.
The topic of precision and its impact on model accuracy is also addressed. Some express skepticism about maintaining the model's performance with reduced precision. They posit that the quantization necessary for WebGL could significantly degrade the quality of the generated text.
A few commenters delve into the technical details of the implementation, discussing topics like memory management within shaders, the challenges of data representation, and the use of textures for storing model parameters. This provides additional insight into the complexity of the project.
Finally, there's a brief discussion about the potential applications of this approach. While acknowledging the current performance limitations, some see promise in using browser-based GPT-2 for specific use cases where client-side inference is desirable, such as privacy-sensitive applications.
In summary, the comments on Hacker News show appreciation for the technical feat of running GPT-2 in WebGL shaders, while also raising pragmatic concerns about performance and accuracy. The discussion provides valuable insights into the challenges and potential of this unconventional approach to deploying machine learning models.