WebGL Initials Playground

An interactive WebGL project that renders stylized B and A initials and allows real-time manipulation through simple controls.

Live Demo

Open WebGL Initials Playground

Features

• Real-time RGB color control
• X and Y position control
• Independent X and Y scaling
• Contrasting colors between the two initials
• Reset button to restore default settings
• WebGL-based rendering

Technologies

• HTML5
• JavaScript
• WebGL
• GLSL
• MV.js

Project Structure

WebGL-Initials-Playground/
│
├── Common/
│   ├── initShaders.js
│   ├── MV.js
│   └── webgl-utils.js
│
├── index.html
├── main.js
└── README.md

How to Run

1. Download or clone the repository.
2. Open index.html in a WebGL-compatible browser.
3. Use the sliders to change the color, position, and scale of the initials.
4. Use the reset button to restore the default values.

Controls

• Red / Green / Blue: Changes the color of the first initial.
• Position X / Y: Moves the initials horizontally and vertically.
• Scale X / Y: Changes their width and height.
• Reset: Restores the original configuration.

Author

Beyza Arman