Is there a way to get the backbuffer as a sampler2D uniform?

Was on the shapes page http://thebookofshaders.com/07/
editing the polar curve design just above the bottom triangle, uncommented the line
"// f = smoothstep(-.5,1., cos(a*10.))*0.2+0.5;"
and edited the "-.5" with the slider widget, got an error when it went positive and back negative again, the slider widget added another "-" sign and a 0 before the '-.5' resulting in '--0.5'

also side note - japanese dude is making a interesting webgl editor using this repo called 'shaderninja'
http://www.shallway.ninja/shaderninja_editor

Edit: Sorry this was meant for the Blender glsl plugin.. i clicked on the wrong repo before writing the comment!!

Hi, i never got into github, so i am not familiar with making suggestions the proper way..
What i cam here to say:
there is a newer approach to copy data from buffers: https://developer.blender.org/D7053

basically changing lines 194, 195, 196 to:

buffer = bgl.Buffer(bgl.GL_FLOAT, self.width * self.height * 4)
bgl.glReadBuffer(bgl.GL_BACK)
bgl.glReadPixels(0, 0, self.width, self.height, bgl.GL_RGBA, bgl.GL_FLOAT, buffer)

and 207 to:
image.pixels.foreach_set(buffer)

makes everything much faster..

hiya - looking at the source I'm guessing it's not currently possible to use the webcam as a texture.
I can see it would be fairly easy to hack in e.g. by a ".webcam" extension, but I'm wondering what people thought of this?
Additionally, I would like to get access to the texture elements that are created - is this possible. (e.g so I can change the various parameters including CSS).

the demos in the readme look pretty outdated. Would be nice if they could be updated to reflect the new UI and features

Hello, could we not register the undo history when we change the value with the widget? It would be nice if it registers only the last value we input. Thanks.

I try write shaders using standard ES 300 and above. But when I try I have error

#version directive must occur before anything else, except for comments and white space

Also in editor I have next message

x 'in' : storage qualifier supported in GLSL ES 3.00 and above only

You need add WebGL v3 and above shader version.

I try look code to reedit, but it`s take long time to study it.

Seeing this in the console logs on Chrome whenever I try to generate a link to send to my Openframe.

getContent returns the editor content, whether it compiles or not.
I would like to have a function which returns a shader only if it compiles without errors.
And a function returning true if a new successful shader version is available

Can't install glslEditor from error - it throws an error:

C:\WINDOWS\system32>npm install glslEditor --save
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]: V0 is gone and the best V1 polyfill is now @ungap/custom-elements
npm WARN deprecated [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path C:\WINDOWS\system32\node_modules\glslEditor
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c ln -nsf ../src/js node_modules/app
npm ERR! 'ln' is not recognized as an internal or external command,
npm ERR! operable program or batch file.

log from log file:

2226 info run [email protected] postinstall node_modules/glslEditor ln -nsf ../src/js node_modules/app
2227 info run [email protected] postinstall { code: 1, signal: null }
2228 timing reify:rollback:createSparse Completed in 1391ms
2229 timing reify:rollback:retireShallow Completed in 0ms
2230 timing command:install Completed in 7879ms
2231 verbose stack Error: command failed
2231 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\promise-spawn\index.js:64:27)
2231 verbose stack     at ChildProcess.emit (node:events:520:28)
2231 verbose stack     at maybeClose (node:internal/child_process:1092:16)
2231 verbose stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
2232 verbose pkgid [email protected]
2233 verbose cwd C:\WINDOWS\system32
2234 verbose Windows_NT 10.0.19044
2235 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "glslEditor" "--save"
2236 verbose node v16.14.0
2237 verbose npm  v8.3.1
2238 error code 1
2239 error path C:\WINDOWS\system32\node_modules\glslEditor
2240 error command failed
2241 error command C:\WINDOWS\system32\cmd.exe /d /s /c ln -nsf ../src/js node_modules/app
2242 error 'ln' is not recognized as an internal or external command,
2242 error operable program or batch file.
2243 verbose exit 1

I'm a webdev learning from the book for two days now, and i've been absolutly amazed how this little tool developped by @patriciogonzalezvivo is so dope, much more straight forward than ShaderToy, and all those little features make learning shaders a real great experience. But despite it, few bugs come along and alter the developing experience.

Is this project still alive ?
I feel like some really low effort could fix the export url and the test button, and I'm not sure if I want to invest on it for now.

Can we hope those to be fixed or should we dive in ?

Thank you anyway, the book + editor is amazing regardless of those tiny bugs

Hello,

On http://editor.thebookofshaders.com/, when I click on Export / Artwork URL ..., I get no pop-up and this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://thebookofshaders.com:8080/save. (Reason: CORS request did not succeed).

I also create an issue here webcompat/web-bugs#16659

Thank's you in advance,

Hi, I am using a lot the editor at http://editor.thebookofshaders.com/.

Unfortunately recently I noted a malfunction, my shaders do not work anymore.
I can open the editor and the initial shader is visible, but if I change the code the canvas is not updated.

The following shader for example does not work:

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;

void main() {
	vec2 st = gl_FragCoord.xy/u_resolution;
	gl_FragColor = vec4(st, 1., 1.);
}

I tested the editor in Chrome, Safari and Firefox in macos.

Thanks for your work, I really appreciate.

"postinstall": "ln -nsf ../src/js node_modules/app" fails when install from npm . What is the purpose of this? Can it just be removed?

No sure if this editor is still supported, but I'm getting this error when trying to use something like fwidth() (which seems to work in e.g. Shadertoy).

Would it be possible to use a webcamera input as a texture in the shader?

If not, maybe someone could point me in the right direction on how to best implement this myself?

Would be great to be able to process camera input or route some other graphics I am rendering with hardware devices via NDI virtual webcam.

I love this glsl editor, the widgets that come up when editing different values are absolutely brilliant and I hope more people reference it and incorporate that idea. I have been writing alot of shaders using my iPad Pro and sadly the widgets don't work with touch. I tried to see if I could add touch capability myself but I couldn't quite pin down where in the many tens of thousands of lines of code. I have found in general that touch works fine in other projects by copying mouse events and replacing the touch equivalent, and adding event.preventDefault().

Also would be amazing if you offered the widget/code popups as a separate repo/extension to codemirror.

Amazing work, Ive shown the book of shaders to like >10 people since I found it and I genuinely feel it is the best learning resource I have ever seen, not just for glsl but in general. Cheers!

Hello @patriciogonzalezvivo,

As you might know, Unity unveiled a new tool in its last beta release: https://blogs.unity3d.com/2018/02/27/introduction-to-shader-graph-build-your-shaders-with-a-visual-editor/
By the way, Unity is heavy, not working on a browser or mobile device, and is not at all a Free Software!

So, even if this idea is not really new, I still would really love to try experimenting on a branch of this repository a "Graph mode", to let people organize/edit/visualize their functions on a 2D infinite workspace, what do you think about it?

Thanks for your feedback,

If my fragment shader is implemented in shader1.frag, shader2.frag, ... , How can I use them in one shader? I had this problem because several shader programs in one page may share some same code so I can reuse it.

Hi, I try to use Test Button from the web editor, but it doesn't work. When I download the source and compile it myself, it works.

All except Download File doesn't work.

There's a console error on init a glslEditor with the frag_header option.
It could be avoided changing line 29 of Shader.js

from

this.elCanvas.setAttribute('data-fragment', this.options.frag);

to

this.elCanvas.setAttribute('data-fragment', this.options.frag_header + this.options.frag + this.options.frag_footer);

...And setting gl_FragColor to the result: gl_FragColor = vec4(u_resolution.x / 0.0);

Console output:

gl.js:144
Error in program linking:
C:\fakepath(43,33-77): warning X4008: floating point division by zero
C:\fakepath(45,34-64): warning X4008: floating point division by zero
C:\fakepath(46,22-52): warning X4008: floating point division by zero
C:\fakepath(46,22-52): error X4579: NaN and infinity literals not allowed by shader model

Warning: D3D shader compilation failed with default flags. (ps_3_0)
 Retrying with avoid flow control
C:\fakepath(43,33-77): warning X4008: floating point division by zero
C:\fakepath(45,34-64): warning X4008: floating point division by zero
C:\fakepath(46,22-52): warning X4008: floating point division by zero
C:\fakepath(46,22-52): error X4579: NaN and infinity literals not allowed by shader model

Warning: D3D shader compilation failed with avoid flow control flags. (ps_3_0)
 Retrying with prefer flow control
C:\fakepath(43,33-77): warning X4008: floating point division by zero
C:\fakepath(45,34-64): warning X4008: floating point division by zero
C:\fakepath(46,22-52): warning X4008: floating point division by zero
C:\fakepath(46,22-52): error X4579: NaN and infinity literals not allowed by shader model

Warning: D3D shader compilation failed with prefer flow control flags. (ps_3_0)

Failed to create D3D shaders.

GlslCanvas.js:385
Uncaught TypeError: Failed to execute 'getUniformLocation' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLProgram'.
    at GlslCanvas.uniform (GlslCanvas.js:385)
    at GlslCanvas.render (GlslCanvas.js:458)
    at RenderLoop (GlslCanvas.js:156)

Surprisingly, gl_FragColor = vec4(500.0 / 0.0); doesn't cause the error.

P.S. editor.thebookofshaders.com is dead

Hey could we create a custom uniform here? Thanks :D

Back-reference to The Book of Shaders repo

Whenever I make a mistake in the editor, something messes up with the undo/redo state and if I attempt to introduce any changes, the changes that were erased start filling up the space, effectively making the panel unusable.

Suggestions:

• Turn off auto-parsing and introduce a button that launches this action.
• Perform a test on mobile devices.

Notes:

• I was using the offline version.
• It was my fork of The Book of Shaders which uses Python 3 (see #310).
• I was running this in my Android phone using Termux for hosting the PHP server and executing Python using Python 3.8.5.

Getting this ERROR Uncaught ReferenceError: GlslEditor is not defined when following README instructions

<link type="text/css" rel="stylesheet" href="https://rawgit.com/patriciogonzalezvivo/glslEditor/gh-pages/build/glslEditor.css">
<script type="application/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslEditor/gh-pages/build/glslEditor.js"></script>


<body>
    <div id="glsl_editor"></div>
</body>
<script type="text/javascript">
    const glslEditor = new GlslEditor('#glsl_editor', { 
        canvas_size: 500,
        canvas_draggable: true,
        theme: 'monokai',
        multipleBuffers: true,
        watchHash: true,
        fileDrops: true,
        menu: true
    });
</script>

Using the latest version of Chome [Version 48.0.2564.97 (64-bit)]
Also reproduced in Firefox v. 42.0

When I click on the number picker (white indicator arrow) I get a value that lies outside of the line.

When clicking Artwork to [o] button the shader doesn't show up in Openframe.

The console throws these errors:

Modal.js:87 Uncaught TypeError: Cannot read property 'classList' of null
    at ExportModal.onClickOutside (Modal.js:87)
    at HTMLBodyElement.handler (Modal.js:118)
onClickOutside @ Modal.js:87
handler @ Modal.js:118
VM77:1 POST https://thebookofshaders.com:8080/save net::ERR_CERT_AUTHORITY_INVALID

Thanks for any help with fixing this.

It's because the name changing from link_button to linkButton

New lines of code entered in the frag_header push the position of errors further down the editor, which can result in them not being displayed at all if the header is longer than the shader.

Making a pr right now with a fix! :)

I will do that in my fork then I'll do a PR!
getFileName() {
let content = this.getContent();
let result = content.match(///\s*[F|f]ilename\s*:\s*([\w|\s|@|(|)|-|_]*)/i);
console.log(result);
if (result && !(result[1] === ' ' || result[1] === '')) {
let filename = result[1].replace(/(\r\n|\n|\r)/gm, '');
return filename;
}
else if (this.bufferManager !== undefined) {
return this.bufferManager.current;
}
else {
return 'unknown';
}
}

hello
I'm under ubuntu 18.04
glxinfo | grep "OpenGL version" OpenGL version string: 4.6.0 NVIDIA 390.116

but in the editor, if I use the function "inverse" for a matrix, I got an error.
mat4 rotBackwards=inverse(rotForward);
'inverse' : no matching overloaded function found

but the inverse function should works https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/inverse.xhtml

as explained here I try to add
#version 150 at the begining of the code , but I got error if I put a number bellow 100.

How can I know wich version of glsl the editor uses ?
thanks

hi,
thank you for the book.
i am running the electron version locally and would like to output values to the console.
how would i go about that?

Is it possible to import image textures ?