ShaderScratch

ShaderScratch is an Open-Source project that aims to introduce beginners to Shader programming in a similar fashion to that of Scratch. It also aims to bring some of the neat features of Shadertoy.

setup

Getting the scratch codebase to run locally is a bit of a hassle, with instructions spread across many different files, repositories, wikis and forums, so I thought it'd be a good idea to outline how I managed get everything to work here. I am by no means an expert when it comes to this and have no idea if what worked for me will also work for you, but it should give you a general idea of what you'll need to do.

prerequisites

First of, you'll need node.js to run this, so head over there and grab the installer for the latest recommended version. In the installer, be sure to also check the following checkbox:

This will install a few different tools required by some npm packages, it seems, including the latest version of python 3. You'll also need python 2 however, as the build script for scratch-blocks is not compatible with python 3. So, install that too, add the installation folder to your windows path (if you use linux, idk, you'll have to figure something out yourself) and rename the python.exe file there to python2.exe so you'll then be able to use python 3 as python and python 2 as python2 in the command line:

installing

Next, open git bash in whatever folder you want to use for this and clone the repositories there (with --depth=10, because some large files have accidentally been committed in the past):

git clone https://github.com/ShaderScratch/scratch-gui scratch-gui --depth=10
git clone https://github.com/ShaderScratch/scratch-vm scratch-vm --depth=10
git clone https://github.com/ShaderScratch/scratch-blocks scratch-blocks --depth=10
git clone https://github.com/ShaderScratch/scratch-render scratch-render --depth=10

If you run npm install and then npm start in scratch-gui now, you should already be able to see the gui locally under localhost:8601. At the moment, this only mirrors you changes to scratch-gui though - to test your changes to the other repositories as well, we'll have to build these too and then link them to here.

First of, let's finish setting up the other repositories as well. For scratch-vm and scratch-render, just running npm install there too should already do the trick; for scratch-blocks however, things are a little more complicated. Doing this there should instead give out an error that blockly is incompatible with python 3:

To fix this, open package.json in that folder and replace python with python2 in line 16 to run the build script in the older python version you installed previously instead. Now running npm install again should greet you with a different error message instead:

This is because the total length of the arguments passed to some sort of subprocess or something here exceeds 8 kilobytes, which is the maximum length a command can have in windows (it should work fine on linux though I think, so if you use that you can probably skip this step). We can fix this by replacing all occurences of node_modules\google-closure-library with a shorter path to a symlink - that will bring the length back down below the limit. To do this, run the following command in the main folder you cloned the repositories into:

mklink /D cl scratch-blocks\node_modules\google-closure-library

This should create a symlink named cl that points to the google closure library in the node_modules-folder of scratch-blocks. Now, to shorten the command using this symlink, add the following code as line 331 into scratch-blocks\build.py (that is, just above proc = ...):

args = map(lambda s:s.replace("node_modules\google-closure-library","..\cl"),args)

Now, running npm install in scratch-blocks again should finish without errors too.

linking

Now that all four repositories are successfully installed, the only thing remaining to do is telling npm to use the code from all of those folders in scratch-gui, so our local changes to all of those repositories can be seen and tested there.

To do this, just run npm link in scratch-blocks, scratch-vm and scratch-render each; then, navigate to scratch-gui and run npm link scratch-blocks, npm link scratch-vm and npm link scratch-render there. Now, running npm start again should show you all of your changes on localhost:8601.