Shader.js | compact closure-compiler compatible javascript library | Transpiler library
kandi X-RAY | Shader.js Summary
kandi X-RAY | Shader.js Summary
A small and compact closure-compiler compatible JavaScript library for managing shaders.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of Shader.js
Shader.js Key Features
Shader.js Examples and Code Snippets
Community Discussions
Trending Discussions on Shader.js
QUESTION
I'm basically trying to achieve a kaleidoscopic effect with just one side, but I'm working with lots of Points, so I'd like that to happen in the shader. However if there's a Threejs trick that mirrors half of the texture or the Points object, that would be great. I tried to apply transformation matrices but I can't get it to work.
I found an old KaleidoShader that requires the usage of EffectComposer, but I'd like to implement it manually myself (without EffectComposer) and I'm struggling to do so. I'm using an FBO and I tried adding the code from that shader in both my simulation and render shaders but it's having no effect at all. Do I have to add yet another FBO texture or is it possibile to do those calculations in one of the existing shaders?
For visual reference https://ma-hub.imgix.net/wp-images/2019/01/23205110/premiere-pro-mirror-effect.jpg
I've spent so much time without getting to the bottom of this, hopefully someone can point me in the right direction.
Thanks
...ANSWER
Answered 2020-May-28 at 09:40There is a texture wrap mode that does mirroring.
texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping
Does that help?
edit: Here's an example showing mirroredrepeatwrapping on both axis:
QUESTION
I have this code for webgl and i'm trying to compile and use this program, but when i make gl.useProgram(); i get this error: WebGL: INVALID_OPERATION: useProgram: program not valid.
I don't know how i can resolve this problem or if i have any error in vertexshader or fragmentshader.
...ANSWER
Answered 2020-Apr-01 at 02:39Your errors mean you're trying to use a WebGL2 shader in WebGL1
'in' : storage qualifier supported in GLSL ES 3.00 and above only
means you used in as in
QUESTION
I have a webgl proyect and I am able to load my shaders if I hardcode them from my main.js as
...ANSWER
Answered 2020-Mar-31 at 22:12In your HTML, you should use the bundle instead of the source JavaScript. According to your webpack config, the bundled file will be in "build/main.bundle.js" but your HTML loads "main.js", which is your unbundled JavaScript.
QUESTION
I am looking to understand how external shader files can be used inside a-frame without copying the shader code. I know that we can define custom shaders using aframe's registershader but is there a way to point the vertex and fragment shader code to an external URL?
For example, if I want to use the shader defined here - Mr. Doob's water shader within a-frame, how can I do so without copying the shader code to my local file?
...ANSWER
Answered 2018-Oct-16 at 15:20The script contains a global definition for
QUESTION
I'm new to three.js and I have problems to achieve the following effect : render 2 scenes and mix them with a blending shader. The first TexturePass is OK but the second one is blinking like a stroboscope. The result can be seen here: https://codepen.io/anon/pen/jYKqyj?editors=0010#0
And here is the code :
...ANSWER
Answered 2019-Nov-21 at 19:14The major issue is that the target texture of processing.pass.renderScene1 is added twice. It is added as a separate pass to composerBlending and it is also used in processing.pass.blending.
Create a blending shader, which does not use the default diffuse texture tDiffuse:
QUESTION
I'm trying to create a shader that takes into account the clipping planes I'm defining in the scene. These clipping planes work fine for all of the 'vanilla' materials I'm using: THREE.MeshLambertMaterial, THREE.MeshPhongMaterial, and THREE.MeshPhysicalMaterial, but THREE.ShaderMaterial is missing this implementation. This is an example of what I mean: https://jsfiddle.net/fraguada/27LrLsv5/
In this example there are two cubes, one with a THREE.MeshStandardMaterial and one with a material defined by THREE.ShaderMaterial. The cube with a THREE.MeshStandardMaterial clips ok. The cube with THREE.ShaderMaterial does not clip.
(I'm not typically defining the vertex/fragment shader in script tags as I show in the jsfiddle, instead I'm defining them in a similar manner to this: https://github.com/mrdoob/three.js/blob/dev/examples/js/shaders/BasicShader.js.)
So, a few questions:
- Should THREE.ShaderMaterial include Clipping Planes out of the box? (there is a clipping property, but not sure what it enables)
- If not, how could I modify this shader to include the necessary params and shader chunks to enable clipping?
ANSWER
Answered 2019-Nov-07 at 16:02Actually, clipping is done inside the Three.js shaders.
To make it work, you have to handle it inside your shader, by adding those 4 "shader chunks" :
clipping_planes_pars_vertex.glslat the top of your vertex shader ;clipping_planes_vertex.glslinside themain()of your vertex shader ;clipping_planes_pars_fragment.glslat the top of your fragment shader ;clipping_planes_fragment.glslinside themain()of your fragment shader.
You can access those chunks by simply adding #include <(chunk name)> to your shaders.
Then, set material.clipping = true; and it should work.
Check this fiddle.
Note
To make your shader work, I also added begin_vertex.glsl and project_vertex.glsl.
I checked the current phong shader implementation to understand where to put those chunks.
Note 2
This code should work with a shader implemented with an array of strings but note that you can also reference shader chunks with THREE.ShaderChunk[(chunk name)].
This should be more suitable in your case.
QUESTION
I am trying to make a custom marker work in ar.js, sadly with no succes, was hoping somebody could help.
I have tried all of those guides: https://medium.com/@aschmelyun/so-you-want-to-get-started-with-ar-js-41dd4fba5f81 https://medium.com/arjs/how-to-create-your-own-marker-44becbec1105 https://katharine.org/tutorials/custom-markers-ar-js/
Sadly it does not seem to work. weirdly enough, with the hiro Marker it still worked, eventhough the code doesn't mention it... (I tried editing the .js file for the katherine-tutorial only).
...ANSWER
Answered 2019-Sep-18 at 19:03Custom markers in ar.js require only to have the type and an url set:
QUESTION
Ok, I'm breaking apart the ShaderGlow example from https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Shader-Glow.html trying to bring it into my node app.
Author does everything in tags in the html doc, but my whole app is in app.js and calls in ES6 modules from helper files.
The shader, before my tweaking, works like this:
...ANSWER
Answered 2019-Jul-21 at 20:02Can you provide an answer where you put the code block into JSON.stringify or another format able to be read by the JS? Pasting straight into the parameter doesn't work, no.
QUESTION
How can i add Audio Visualization support to this class, i would like to add an Audio() object as an input to a GLSL Fragment Shader. An Example of this is https://www.shadertoy.com/view/Mlj3WV. I know this sort of thing can be done in Canvas 2d with waveform Analysis, but this opengl method is far more smooth.
...ANSWER
Answered 2019-Jul-20 at 17:01Shadertoy does not provide FFT as a float. It provides FFT data as a texture
QUESTION
I am trying to render 3D object the way it will look as a hologram or x-ray in webGL using three.js library. It needs to be transparent in the center (to see background and maybe later some objects will be inside this volume) and have bright opaque color at the edges. Faces of back hidden side shouldn't be rendered. I am very newbie in web-based graphics, so I don't know either I should work with GLSL shader or play with blending options. Sorry for silly question.
I can reach similar result using custom glow shader according to this tutorial. But it doesn't solve the problem with back faces. I got a sufficient appearance in Blender creating a shader which eliminate such faces by restricting light path by transparency depth greater than 0.5. There is nodes of my Blender material. Is there a way to do similar thing in webGL? The screenshots of current situation and expected (second line) is here.
Currently I use OBJLoader, WebGLRenderer and ShaderMaterial from three.js library. Material defines as the following. CustomShader.js:
...ANSWER
Answered 2019-May-15 at 02:31If I'm not mistaken, the effect below is what you are trying to achieve.
There are a couple interesting things going on here.
First, I'm setting renderer.autoClear = false, which prevents the renderer from clearing its buffers between calls to renderer.render. This allows calling that function multiple times to write to the buffers multiple times.
Next, I'm doing just that. I'm rendering the same scene twice. But you'll notice that the first time I render it, I'm setting a scene.overrideMaterial, which replaces all of the materials in the scene with the override. I need to do this for reasons within the override material.
In the override material, I'm setting colorWrite: false. This means that while the object will be "rendered," it won't draw any colors, so there is no visible effect (yet). It does write to the depth buffer, which is what we want, because the object is going to hide things behind it. It's like hiding something behind a magic piece of glass. (I also set the polygon offset here to avoid z-fighting, which is another topic entirely, so I won't go into any detail in this answer).
Finally, I render the scene again using the shader material you defined. The noColor render is occluding shapes that should be occluded, so you don't get unwanted bleed-through when a front-face is behind another part of the mesh. Your shader handles the rest, creating the glow effect.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install Shader.js
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
