https://github.com/qc20/glsl-shader

This repository contains a WebGL project that demonstrates shader animation using WebGL (Web Graphics Library). The animation is rendered on a full-screen canvas and is powered by custom vertex and fragment shaders.
https://github.com/qc20/glsl-shader

creative-coding css html javascript ui ui-design visualization web

Last synced: about 2 months ago
JSON representation

This repository contains a WebGL project that demonstrates shader animation using WebGL (Web Graphics Library). The animation is rendered on a full-screen canvas and is powered by custom vertex and fragment shaders.

• Host: GitHub
• URL: https://github.com/qc20/glsl-shader
• Owner: QC20
• Created: 2024-06-30T23:49:09.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-06-30T23:57:28.000Z (6 months ago)
• Last Synced: 2024-07-05T05:31:10.426Z (6 months ago)
• Topics: creative-coding, css, html, javascript, ui, ui-design, visualization, web
• Language: JavaScript
• Homepage: https://qc20.github.io/GLSL-Shader/
• Size: 78.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# WebGL Shader Animation

This repository contains a WebGL project that demonstrates shader animation using WebGL (Web Graphics Library). The animation is rendered on a full-screen canvas and is powered by custom vertex and fragment shaders.

## Features

- **Dynamic Animation**: Utilizes WebGL to create real-time animated graphics directly in the browser.

- **Shader Programming**: Custom fragment and vertex shaders (`fs` and `vs` respectively) define the visual effects and animation behavior.

- **Responsive Canvas**: The WebGL canvas dynamically adjusts to fill the entire browser window, ensuring a responsive and immersive viewing experience.

- **Interactive Elements**: Demonstrates shader interactivity with mouse input and time-based animation.

- **Shader Functions**: Includes functions for noise generation (`noise`) and 2D rotation (`rotate2d`) to manipulate shader visuals.

## Technologies Used

- **WebGL**: A JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser.

- **HTML/CSS**: Standard web technologies used to structure and style the page and canvas.

- **JavaScript**: Provides the logic to initialize WebGL, manage shaders, and handle animation updates.

- **Shader Language**: GLSL (OpenGL Shading Language) used for creating custom shaders that define the visual output.

## Usage

To view and interact with the animation:

1. Clone the repository or download the source code.

2. Open the `index.html` file in a WebGL-capable web browser.

3. Explore the animated shader effects rendered in real-time.

4. Resize the browser window to see the responsive canvas in action.

Feel free to explore, modify, and use this project to learn more about WebGL, shader programming, and real-time graphics on the web.