Skip to content

Commit

Permalink
Update README
Browse files Browse the repository at this point in the history
  • Loading branch information
dfranx committed Sep 2, 2020
1 parent d1050c4 commit 44e1353
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 27 deletions.
Binary file removed Misc/Logo/arkaos.png
Binary file not shown.
Binary file removed Misc/Logo/wogos.png
Binary file not shown.
68 changes: 41 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
# SHADERed

SHADERed is a lightweight tool for creating and testing **HLSL and GLSL shaders**. It is easy to use,
open source, cross-platform (runs on Windows & Linux - HLSL shaders work on both OSes) and -frequently updated with new features.
SHADERed is a lightweight tool for writing and debugging shaders. It is easy to use,
open source, cross-platform (runs on Windows, Linux & [Web](https://shadered.org/template) -
HLSL shaders work on all three platforms) and frequently updated with new features.

<img src="./Misc/Screenshots/IMG2.png"/>
<img src="https://shadered.org/assets/img/header.png"/>

## Features

### Shader debugger
Shader debugger is the newest addition to SHADERed. It is simple to use - you just pause the preview and select the pixel that you are interested in. After starting the debug process, you will be able to:
Shader debugger lets you find bugs in your shader. It is simple to use - you just pause
the preview and select the pixel that you are interested in. After starting the debugger,
you will be able to:
* step through your shader code line by line
* place breakpoints
* run immediate expressions
* add watches
* place (conditional) breakpoints
* see list of all variables and their values
<img src="https://shadered.org/img/gallery/seddbg_watch_vars.gif"/>
<img src="https://shadered.org/assets/img/debugger.gif"/>

### Compute & geometry shaders
You are not limited to vertex and pixel shaders. SHADERed also has support for compute & geometry
Expand All @@ -28,20 +33,28 @@ You can also add **compute pass**es alongside normal shader passes:
</p>

### Plugin API
You can develop your own SHADERed plugins (which I currently don't suggest since I still need to change a lot of things) or download and install some plugins.
You can develop your own SHADERed plugins and upload them to our database
so that they can be installed through SHADERed: [link](https://shadered.org/addons).

To see the plugin API's potential, check out:
* [GodotShaders](https://github.com/dfranx/PluginGodotShaders) - adds support for Godot's shading language
* [ShadertoyImporter](https://github.com/dfranx/PluginShadertoy) - makes loading Shadertoy project a super easy task
* [GodotShaders](https://shadered.org/plugin?id=godotshaders) - adds support for Godot's shading language
* [ShadertoyImporter](https://shadered.org/plugin?id=shadertoyimport) - makes loading Shadertoy project a super easy task
* [GIFCapture](https://shadered.org/plugin?id=gifcapture) - SHADERed plugin that adds the ability to capture GIFs
* [Slang](https://shadered.org/plugin?id=slang) - SHADERed plugins that adds support for Slang shader language

You can download them through the [shadered.org](https://shadered.org/store/plugins.php) website too.
You can download them through the [shadered.org](https://shadered.org/addons) website or through SHADERed's "Browse online" window.

### See changes instantly
There are different ways to recompile your shaders. You can press F5 to manually recompile your shader, make it recompile shaders on file modify event (which then allows you to use external editors) or make it recompile changed and nonsaved shaders every 200ms:
There are different ways to compile your shaders. You can: press F5 to
manually recompile shader, make it recompile shaders on file modify
event (which then allows you to use external editors) or make it recompile
shaders when content in built-in text edtior changes:
<img src="./Misc/Screenshots/instantresult.gif">

### Render states
You can modify rasterizer, blend and depth-stencil states. Using these states you can: turn on wireframe mode,
disable depth test, use stencil buffer, disable culling, custom blending, etc... All these things help you achieve even more advanced effects.
You can modify rasterizer, blend and depth-stencil states. Using these states you
can: turn on wireframe mode, disable depth test, use stencil buffer, disable culling,
custom blending, etc... All these things help you achieve even more advanced effects.

### 3D models, textures (2D, 3D, cubemaps) & audio files
You can add music and create amazing visualizers!
Expand All @@ -55,21 +68,27 @@ Load textures from files and bind them to your shader. SHADERed also supports cu
</p>

### Render textures
You can render your scene to render textures. You can bind multiple render textures to one shader pass. This can help with creating G-Buffer and similar things more easily. You can modify these render texture properties: size, format & clear color
You can render your scene to render textures. You can bind multiple render textures as output
to one shader pass. This helps with creating G-Buffer and similar things.
You can modify these render texture properties: size, format & clear color
<p align="center">
<img width="220" src="./Misc/Screenshots/multiplert.jpg">
</p>

### Shader input variables
You can create your own variables and edit their values in real time. SHADERed also comes with lots of built-in 'system' shader variables (elapsed time, window size, various
view matrices, etc...).
You can also change shader variable value only for a specific 3D object - no programming required.
You can create your own variables and edit their values in real time. SHADERed also
comes with lots of built-in 'system' shader variables (elapsed time, window size,
various view matrices, etc...).
You can change shader variable value only for a specific 3D object - no
programming required.
<p align="center">
<img width="400" src="./Misc/Screenshots/itemvarvalue.gif">
</p>

### Zooming in & pausing
Do you need to zoom in on an area of your shader output? You can do that by holding ALT and selecting the area you want to zoom in. This can be useful when developing antialiasing shaders. It is also possible to pause the time
Do you need to zoom in on an area of your shader output? You can do that by
holding ALT and then selecting the area you want to zoom in. This can be useful
when developing antialiasing shaders. It is also possible to pause the time
<p align="center">
<img width="400" src="./Misc/Screenshots/zoomin.gif"><br/>
<em>Shader made by <a href="https://www.youtube.com/channel/UCcAlTqd9zID6aNX3TzwxJXg">The Art Of Code</a></em>
Expand Down Expand Up @@ -206,22 +225,17 @@ Run:
4. Open the .sln and build the project!

## Tutorial
Don't know how or where to start? The debugger is confusing? Want to create your own shader or custom SHADERed theme? Visit [TUTORIAL.md](TUTORIAL.md) to see
detailed steps on how to do these things.

## Used by
[<img width="250" src="./Misc/Logo/arkaos.png">](https://www.arkaos.com/)

[<img height="100" src="./Misc/Logo/wogos.png">](https://www.theWogos.com/)
Don't know how or where to start? The debugger is confusing? Want to create your own
shader or custom SHADERed theme? Visit [the official documentation](https://shadered.org/docs/index.html)
to see detailed steps on how to do these things.
Or you can watch the video tutorials on [YouTube](https://www.youtube.com/watch?v=vuJLpnL73As&list=PLK0EO-cKorzRAEfwHoJFiIldiyiyDR3-2).

## Screenshots
![](./Misc/Screenshots/screen1.jpg)
<em>Shader made by <a href="https://www.youtube.com/channel/UCcAlTqd9zID6aNX3TzwxJXg">The Art Of Code</a></em>

![](https://user-images.githubusercontent.com/3957610/64245795-e54b0680-cf0b-11e9-8799-ea7ace785190.png)

![](https://shadered.org/img/themes.png)

Send your own screenshots [here](https://github.com/dfranx/SHADERed/issues/8)!

## Dependencies
Expand Down

0 comments on commit 44e1353

Please sign in to comment.