![]() In short, it iterates over all of the available API methods and strips out most of the characters in their names. ![]() Luckily there is a common trick to address this issue, described elsewhere as method hashing or mechanised abbreviation. The remainder of the code requires numerous GL API calls, which can make things difficult in minimising the size of the code, as the API methods often have quite verbose names. It then executes the JavaScript payload which performs several tasks, starting with resizing the canvas to fill the entire viewport, and constructing a WEBGL2 context. The data URL constructs a basic HTML page, including a canvas element to render to. The code has been obfuscated quite a bit to fit in the size constraints, so I'll provide a high-level overview to help understand what it's doing. Scroll back up to the iframe above to see it in action. If you have a sufficiently powerful device, such as a desktop computer, you can unlock this by clicking replacing the statement O.yz/=O.w+1e-6 with if(O.w>0.)O.yz/=O.w.changing the magic number 34842 to 34836.In the code, these changes correspond to: It explicitly checks for division by zero (described here). It uses 32-bit float buffers rather than 16-bit, and The video at the top of the page shows a higher accuracy version, which has two minor changes: The code runs a low-accuracy simulation by default, for better compatibility with low-powered mobile devices.įrom my testing, it should work on most Android devices less than five years old, and iOS 15+. If you don't want to manually type in all that text, click "Go!" below to load the URL into an iframe, or tap the URL to copy it to your clipboard so you can paste it in your browser's address bar. (If you're skeptical that it's truly self-contained, feel free to disconnect from the internet first to prove that it doesn't rely on loading any external resources.) I've provided the source code in the form of a data URL to make it easy to run -Īll you need to do is type the code into the address bar of your browser and hit enter! In particular MiniShadertoy which provided a great starting point though lacked support for Shadertoy's multipass buffers,Īnd this entry which contained a couple of other useful techniques. So, I set about wrapping it in the smallest amount of WEBGL boilerplate I could get away with, so that it can run without relying on any remote websites.įor this I took inspiration from some entries to the JS1K contest, However, it was written for Shadertoy, which is a complex webapp in itself, so doesn't quite meet the challenge of making the code self-contained. The tiny fluid simulation I described in my previous post provided the perfect opportunity,Īs the code for the simulator is remarkably short relative to the complex behaviour it exhibits. For some time I've wanted to create something similar to the business card raytracer:Ī piece of code that produces something interesting, but is short enough to fit onto a business card.
0 Comments
Leave a Reply. |