Hello WebGL IV

100%

Hello WebGL IV

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 23, 2013

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.

AI-generated description

Part four of my introduction to WebGL, wherein an image is displayed.

gpl-3.0 Licensed

Similar vizzes

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

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

71% match

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

69% match

Loading thumbnail…

Maiden Webgl Work

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.

11Cr18Ni9

67% match

Loading thumbnail…

Fork of Hello HTML

A simple canvas drawing depicts a dog, a cat, and a plant using basic shapes and colors. The page, titled “Digital Feature Creator,” displays a greeting and renders the scene through the Canvas API, with `getContext('2d')` used for drawing rectangles, paths, and arcs. The scene is static, with no interaction or animation.

Sshailajat1998@gmail.com

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

60% match

Loading thumbnail…

regl-demo

A WebGL triangle rendered with regl animates its background color in a smooth, time-based loop. The vertex shader derives the triangle’s fragment color from its position attributes, producing a gradient across the shape. The example uses `regl.frame` for continuous rendering and `regl.clear` to update the background, demonstrating basic GLSL shader setup and attribute passing with the regl API.

11wheel

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

59% match