Skybox

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 24, 2013

A stereographic projection of a skybox texture maps the six faces of a cube onto a navigable 2D view, rendered as an animated WebGL canvas. The fragment shader inversely projects each pixel to the cube’s surface, applying rotation and translation uniforms to simulate camera movement. Texture images (xpos.png, ypos.png, etc.) are loaded via a D3 queue and bound as a cube map, while vertex and fragment shaders are compiled with the experimental WebGL context API.

AI-generated description

This is probably not how you’re supposed to implement a skybox… but it appears to work. Texture by Keith Lantz.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Raster Reprojection of panorama images (360°) with WebGL

This interactive WebGL visualization reprojects a 360-degree equirectangular panorama image into the stereographic projection, enabling smooth zoom and pan interactions. It displays the source panorama as a textured plane, with the fragment shader performing inverse stereographic projection and rotation calculations in real time. The implementation uses d3.v3 for DOM and event handling, while raw WebGL shaders manage the rendering pipeline, including a custom vertex-fragment shader pair and texture mipmapping. The code compiles shaders, sets up a position buffer for a fullscreen quad, and updates uniform variables for translation, scale, and rotation based on user input.

PPhilippe Rivière

64% match

Loading thumbnail…

nyc map

This example displays three rotating three-dimensional cubes on a gray background, each spinning continuously around its x- and y-axes. Built with Three.js and rendered to a Canvas via WebGL, the scene uses a perspective camera and directional lighting to give the geometric shapes depth. The cubes are created with `THREE.BoxGeometry` and `MeshPhongMaterial`, and the animation loop uses `requestAnimationFrame` to update rotations over time.

Ssabrinamochi

62% match

Loading thumbnail…

Rotating Cube

A rotating steel-blue cube appears in a Three.js scene, with its vertical and horizontal rotation controlled by two range sliders. The example builds a basic scene with a `PerspectiveCamera`, `BoxGeometry`, and `MeshBasicMaterial`, then adds an `EdgesGeometry` wireframe to highlight the cube’s edges. It is based on the Three.js “Creating a scene” guide and uses the library’s `WebGLRenderer` for canvas-based rendering, with no external data source.

FFrissAnalytics

62% match

Loading thumbnail…

sketch 02

A 3D block model rotates in a dark WebGL scene, its dimensions adjustable in real time through a dat.GUI control panel. The sketch uses Three.js with a perspective camera and OrbitControls, rendering both wireframe and flat-shaded materials to highlight the box’s edges and surfaces. Animate continuously rebuilds the geometry from parametric width, depth, and height inputs, while the directional and ambient lights define the form. The code does not load external data, relying instead on procedural geometry and interactive user sliders.

BBillyBHWong

62% match

Loading thumbnail…

Milky Way

This visualization displays a 360-degree panorama of the Milky Way, captured by the European Southern Observatory, reprojected onto a stereographic projection to simulate the night sky as seen from Earth. The interactive animation rotates the view over time, allowing exploration of the entire celestial sphere. Built using WebGL and custom shaders, the code compiles vertex and fragment shaders to perform the inverse stereographic projection and image texture mapping in real time. The source equirectangular image is loaded as a texture, with mipmaps enabling accurate rendering during continuous motion.

Mmbostock

60% match

Loading thumbnail…

My first Three.js app

A green cube spins slowly, rendered against a black background. The example demonstrates a minimal Three.js scene. It uses a `PerspectiveCamera` and a `WebGLRenderer` to draw a box geometry with a `MeshBasicMaterial`. The cube’s rotation is updated in a `requestAnimationFrame` loop, with horizontal and vertical velocities that accumulate random jitter, producing a slightly wobbly, organic motion. A second version shows the cube as a white wireframe.

11wheel

60% match

Loading thumbnail…

Isometric

A grid of white cubes is rendered on a canvas, each rotating around its vertical axis. The rotation angle for each cube is determined by the sine of the elapsed time plus a value derived from its grid position, creating a subtle, wave-like variation across the display. The animation is driven by d3-timer, while a custom isometric projection library handles the 3D-to-2D transformation by projecting vertices onto the canvas using a fixed camera angle.

Mmbostock

59% match

Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example shows a continuously rotating and reprojecting world map rendered onto a canvas texture inside a 3D A-Frame scene. It demonstrates how geographic data can be integrated with WebVR-style environments, drawing country polygons, graticules, and the sphere outline using D3 v4’s `d3.geoMercator` projection, `d3.geoPath`, and `d3.geoGraticule`. The animation runs via `d3.timer`, updating the projection rotation each frame and clearing/redrawing the canvas context. The map uses GeoJSON world land data loaded from `land.geojson` and displays alongside a simple A-Frame box primitive.

AAlexanderDavidson

59% match