patriciogonzalezvivo / glsleditor Goto Github PK
View Code? Open in Web Editor NEWSimple WebGL Fragment Shader Editor
Home Page: http://editor.thebookofshaders.com
License: MIT License
Simple WebGL Fragment Shader Editor
Home Page: http://editor.thebookofshaders.com
License: MIT License
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
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!
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.
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.
the demos in the readme look pretty outdated. Would be nice if they could be updated to reflect the new UI and features
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);
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>
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
It's because the name changing from link_button to linkButton
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';
}
}
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
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).
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,
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..
Is there a way to get the backbuffer as a sampler2D uniform?
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! :)
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:
Notes:
The Book of Shaders
which uses Python 3 (see #310).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.
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.
"postinstall": "ln -nsf ../src/js node_modules/app" fails when install from npm . What is the purpose of this? Can it just be removed?
...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
All except Download File doesn't work.
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
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).
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.
Hey could we create a custom uniform here? Thanks :D
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
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?
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,
Is it possible to import image textures ?
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.
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.
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.