Maiden Webgl Work

100%

Maiden Webgl Work

✓ Published0🌍 Public

Last edited Apr 25, 2019

Created on Apr 25, 2019

This WebGL example demonstrates real-time interactive 2D shape manipulation, showing a rectangle that users can translate, rotate, and scale through a dat.GUI control panel. The code builds a custom vertex and fragment shader pair that handles position transformation, converting pixel coordinates to clip space, while WebGL renders the colored rectangle on a canvas. It references WebGL Fundamentals' scaling lesson and uses the webgl-utils helper library to compile shaders, with all geometry defined as raw vertex data in a buffer.

AI-generated description

Maiden webgl show.

Refered from https://webglfundamentals.org.

mit Licensed

Similar vizzes

Loading thumbnail…

Hello WebGL II

This example demonstrates vertex-color interpolation in WebGL by rendering a square with different colors bound to each corner. Using the canvas element’s WebGL context, it compiles separate vertex and fragment shaders as text. The shaders define a `varying` color variable that smoothly interpolates RGBA values across the shape. The code explicitly binds two vertex attribute arrays—positions and colors—and draws the square as a triangle fan, illustrating low-level GPU rendering without external libraries.

Mmbostock

70% match

Loading thumbnail…

Hello WebGL III

This example demonstrates WebGL’s ability to generate a gradient directly on the GPU, where the fragment shader colors each pixel based on its x and y coordinates relative to the canvas size. Using a minimal vertex shader and a full-screen triangle fan, it renders a smooth color transition without any external data. The code compiles and links shaders manually via the WebGL API, sets uniform and attribute locations, and calls `drawArrays` to produce the final image.

Mmbostock

69% match

Loading thumbnail…

shader gear

A real-time shader playground renders a series of WebGL fragment shaders as animated, full-screen visuals. The examples include smoothstep line plotting, mouse-interactive RGB gradients, distance-field circles, rotating polygon shapes with animated sides, and color-mixing loops—all driven by the uniform u_time. Shown side by side, they demonstrate how different GLSL functions shape geometry, color, and motion.

11wheel

68% match

Loading thumbnail…

Hello WebGL

This example shows a solid green square rendered across the entire canvas using raw WebGL, with no external utility libraries or dependencies. The code manually compiles a vertex shader and a fragment shader from embedded script tags, creates a program, and defines a position buffer with four corner coordinates. It draws the square as a triangle fan using `context.drawArrays`, targeting a WebGL context obtained via `canvas.getContext("webgl")` with a fallback to `experimental-webgl`.

Mmbostock

68% match

Loading thumbnail…

Hello WebGL IV

This example demonstrates WebGL fragment shaders rendering a digital image of a mandrill onto a canvas. The page compiles a vertex shader and a fragment shader, then uses the shader program to display the image as a texture on a square. It pulls the image data from a local `mandrill.jpg` file and uses the Canvas `getContext("webgl")` API to draw the textured quad with a `TRIANGLE_FAN`. The code explicitly manages buffers, shaders, and textures through the low-level WebGL context.

Mmbostock

67% 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

66% match

Loading thumbnail…

Simple Water Simulation

This example shows a simple water simulation rendered as a full-screen, animated canvas. A static, blue gradient fill is applied based on the texture coordinate’s y-position, creating a uniform water-like surface. The piece uses the WebGL API directly via JavaScript, compiling custom vertex and fragment shaders to control geometry and color. It draws a single quad as a triangle strip and continuously re-renders it via `requestAnimationFrame`, though the color does not change over time.

Nnandugali

65% match

Loading thumbnail…

Three.js Geometry Browser

This interactive Three.js example demonstrates a real-time 3D geometry explorer, allowing users to cycle through and modify a variety of parametric shapes, including boxes, cylinders, and custom polyhedra like the gem form. It shows how wireframe overlays and solid meshes update together as parameters change. The code relies on the Three.js library, using `PolyhedronGeometry`, `WireframeGeometry`, and `OrbitControls` for camera interaction, while `dat.gui` provides the control panel for adjusting geometry dimensions and segmentation. Rendering is handled through WebGL with continuous animation, and a separate HTML link opens the scene in a new window.

BBillyBHWong

65% match