https://github.com/anuraghazra/shaderexpo

WebGL Shader Playground.
https://github.com/anuraghazra/shaderexpo

awesome-webgl glsl-sandbox live-shader-editor shader shader-editor webgl webgl-experiments webgl-programming webgl-shader

Last synced: 2 months ago
JSON representation

WebGL Shader Playground.

• Host: GitHub
• URL: https://github.com/anuraghazra/shaderexpo
• Owner: anuraghazra
• License: gpl-3.0
• Created: 2019-03-22T11:07:24.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-11-17T06:02:49.000Z (about 5 years ago)
• Last Synced: 2024-10-11T13:31:14.929Z (3 months ago)
• Topics: awesome-webgl, glsl-sandbox, live-shader-editor, shader, shader-editor, webgl, webgl-experiments, webgl-programming, webgl-shader
• Language: JavaScript
• Homepage: https://anuraghazra.github.io/ShaderExpo
• Size: 7.42 MB
• Stars: 29
• Watchers: 4
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Shader Expo

[![License: GPL v3](https://img.shields.io/github/license/anuraghazra/ShaderExpo.svg)](https://github.com/anuraghazra/ShaderExpo/blob/master/LICENSE)

![GitHub last commit](https://img.shields.io/github/last-commit/anuraghazra/ShaderExpo.svg)

![Maintenance](https://img.shields.io/maintenance/yes/2019.svg)

:sunrise: :rainbow:

WebGL Shader Playground.

`ShaderExpo` is purely dependency free shader editor made in Raw WebGL API.

Experiment with basic webgl shaders on the fly.

Checkout [ShaderExpo Case Study](https://anuraghazra.github.io/case-studies/shader-expo)

## :file_folder: Features

- Rich CodeEditor

- Simple CodeEditor

- AutoCompletion

- Live Editing

- Basic Debugging

## Auto Completion

![AutoCompletion](./assets/screenshots/auto-completion.png)

## Inline Errors

![Inline-Errors](./assets/screenshots/inline-erros.png)

## Basic Meshes

![Basic-Meshes](./assets/screenshots/basic-meshes.png)

## Texture and Custom OBJ Model Loading

![Texture-Model-Loading](./assets/screenshots/texture-model-loading.png)

## Example Shaders

![Example-Shaders](./assets/screenshots/example-shaders.png)

-----------------

## :necktie: Avialable Uniforms

| **Name**      | **Type**   |    Description    |

| ------------- | ---------- | ----------------- |

| uWorldMatrix  | mat4       | I don't know |

| uViewMatrix   | mat4       | I don't know |

| uProjMatrix   | mat4       | I don't know |

| uTime         | float      | current frame time        |

| mouse         | vec2       | mouse postion |

| resolution    | vec2       | canvas width, height|

| viewPos       | vec3       | camera position|

| texture       | sampler2D  | default diffuse texture|

### :game_die: Third Party Libs

- Ace

### :memo: TODO

- [x] Add 3D Models

- [x] More Shader Variables

- [ ] Saving Shaders

- [ ] OOP

 

-----------------

Contributions are welcome.

Example Shaders are taken from https://glslsandbox.com

:star: Support the project by giving it a star :star:

## :octocat: Author

- [email protected]

- https://anuraghazra.github.io

Made with :heart: and JavaScript