Porting an OpenGL game to WebAssembly using Emscripten, while theoretically straightforward, presented several unexpected challenges. The author encountered issues with texture formats, particularly compressed textures like DXT, necessitating conversion to browser-compatible formats. Shader code required adjustments due to WebGL's stricter validation and lack of certain extensions. Performance bottlenecks emerged from excessive JavaScript calls and inefficient data transfer between JavaScript and WASM. The author ultimately achieved acceptable performance by minimizing JavaScript interaction, utilizing efficient memory management techniques like shared array buffers, and employing WebGL-specific optimizations. Key takeaways include thoroughly testing across browsers, understanding WebGL's limitations compared to OpenGL, and prioritizing efficient data handling between JavaScript and WASM.
Vincent Woo created an interactive 3D model of San Francisco's Sutro Tower using the Gaussian Splatting technique. This allows users to virtually explore the intricate structure of the tower with impressive detail and smooth performance in a web browser. The model is based on a real-world point cloud captured with lidar, offering a realistic and immersive experience of this iconic landmark.
Hacker News users generally praised the Sutro Tower 3D model, calling it "amazing," "very cool," and "impressive." Several commenters appreciated the technical aspects, noting the clever use of Gaussian Splats and the smooth performance even on mobile devices. Some discussed the model's size and loading time, with one suggesting potential optimizations like level-of-detail rendering. Others compared it to other 3D capture techniques like photogrammetry, pointing out the differences in visual style and data requirements. A few commenters also shared personal anecdotes about Sutro Tower, reflecting on its iconic presence in San Francisco.
Skies-ADSB 2.0 is a web application that visualizes real-time aircraft positions in 3D using data from ADS-B receivers. It features a globe view with customizable map layers, detailed aircraft information including photos and flight history, and the ability to filter by various criteria like altitude and aircraft type. The app is open-source and built with React, Three.js, and Node.js, offering a user-friendly interface for exploring live air traffic around the world.
Hacker News users discussed the performance and features of the Skies-adsb project. Several commenters praised the impressive 3D visualization and smooth performance, particularly highlighting the use of WebGPU. Some expressed interest in the project's data sources and filtering capabilities, inquiring about handling noisy or inaccurate ADS-B data. Others suggested potential improvements, including adding features like historical flight tracking and aircraft information displays. The developer actively engaged with commenters, responding to questions and acknowledging suggestions for future development. Discussion also touched on the broader ADS-B ecosystem, with mentions of other tracking software and the challenges of reliable data reception.
Jesse van der Pluijm has created a web-based 3D global topography explorer using CesiumJS and elevation data from Mapzen. The interactive globe allows users to smoothly zoom and pan around the world, viewing terrain in realistic detail. It features adjustable vertical exaggeration to emphasize mountainous regions and an optional atmospheric scattering effect for added realism. The project is open-source and available on GitHub.
HN users generally praised the 3D topography explorer for its smoothness, intuitive interface, and interesting data visualization. Several commenters appreciated the technical details provided by the creator, specifically around data sourcing and rendering techniques. Some suggested potential improvements, including adding features like location search, elevation profiles, and different map projections. Others discussed the challenges of representing elevation accurately on a globe and the trade-offs involved in different visualization methods. A few users shared their enjoyment in exploring specific locations using the tool.
RetroFab lets you experience classic electronic games like handheld LCD titles and LED tabletop games in a new way. It provides playable 3D simulations of these vintage devices, complete with accurate logic and visuals, capturing the charm of the original hardware. Users can browse a library of built-in games or even design and play their own creations using a visual editor, effectively emulating the experience of building circuits for these devices. RetroFab aims to preserve and share the joy of these often-forgotten gaming experiences in an interactive and accessible format.
Hacker News users discussed RetroFab's impressive emulation accuracy and attention to detail, particularly regarding the CRT simulation. Some debated the value of simulating the imperfections of older hardware, with some arguing it enhances the nostalgic experience while others found it unnecessary or even detrimental. Several commenters expressed excitement about using the software for educational purposes, like teaching electronics and reverse engineering. The legality of distributing ROMs was also touched upon, with a reminder that users are responsible for acquiring ROMs legally. Finally, there was praise for the developer's technical skills and the use of WebGL for accessibility. Some wished for features like save states and improved UI navigation, but overall, the response was positive, appreciating the unique approach to emulation.
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.
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.
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.
Post-processing shaders offer a powerful creative medium for transforming images and videos beyond traditional photography and filmmaking. By applying algorithms directly to rendered pixels, artists can achieve stylized visuals, simulate physical phenomena, and even correct technical imperfections. This blog post explores the versatility of post-processing, demonstrating how shaders can create effects like bloom, depth of field, color grading, and chromatic aberration, unlocking a vast landscape of artistic expression and allowing creators to craft unique and evocative imagery. It advocates learning the underlying principles of shader programming to fully harness this potential and emphasizes the accessibility of these techniques using readily available tools and frameworks.
Hacker News users generally praised the article's exploration of post-processing shaders for creative visual effects. Several commenters appreciated the technical depth and clear explanations, highlighting the potential of shaders beyond typical "Instagram filter" applications. Some pointed out the connection to older demoscene culture and the satisfaction of crafting visuals algorithmically. Others discussed the performance implications of complex shaders and suggested optimization strategies. A few users shared links to related resources and tools, including Shadertoy and Godot's visual shader editor. The overall sentiment was positive, with many expressing interest in exploring shaders further.
Ratzilla is a playful demo showcasing a technical experiment in real-time 3D rendering within a web browser. It features a giant rat model, humorously named "Ratzilla," stomping around a simplified cityscape. The project explores techniques for efficient rendering of complex models using WebGPU, a new web standard offering direct access to the device's graphics processing unit (GPU). The demo aims to push the boundaries of what's possible in web-based graphics while maintaining acceptable performance. Though still a prototype, Ratzilla demonstrates the potential of WebGPU for creating compelling and interactive 3D experiences directly within the browser, without the need for plugins or external applications.
HN commenters were impressed with Ratzilla's performance and clever approach to pathfinding using a tiny neural network. Several questioned the practical applications beyond the demo, wondering about its suitability for real-world robotics and complex environments. Some discussed the limitations of the small neural network and potential challenges in scaling the project. Others praised the clear and concise explanation provided on the project's website, along with the accessibility of the demo. A few users pointed out the similarities and differences with other pathfinding algorithms like A*. Overall, the comment section expressed admiration for the technical achievement while maintaining a pragmatic view of its potential.
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.
Gingerbeardman's blog post presents an interactive animation exploring the paths of two slugs crawling on the surface of a cube. The slugs start at opposite corners and move at the same constant speed, aiming directly at each other. The animation allows viewers to adjust parameters like slug speed and starting positions to see how these changes affect the slugs' paths, which often involve spiraling towards a meeting point but never actually colliding. The post showcases the intriguing mathematical problem of pursuit curves in a visually engaging way.
HN users generally enjoyed the interactive animation and its clean, minimalist presentation. Several commenters explored the mathematical implications, discussing the paths the slugs would take and whether they would ever meet given different starting positions. Some debated the best strategies for determining collision points and suggested improvements to the visualization, such as adding indicators for past collisions or allowing users to define slug speeds. A few commenters also appreciated the creative prompt itself, finding the concept of slugs navigating a cube intriguing. The technical implementation was also praised, with users noting the smooth performance and efficient use of web technologies.
Summary of Comments ( 15 )
https://news.ycombinator.com/item?id=43218998
Commenters on Hacker News largely praised the author's clear writing and the helpfulness of the article for those considering similar WebGL/WebAssembly projects. Several pointed out the challenges inherent in porting OpenGL code, especially around shader precision differences and the complexities of memory management between JavaScript and C++. One commenter highlighted the benefit of using Emscripten's WebGL bindings for easier texture handling. Others discussed the performance implications of various approaches, including using WebGPU instead of WebGL, and the potential advantages of libraries like glium for abstracting away some of the lower-level details. A few users also shared their own experiences with similar porting projects, offering additional tips and insights. Overall, the comments section provides a valuable supplement to the article, reinforcing its key points and expanding on the practical considerations for OpenGL to WebAssembly porting.
The Hacker News post "OpenGL to WASM, learning from my mistakes" (linking to an article about porting OpenGL to WebGL) has a moderate number of comments, sparking a discussion around various aspects of WASM, WebGL, and graphics programming. Several commenters offer their own experiences and insights related to the author's journey.
One compelling thread focuses on the complexities and nuances of WebGL. One commenter points out the challenges in handling WebGL contexts, especially in multi-threaded environments, highlighting how seemingly simple actions like clearing the screen can become problematic due to context switching. This spurred further discussion about the asynchronous nature of WebGL and the difficulties it presents. Another commenter discusses the limitations of WebGL, particularly regarding compute shaders and other advanced features that are available in native OpenGL, emphasizing the trade-offs involved in targeting the web.
Another key area of discussion revolves around the performance characteristics of WASM and JavaScript for graphics-intensive tasks. One commenter questions the performance benefits of using WASM for this specific use case, suggesting that JavaScript might be sufficiently optimized for many 2D or simpler 3D applications. This prompted a counter-argument referencing the potential for WASM to leverage SIMD instructions and other low-level optimizations that can provide substantial speedups, especially for complex computations and algorithms commonly found in 3D graphics.
A few commenters share their own experiences and alternative approaches to web-based graphics programming. One mentions using libraries like Emscripten and its OpenGL support, emphasizing the ease of porting existing C/C++ codebases. Another suggests exploring WebGPU as a more modern and performant alternative to WebGL, highlighting its advantages in terms of features and access to modern hardware capabilities.
Finally, several comments directly address the author's experiences and choices detailed in the linked article. Some offer specific advice related to memory management and data transfer between JavaScript and WASM, while others commend the author for sharing their learning process and the valuable insights gained from the porting effort.