Switch to full stage
Loading Project
Downloading assets (1/4) …

Instructions

Wait for the project to prerender the passes, and then position your mouse where you want the sun to be! This is a very fast and realistic terrain renderer (especially given it is full 360x360 res), which runs given albedo and heightmap data. This example is Mount Shasta, Siskiyou County, California.

Notes and Credits

REALTIME VERSION ON TURBO WARP: https://turbowarp.org/395531778/fullscreen?turbo How it works: 1) Heightmap data is stored as a list of integers 2) Think of each pixel of being a point on a grid, where the height corresponds to the heightmap. 3) Average the vectors between each pixel and the pixel above that, and each pixel and the pixel below that, such that the vectors face the same y-direction 4) Do the same for the pixels on the left and right of each pixel. You have now constructed two tangent vectors for each point! 5) Given the tangent plane, use a cross-product to find the normal vector, which you have to normalize first. The normals are then stored in a list 6) Each RGB color is stored as a single value in the list, so the separate red, green, and blue components need to be extracted 7) For rendering, choose a 3D vector representing the direction of the light and normalize it. This project then uses the albedo map, multiplies it by the sun's color (of which the lower frequency wavelengths are no longer cutoff by reighleigh scattering and a lower IOR), and multiplies it by the Lambertian reflectance since light will spread across a surface and be less dense in areas where the dot product is closer to 0. This project also approximates sky color, as ambient lighting. A diffuse surface interaction is good enough for this kind of thing, since the specularity will not be seen anyway and would be very very rough and slight anyway.

TurboWarp is a Scratch mod that compiles projects to JavaScript to make them run really fast. Try it out by inputting a project ID or URL above or choosing a featured project below.