mrdoob / glsl-sandbox Goto Github PK
View Code? Open in Web Editor NEWShader editor and gallery.
Home Page: https://glslsandbox.com/
License: MIT License
Shader editor and gallery.
Home Page: https://glslsandbox.com/
License: MIT License
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.
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
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.
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.
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.
A pause button.
Possibly even better if pause button would be one that automatically pauses when rendering takes more than 500ms?
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 ) );
}
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.
Thanks for cleaning this awkward stuff... 👍
it's just an example. And it's just full of these!
Message in log:
echo: http: TLS handshake error from XXX.XXX.XXX.XXX:49350: EOF
#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.
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!
If I run on win OpenGL, how do I need to do it? What is the function of resolution?
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
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".
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
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.
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:
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:
What do you think?
wanted to test one thing quickly but no
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
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.
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
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....
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?
I'm new to Ruby. Please write down the few steps needed to run this locally after cloning.
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... ?
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
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!
https://github.com/mrdoob/glsl-sandbox/blob/master/server/server.go#L166
Add auth middleware to said route.
Are there any save / load features in the works? Was thinking of adding either HTML5 local storage or File API capabilities
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.
Feature request: Include stats.js widget
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?
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..
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?
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.
When is the maintenance mode gonna end? :)
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...
It would be nice to see the most recent changes go live.
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.
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?
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?
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.
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.
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);
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>500 Internal Server Error</title>
</head><body>
<h1>Internal Server Error</h1>
<p>The server encountered an internal error or
misconfiguration and was unable to complete
your request.</p>
<p>Please contact the server administrator at
[no address given] to inform them of the time this error occurred,
and the actions you performed just before this error.</p>
<p>More information about this error may be available
in the server error log.</p>
<hr>
<address>Apache/2.4.7 (Ubuntu) Server at glslsandbox.com Port 80</address>
</body></html>
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.