iy0yi/shaderboy

Simple text editor that lets you write Shadertoy shaders more comfortably, anytime, anywhere.

ShaderBoy is a simple text editor that lets you write Shadertoy shaders more comfortably, anytime, anywhere. I like writing shaders for Shadertoy, or analyzing other people's esoteric shaders, and I created this especially because I wanted to do that on my smartphone. Whether you're traveling by train or plane, staying in the toilet, fishing or camping, you can write a shader anywhere and anytime. Your power to go.

There are PC version and smartphone version. Both allow you to write shaders with the same variable/function name as Shadertoy. On the PC version, you can fine-tune your shaders with a rich debugging GUI. It also has a recording mode so you can easily save your shader as a movie. The smartphone version consists of a minimal GUI element that assumes the use of a physical keyboards, with a small screen as much coding space as possible.

ShaderBoy uses Google Drive to store your shaders. From any device on which you log in with your Google account, you can continue coding the shader that you last edited.

Enjoy ShaderBoy!

This is not an official Shadertoy application.

Bug reports, feature requests, and 🍺 are welcome.

*iOS ver is WIP. There are many bugs yet. (especially Keymaps, CSS)

App

ShaderBoy is a PWA(Progressive Web Apps).
You can install the app from here.

*Howto: Install Progressive Web App (PWA) natively on Windows/macOS via Chrome Browser

Screenshots

Keymaps

	Smartphone	Windows	Mac
Compile	⌥+ENTER(SPACE)	⌥+ENTER	⌥+ENTER
Play/Pause	⌥+UP	⌥+UP	⌥+UP
Reset time	⌥+DOWN	⌥+DOWN	⌥+DOWN
Move to neighbor buffer	⌥+LEFT/RIGHT	⌥+LEFT/RIGHT	⌥+LEFT/RIGHT
Search	ctrl+F	ctrl+F	⌘+F
Replace	ctrl+H	ctrl+H	⌘+H
Resolution	ctrl+1-4	ctrl+1-4	ctrl+1-4
Font size	ctrl+-/+	ctrl+⇧+⌥+-/+	⌘+⇧+⌥+-/+
Hide/Show WebGL canvas	ctrl+⇧+⌥+V	ctrl+⇧+⌥+V	⌘+⇧+⌥+V
Hide/Show Code & All GUIs	ctrl+⇧+⌥+H	ctrl+⇧+⌥+H	⌘+⇧+⌥+H
Hide/Show Timeline	---	ctrl+⇧+⌥+T	⌘+⇧+⌥+T
Hide/Show Knobs GUI	---	ctrl+⇧+⌥+D	⌘+⇧+⌥+D
Hide/Show iChannel GUI	ctrl+⇧+⌥+A	ctrl+⇧+⌥+A	⌘+⇧+⌥+A
Hide/Show Recording GUI	---	ctrl+⇧+⌥+R	⌘+⇧+⌥+R
Create a new shader	ctrl+⇧+⌥+N	ctrl+⇧+⌥+N	ctrl+⇧+⌥+N
Fork a shader	ctrl+⇧+⌥+F	ctrl+⇧+⌥+F	⌘+⇧+⌥+F
Save shader files	ctrl+S	ctrl +S	⌘+S
Open shader list	ctrl+O	ctrl+O	⌘+O
Mute/Unmute sound	ctrl+M	ctrl+M	⌥+M
Switch header info(FPS/shader name)	ctrl+I	ctrl+I	⌥+I

*And some of Sublime Text bindings by Codemirror.

Features

Compatibility

• Shadertoy uniform variables
• Multipass shader
• Sound shader
• Cubemap shader
• Official assets(textures)
• Official assets(sounds)
• Display compilation time
• Display number of chars
• VR

Supported Shadertoy Uniforms

• uniform vec3 iResolution; // viewport resolution (in pixels)
• uniform float iTime; // shader playback time (in seconds)
• uniform float iTimeDelta; // render time (in seconds)
• uniform int iFrame; // shader playback frame
• uniform float iFrameRate; // number of frames rendered per second
• uniform vec4 iDate; // (year, month, day, time in seconds)
• uniform vec4 iMouse; // mouse pixel coords. xy: current (if MLB down), zw: click
• uniform float iChannelTime[4]; // channel playback time (in seconds)
• uniform vec3 iChannelResolution[4]; // channel resolution (in pixels)
• uniform samplerXX iChannel0..3; // input channel. XX = 2D/Cube
• uniform float iSampleRate; // sound sample rate (i.e., 44100)

GUI/other usefuls

• Timeline GUI(frame based) :PC only
• x24 uniforms with GUI(knob style) :PC only
• supports MIDI controller :PC only
• GUI for Shader list
• GUI for iChannels
• Auto completion(Builtins/User defined funcs, macros, and structs/)
• User manual
• Kindful GUIs
• Inlined Khronos doc
• Snippets for writing SDF(Signed Distance field)
• Multiple editor pane
• Insert value with inlined GUIs.(https://github.com/patriciogonzalezvivo/glslEditor)
• Break point.(https://github.com/patriciogonzalezvivo/glslEditor)

Other

• GoogleDrive
• Export Image shader(WebM/PNG/JPG/GIF)
• Export Sound shader(WAV)
• Witout Google account(Trial mode)
• Syntax highlight
• Import/Exprt JSON (for Shadertoy unofficial plugin)
• Direct import from Shadertoy URL

Build Your ShaderBoy

Install dependencies

If you want have your own ShaderBoy,
Clone this repo and install dependencies.

$ npm install

Build

You then set up a local host for development.

$ npm start

or to build,

$ npm run build

Upload

And upload files in "dest" directory to your server.
That's it! Good luck!

Dependencies

ShaderBoy depends on some awesome js libralies.
Codemirror
CCapture.js
keymaster
css_browser_selector

Contact

iY0Yi

Beer

Paypal.me🍺

shaderboy's Issues

iOS browser

Let me make sure whether only I can not run this on iOS.

I wish shaderboy could run on iPad so that we can play with shaders anywhere! But on my iPad, it does not work yet. I looked into it, then got the following errors from Web inspector.

Environment: iPad Pro 12.9 inch 2nd gen, iOS version 12.2

Just in case, my safari setting is below.

Just let me report this situation, so far. Thanks!

ESC key bug

When you press the Esc key, the last open modal is displayed and cannot be manipulated.

suggestion: read from shadertoy / export Json.

Could it be possible to directly import a shadertoy shader ? ( via the official API, or even via Json files ).
Convertly, could it be possible to save a Json file ( for import in shadertoy via the unofficial plugin ) ?

thanks !

suggestion: menus/buttons rather than "100% key shortcut".

Shaderboy look cool, but it's quite hard to start with, and suppose to use it frequently to remind how to do things, because almost everything is 100% key shortcut based without menus or buttons. ( to execute, save, open the binding panel, knobs, etc ).
I strongly suggest to add buttons and menus.

iSampleRateの件

uniform の iSampleRateが使えないようです。使用するとコンパイルエラーが出ます。

Application does not load

I'm using Opera for Android.
Every time I access shaderboy.net it gets a loading screen that never ends, which is a little suspicious.

Resize event bug

The resize event is not working properly, and WebGL canvas becomes huge.

suggestion: manual + direct links

Even with the keymap list, I don't understand many things. for instance, using the knobs (both GUI side and code side), and many others.
I strongly suggest to add a manual, +direct links to keymap and manual from the coding page.

Request: downgrade google drive access request

Thanks for providing such a nice app!

To make this cool app cooler, can you downgrade google drive access request? Since I was requested all controls for my all files ;)

Anyway, Thanks again!

ShaderBoy can no longer be invoked. / ShaderBoyが立ち上がらなくなりました。

昨日まで使えていたのですが、急にShaderBoyのロゴ画面で止まってしまい、それ以上進みません。Chrome のデベロッパーツールで確認したところ、
Failed to load resource: the server responded with a status of 403 ()
main.min.js:2 Uncaught (in promise) Object
と、なっています。
ロードの失敗のようなのですが対処法がわかりません。
よろしくお願いいたします。