mrdoob / glsl-sandbox Goto Github PK

#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main( void ) {

    vec2 position = ( gl_FragCoord.xy / resolution.xy ) - vec2(.5);

    float angle = atan(position.y / position.x) + sign(position.x) * 3.1415 * 0.5;

    // see, this looks almost like atan2
    gl_FragColor = vec4( vec3 (0.5 + angle / 3.1415), 1.0 );

    float rotx = sin(angle * 0.5) * position.x - cos(angle * 0.5) * position.y;

    gl_FragColor = vec4( vec3 (0.5 + 0.5 * cos(rotx * 700.0)), 1.0 );

}

it was saving ok until I changed sin to cos in gl_FragColor = ... line.

won't accept it as new code either.

Message in log:

echo: http: TLS handshake error from XXX.XXX.XXX.XXX:49350: EOF

Could you please add possibility to link shaders as glslsandbox.com/e?12345 instead of glsandbox.com/e#12345 and change the default linking policy to this one?

It would be useful because on reddit links like glslsandbox.com/e#001 glslsandbox.com/e#002 are recognized as one link, so it's impossible to post two links to different shaders in same subreddit.

From time to time the server process uses 100% CPU. In application traces the sqlite library takes most of the CPU consumption.

It seems that WebGL 2.0 is not supported.

http://glslsandbox.com/e#36446.0 gives:

e:787 ERROR: unsupported shader version

while my browsers support WebGL 2.0 and all samples work fine on them.

Is there any open forum or chat room where people go to talk about shaders? Not facebook or google+. Just a discussion forum, like phpbb or equivalent. Without all the baggage + spying and agendas the other ones force upon you..

I couldn't find information of what uniforms are available and what they do. It would be useful to provide a short explanation of each uniform.
From what I found, these uniforms are available:

float time; // Seconds since start.
vec2 mouse; // Mouse position, X and Y 0 to 1, X starts left, Y starts bottom.
vec2 resolution; // Resolution.
sampler2D backbuffer // Texture storing previous rendered image.
vec2 surfaceSize; // ???
??? texture; // ???

What's the function of surfaceSize and texture by the way?
And I know of one varying

varying vec2 surfacePosition;

But I don't know what it does.

what is the sampler2D? is it a black picture? I don't know it at all. If it is a picture, can I find it in the github code?

Are there any save / load features in the works? Was thinking of adding either HTML5 local storage or File API capabilities

I used the following code block:

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;

void main() {
	vec2 st = gl_FragCoord.xy/u_resolution;
	gl_FragColor = vec4(st.x,st.y,0.0,1.0);
}

Using the Book of Shaders editor, it looks like this:

But when I use the glsl sandbox, I get to see a beautiful blaring yellow:
https://glslsandbox.com/e#81113.0

I don't see any errors in the console. I'm using Opera browser Version:85.0.4341.60, and this is my system info:

Operating System: Ubuntu 21.10
Kernel: Linux 5.13.0-40-generic
Architecture: x86-64
Hardware Model: MacBookPro11,4

this has been on my (and perhaps others') mind and it would probably take a day to integrate but adding this here so I might get to do it sometime ;)

uniform float audio;

the idea is to run a spectrum analyzer on some background music and pass in the dynamics as an audio uniform of value between 0 and 1.

and i initially thought of using the audio wrapper I wrote https://github.com/zz85/audiokeys.js but perhaps we could use the soundcloud or echonest api (which is probably easier to host it on heroku, while providing music in the sandbox :) too?

Not sure what the process of submitting to the gallery is, but it would be nice to be able to submit directly from the editor view. Kinda like Codepen.

wanted to test one thing quickly but no

A pause button.

• because some heavy shaders can cause some browsers (safari) to become very unresponsive.

Possibly even better if pause button would be one that automatically pauses when rendering takes more than 500ms?

Recently glslsandbox , shadertoy and some other servers don't respond me(but with using VPN it's working). I guess "U.S sanctions against Iran" caused this( because they now are being returned again) do you follow U.S sanctions or proxies block my request? which country your hosts located in?

Right now the images are saved as data:image streams in the database. This makes the database grow very fast and the gallery page is a bit slow loading as it can not cache images. There is a 240 Mb limit on the free database and we have 140 Mb used right now.

Checking the heroku add-ons I've found Cloudinary. The starter plan seems enough for the page:

• 500 MB Storage
• 1,000 MB Monthly Bandwidth
• 25,000 Images
• Full-featured, no time limit

The code changes are simple and a test version is in my repository.

A problem that we could have is making backups. I make a backup of the database from time to time that is simply a dump of it. With another server for images I'll need to get those too.

I can also think on two ways of moving to use the new images service:

• Make the page read only for some hours and make the image migration to the new server.
• Keep the old effects images in the database and create the new effect images in cloudinary (also migrate the updated effect images)

What do you think?

It would be nice to see the most recent changes go live.

I don't think this matters but I just thought I'd point out that according to the OpenGL ES 2.0 spec a driver is allowed to always succeed at glCompileShader time as long as those errors are caught at glLinkProgram time. In other words you could do

gl.shaderSource(someShader, "bla bla bla");
gl.compileShader(someShader);
var success = gl.getShaderParameter(someShader, gl.COMPILE_STATUS);

And according to the spec it's valid for success to be true as long as later when you call gl.linkProgram and check that gl.getProgramParameter(someProgram, gl.LINK_STATUS) returns false.

I don't know of any drivers that do this, possibly some mobile drivers so it's probably not important but I just thought I'd point it out.

It would be pretty handy to be able to search through the comments section of the code for certain codes. This would make it easier to find codes made by certain artists.

The option to search through code would be nice too. For instance, the other day I was trying to find implementations of barrel distortion.

Having the option to sign in with a Sandbox user account (with maybe an optional link to social media sites) might ease this process a bit. It would also be nice to be able to leave comments on other peoples code some where other than in the code itself. If there existed some sort of comment board linked to each piece of code that would be sweet.

-Matt

I would vote for something along the lines of http://vimeo.com/36579366 (skip to 4:10 but watch the entire thing if you have the time!)

=D

More of a curiosity request than anything. I'm using shadertoy's API to build out an "import from shadertoy" feature on shaderfrog. I could scrape the page source for code, but curious if a simple json API is ever planned? I might look into creating a PR for it if you would be ok launching it.

Previously the process started consuming 100% CPU. See #72

[PANIC RECOVER] http2: stream closed goroutine 32277 [running]:
github.com/labstack/echo/v4/middleware.RecoverWithConfig.func1.1.1(0xb47768, 0x1000, 0x0, 0xbf37f8, 0xc000716820)
	/go/pkg/mod/github.com/labstack/echo/[email protected]/middleware/recover.go:77 +0x105
panic(0xa7cf80, 0xc000020dc0)
	/usr/local/go/src/runtime/panic.go:965 +0x1b9
github.com/mrdoob/glsl-sandbox/server.(*Server).indexRender(0xc000093dc0, 0xbf37f8, 0xc000716820, 0x46a800, 0x12fe42035b02c5, 0x2ea910e8)
	/build/server/server.go:292 +0xa71
github.com/mrdoob/glsl-sandbox/server.(*Server).indexHandler(...)
	/build/server/server.go:189
github.com/labstack/echo/v4.(*Echo).add.func1(0xbf37f8, 0xc000716820, 0xf957a0, 0x2c)
	/go/pkg/mod/github.com/labstack/echo/[email protected]/echo.go:536 +0x62
github.com/labstack/echo/v4/middleware.LoggerWithConfig.func2.1(0xbf37f8, 0xc000716820, 0x0, 0x0)
	/go/pkg/mod/github.com/labstack/echo/[email protected]/middleware/logger.go:117 +0x12c
github.com/labstack/echo/v4/middleware.RecoverWithConfig.func1.1(0xbf37f8, 0xc000716820, 0x0, 0x0)
	/go/pkg/mod/github.com/labstack/echo/[email protected]/middleware/recover.go:98 +0x142
github.com/labstack/echo/v4.(*Echo).ServeHTTP.func1(0xbf37f8, 0xc000716820, 0xc00084a5a0, 0xf)
	/go/pkg/mod/github.com/labstack/echo/[email protected]/echo.go:640 +0x111
github.com/labstack/echo/v4/middleware.redirect.func1.1(0xbf37f8, 0xc000716820, 0x1, 0x1)
	/go/pkg/mod/github.com/labstack/echo/[email protected]/middleware/redirect.go:149 +0x17f
github.com/labstack/echo/v4.(*Echo).ServeHTTP(0xc0000f8400, 0xbec030, 0xc000010130, 0xc0002fa800)
	/go/pkg/mod/github.com/labstack/echo/[email protected]/echo.go:646 +0x2bc
net/http.serverHandler.ServeHTTP(0xc0001580e0, 0xbec030, 0xc000010130, 0xc0002fa800)
	/usr/local/go/src/net/http/server.go:2867 +0xa3
net/http.initALPNRequest.ServeHTTP(0xbecd20, 0xc0002ac090, 0xc00078c380, 0xc0001580e0, 0xbec030, 0xc000010130, 0xc0002fa800)
	/usr/local/go/src/net/http/server.go:3439 +0x8d
net/http.(*http2serverConn).runHandler(0xc0002b4c00, 0xc000010130, 0xc0002fa800, 0xc0002fd428)
	/usr/local/go/src/net/http/h2_bundle.go:5732 +0x8b
created by net/http.(*http2serverConn).processHeaders
	/usr/local/go/src/net/http/h2_bundle.go:5462 +0x505

goroutine 1 [IO wait]:
internal/poll.runtime_pollWait(0x7f57f8e87ac8, 0x72, 0x0)
	/usr/local/go/src/runtime/netpoll.go:222 +0x55
internal/poll.(*pollDesc).wait(0xc0000db318, 0x72, 0x0, 0x0, 0xb0ebf4)
	/usr/local/go/src/internal/poll/fd_poll_runtime.go:87 +0x45
internal/poll.(*pollDesc).waitRead(...)
	/usr/local/go/src/internal/poll/fd_poll_runtime.go:92
internal/poll.(*FD).Accept(0xc0000db300, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0)
	/usr/local/go/src/internal/poll/fd_unix.go:401 +0x212
net.(*netFD).accept(0xc0000db300, 0x203000, 0x7f57f8ad1710, 0x3)
	/usr/local/go/src/net/fd_unix.go:172 +0x45
net.(*TCPListener).accept(0xc00000e8d0, 0xc0001e0bc0, 0x10, 0x8)
	/usr/local/go/src/net/tcpsock_posix.go:139 +0x32
net.(*TCPListener).AcceptTCP(0xc00000e8d0, 0x203000, 0x203000, 0x203000)
	/usr/local/go/src/net/tcpsock.go:248 +0x65
github.com/labstack/echo/v4.tcpKeepAliveListener.Accept(0xc00000e8d0, 0xc00021fc40, 0xd26d788a, 0x65a5041af2923207, 0x0)
	/go/pkg/mod/github.com/labstack/echo/[email protected]/echo.go:955 +0x2f
crypto/tls.(*listener).Accept(0xc00000e8e8, 0xc00021fcc0, 0x18, 0xc000000180, 0x744bdb)
	/usr/local/go/src/crypto/tls/tls.go:67 +0x37
net/http.(*Server).Serve(0xc0001580e0, 0xbeb910, 0xc00000e8e8, 0x0, 0x0)
	/usr/local/go/src/net/http/server.go:2961 +0x285
github.com/labstack/echo/v4.(*Echo).StartAutoTLS(0xc0000f8400, 0xc000024049, 0x5, 0xc000093dc0, 0xc0000f8400)
	/go/pkg/mod/github.com/labstack/echo/[email protected]/echo.go:725 +0x1e5
github.com/mrdoob/glsl-sandbox/server.(*Server).Start(0xc000093dc0, 0x5, 0xc000024049)
	/build/server/server.go:133 +0x93
main.start(0xffffffff, 0xc00006a058)
	/build/server/cmd/glslsandbox/main.go:90 +0x665
main.main()
	/build/server/cmd/glslsandbox/main.go:31 +0x25

goroutine 6 [select, 14 minutes]:
database/sql.(*DB).connectionOpener(0xc000079a00, 0xbecc78, 0xc00012cfc0)
	/usr/local/go/src/database/sql/sql.go:1133 +0xb5
created by database/sql.OpenDB
	/usr/local/go/src/database/sql/sql.go:740 +0x12a

The gallery button acts as a child button
There is no child button, only a parent button
But then the gallery button becomes a child if the hierarchy of edits is long

Odd behavior

I recommend adding a Child next to the Parent button and make the gallery only return to the gallery

The default code that gets loaded when a new effect is created has some pretty bad code for generating the coordinates. It generates coordinates in the range 0..1 on both axes, no matter the size of the window. This causes effects to be stretched in one direction or another under most circumstances.

As this is rarely if ever desired, it should be replaced with a better line, saving people the work of replacing it themselves when they notice their effects look wrong in another browser window.

I suggest the following:

vec2 position=(2.0 * gl_FragCoord.xy - resolution) / max(resolution.x,resolution.y);

This generates coordinates in the range -1..1 on the larger axis, and less on the other. If you want a 0..1 range on the larger axis, this should work, but this is less useful as it is hard to center anything:

vec2 position=gl_FragCoord.xy / max(resolution.x,resolution.y);

https://github.com/mrdoob/glsl-sandbox/actions/runs/5906493826/job/16022642199

Run goreleaser/goreleaser-action@v2
Downloading https://github.com/goreleaser/goreleaser/releases/download/v1.20.0/goreleaser_Linux_x86_64.tar.gz
Extracting GoReleaser
/usr/bin/tar xz --warning=no-unknown-keyword --overwrite -C /home/runner/work/_temp/2f52eab5-e02c-4032-90ac-7108080d7101 -f /home/runner/work/_temp/26dbc5d6-f2d0-45ef-a4d9-194bd7bfed11
GoReleaser latest installed successfully
v0.1.35 tag found for commit '68e4452'
/opt/hostedtoolcache/goreleaser-action/1.20.0/x64/goreleaser release --rm-dist
Flag --rm-dist has been deprecated, please use --clean instead
  • starting release...
  • loading config file                              file=.goreleaser.yml
  ⨯ release failed after 0s                  error=yaml: unmarshal errors:
  line 29: field replacements not found in type config.Archive
Error: The process '/opt/hostedtoolcache/goreleaser-action/1.[20](https://github.com/mrdoob/glsl-sandbox/actions/runs/5906493826/job/16022642199#step:4:21).0/x64/goreleaser' failed with exit code 1

How about letting the gpu take a nap while we're thinking? Currently, it just keeps redrawing & running the battery down even if nothing is changing.

If I run on win OpenGL, how do I need to do it? What is the function of resolution?

I am interested in using GLSL sandbox to develop 2D image filters using GLSL pixel shaders. If I could somehow specify a background image that can be used as input that would be AMAZING!

Thanks for cleaning this awkward stuff... 👍

it's just an example. And it's just full of these!

http://glslsandbox.com/e#51458.0

Hi @mrdoob ,
I have a couple of older shaders from glsl.heroku.com bookmarked for reference. Recently when trying to visit these pages, it reads "Application Error".
Is the server for glsl.heroku.com down, and more importantly - where did all those older fragment shaders go? Can they be retrieved somehow?

I'd like to be able to fork off a new shader even though I'm the owner of the current one. Suppose I'm 100% satisfied with the state of the current shader and want to leave it alone, but I want to go explore some new avenue. The parent/child history is very informative for showing the evolution. Without the owner being able to fork, he's forced to cut/paste the hack into a new shader, thus losing the history...

Hello.

I'd like to do some analysis of a wide variety of GLSL shaders.
Though this project itself is MIT, is there a licence for any shaders uploaded to the service?

Thanks,
James.

here is a diff that fixes it:

diff --git a/build/index.html b/build/index.html
index 1d2b60b..13f76b2 100644
--- a/build/index.html
+++ b/build/index.html
@@ -254,7 +254,8 @@
                if ( currentProgram ) {

                    gl.deleteProgram( currentProgram );
-                   window.location.hash = encodeURIComponent( fragment );
+                   //avoid storing multiple values in the history (so back/prev buttons works properly)
+                   window.location.replace('#'+ encodeURIComponent( fragment ) );

                }

People suck! You try to do something nice and someone always and without fail shits all over you 😢

I find that every shader has algorithms in it, especially some complex shader. Such perlin noise, ray-marching and fbm are hard to find clear and useful articles for me to understand. So is there a book that clearly explaining some basic algorithms used in shader? Or is there any book for a new bird to begin his shader journey?

For the benefit of animated shaders, would it be possible to add a button that resets the uniform time seen by the shader to 0.0? As far as I can tell from index.html, there's presently no way to set parameters.startTime = Date.now() except on page load. Thanks!

Feature request: Include stats.js widget

Ever since Chrome updated to version 28 (Win 7 64bit) there has been inconsistent WebGL crashes in the GLSL sandbox. Try opening
http://glsl.heroku.com/e#9947.1
several times with Chrome 28 on Windows. If it doesn't crash immediately, try Ctrl+F5.

On my own clone of the GLSL editor I get "WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost" warning in the console but I don't see that message when the editor on glsl.heroku.com suddenly says "WebGL is not supported".

You need to mark the examples that require heavy browser usage-
Some examples cause the browser to lock up and you have to reset everything -
not very useful....

I'd like to have the time delta passed in (time from last frame). If a shader makes use of the backbuffer it ought to know the time it was rendered. As it is it's impossible to abstract away the framerate from computations.

This comes up in this shader:
http://glsl.heroku.com/e#7185.30
If I had faster framerate I'd want the smaller copies moving off into the distance to take a smaller step.

Also I'd love an fps display, it would help greatly in tuning code for efficiency.

It's pretty annoying when writing some code and you accidentally enter a "`" character in the editor and the tab crashes.

It doesn't seem to happen in Firefox.

It would be nice to be able to add JavaScript or CoffeeScript code in a separate editor.

I ported the GLSL interface to JSBin for this purpose:
http://jsbin.com/gefuv/127

Perhaps it is just as well to have this extensibility in JSBin, but at least I wanted to let you know.

On my Mac in Chrome I often get this behavior

The issue seems to be the time readout and its effect on how large the toolbar element is (not 100% sure about that but nothing else is changing)

Maybe this is chrome bug?

Affected route is not authorized and is actively being exploited:

https://github.com/mrdoob/glsl-sandbox/blob/master/server/server.go#L166

Solution

Add auth middleware to said route.

There are plenty of shaders on glsl-sandbox that could deter visitors, or make glsl-sandbox inappropriate to use in presentations. The site can be a great learning tool but I'd be hesitant to tell newcomers to check out glsl-sandbox. There is no official code of conduct but would be in good spirit of inclusiveness in the tech community to create one.

I was creating a web app that allows a user to import a shader from an external source by pasting in a link
i first implemented it for shadertoy links, no problems there. But the request to GLSL Sandbox is blocked and failes:

Could this maybe be changed so that external access is allowed?
Should be as simple as adding the Access-Control-Allow-Origin: * header.

I'm new to Ruby. Please write down the few steps needed to run this locally after cloning.

When is the maintenance mode gonna end? :)

Would it be a good idea to add this to the site?

http://creativecommons.org/licenses/by/3.0/

It's a bit sketchy to "modify" the rights of work after it has been done, but I don't know how else to solve this... ?