Hello WebGL

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 23, 2013

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`.

AI-generated description

Every introductory WebGL tutorial I could find uses utility libraries (e.g., Sylvester) in efforts to make the examples easier to understand. While encapsulating common patterns is desirable when writing production code, I find this practice highly counterproductive to learning because it forces me to learn the utility library first (another layer of abstraction) before I can understand the underlying standard. Even worse when accompanying examples use minified JavaScript…

So here’s a vanilla Hello World with no dependencies and no branching. Enjoy.

Next: Part II

gpl-3.0 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

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

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

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

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

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

66% match

Loading thumbnail…

Hello Canvas

This example shows an HTML5 canvas that fills its entire 960-by-500 pixel area with a solid red rectangle. The code acquires a 2D drawing context using the canvas `getContext` API, sets the `fillStyle` to red, and calls `fillRect` to cover the full canvas bounds. It serves as a minimal starter template for rendering graphics, with CSS that removes page margins and hides overflow for an immersive full-window display.

CCurran Kelleher

65% match

Loading thumbnail…

test

A simple SVG scene displays a single green rectangle positioned within a larger canvas. The example uses D3.js to append the rectangle to the selected SVG element, setting its width, height, coordinates, and fill color via a single attribute object. The code demonstrates basic D3 selection and shape creation without any data binding or interactive behavior, serving as a minimal starting point for SVG rendering.

AAlexDaGr8

65% match