The goal of this project is to provide a set of shader project starter templates for different development environments so that more time can be spent on creating the shader and less time spent on setting up the environment.
The environments are listed below from the fewest dependencies to the most. For example,
the first vanilla-webgl project uses only native JavaScript. It is simple in terms of
everything being in one file, but will be a slower environment in which to develop. Conversely,
the vite-webgl environment has more dependencies and a more complex project structure, but
with Vite's Hot Module Replacement (HMR) the result of your changes are instantly updated
in the browser.
This has been created in a MacOS environment. I'm not sure how these will translate to other operating systems.
This repository is a monorepo of several different self-contained environments. Each folder should be able to be copied outside of this repository and used on its own as a starter environment.
WebGL, or Web Graphics Library, is a JavaScript API that allows you to render interactive 2D and 3D graphics within any compatible web browser without the need for plug-ins. It works by providing an interface to the device's GPU, enabling high-performance graphics rendering directly within web pages using JavaScript.
Use a server like Node's http-server or Python's http.server module to serve the files to the browser.
npx http-server ./vanilla-webgl/src
Vite is a fast build tool. This project uses Vite to serve the project, facilitating fast iteration.
cd vite-webgl
npm run dev
glslify is a tool for managing and bundling GLSL (OpenGL Shading Language) code in a modular way. It allows you to write shaders as reusable, modular pieces by leveraging a CommonJS-like syntax (similar to Node.js’s require/import). This project uses Webpack to compile and serve the project, speeding up iteration.
Run:
cd node-glslify
npx webpack serve
p5.js is a popular JavaScript library for creative coding. It includes support for a shader library.
Use a server like Node's http-server or Python's http.server module to serve the files to the browser.
npx http-server ./p5js-webgl/src
Three.js is a JavaScript library that simplifies the creation of 3D graphics in the browser by leveraging WebGL. It provides an extensive set of tools for rendering, animating, and interacting with 3D scenes, including support for geometries, materials, lighting, and cameras.
cd threejs-webgl
npm run dev
ModernGL is a high-level Python wrapper for OpenGL that simplifies the process of creating and managing OpenGL contexts and rendering graphics.
Shadertoy is a popular online platform for creating and sharing WebGL shaders.
Go to https://www.shadertoy.com/new, paste in the following code, and run:
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
fragColor = vec4(uv.x, uv.y, 0.5, 1.0);
}
If you'd like to contribute a new environment to this repository, then please fork this repository and make a pull request. Your PR should have a new folder that represents the environment and its organization should be in line with how this repository is already organized. The code in the project should be idiomatic to that environment - that is to say it should be formatted in the way that developers using that environment are used to. Additionally, the shader should match the screenshot at the top of the README that has been implemented in all other environments.
The original work in this project is marked with CC0 1.0
Licenses belonging to other third-party code referenced or included in this repository supersede this license. This includes but is not limited to the following licenses: