All Questions
Tagged with webgl fragment-shader
236 questions
0
votes
0
answers
45
views
Invert raster tiles with maplibre
I'm trying to invert raster tiles in maplibre (like in CSS filter: invert). I have the following code for a minimum example that doesn't show any errors but doesn't invert the tiles.
<!DOCTYPE html&...
- 2,119
0
votes
1
answer
36
views
How to prevent base color from changing when overlaying patterns?
I'm building a custom racing silks customizer using THREE.js. My app allows users to:
By the way it is something like this website here: https://hylandsportswear.com/kitbuilder/#/customise/80325870?...
0
votes
0
answers
39
views
Reconstruct world Space from Depth Texture THREE.js Shader Pass
I am creating an Atmosphere shader in three.js. The Shader is passed to a ShaderPass, and the ShaderPass to the effectComposer. I am currently having a problem with utilizing the DepthTexture. The ...
- 1
0
votes
0
answers
38
views
Custom Webgl points layer, with vertex shader and fragment shader, want to distinguish two points with same latitude and longitude on Webgl Points Lyr
The goal of this code is to distinguish two overlapping points with identical coordinates using WebGL in OpenLayers. Two approaches have been attempted:
Approach 1: Implements a custom WebGL points ...
0
votes
0
answers
30
views
WebGL Cannot draw gl.POINTS and gl.LINE_STRIP at the same time
I am currently learning WebGL and for that i am creating an app that draws B-Spline curves. In my code i have option of drawing both the vertices and the lines connecting those vertices in my curve.
...
1
vote
0
answers
30
views
Is a distance based approach better than a Barycentric based approach to outlining a polygon with many vertices in pixi.js?
I'm trying to apply a fragment shader to a Mesh within pixi.js. The calculation of the geometry of the shape is correct and the application of a shader to change the color of the entire shape works ...
1
vote
1
answer
83
views
Error compiling fragment shader in Three.js: 'texture' not found
I'm working with Three.js and am facing an issue when compiling a fragment shader.
Here's my code: https://jsbin.com/cigadibeya/3/edit?html,js,output.
I tried to implement animation like here: https://...
- 13
0
votes
0
answers
82
views
Reaction diffusion with shaders on WEBGL
I'm writing a reaction diffusion simulation with p5js based on a video and this tutorial. The code so far is this:
var vertSrc = `
#ifdef GL_ES
precision mediump float;
#endif
attribute vec3 ...
- 104
0
votes
1
answer
394
views
GLSL fragment shader Sine wave change the direction and color
I have glsl Fragment shader code need to change the line color, background color and, direction of the sine wave
eprecision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
...
- 157
0
votes
0
answers
53
views
R3F exported NodeToy shader is invisible
I am unable to get my glsl NodeToy dark pink shader to show up on the the arms and legs of the models of the caution symbol and X symbol. The flat dark pink shader that is currently visible is not the ...
0
votes
1
answer
259
views
How To Customize Alpha Transparency in Augmented Fragment Shader of Three.js Material?
I'm extending the THREE.MeshStandardMaterial with onBeforeCompile to adjust some details of the shader. I got the vertex shader working fine, but I'm having trouble figuring out how to set the alpha/...
- 1,230
0
votes
0
answers
47
views
Texture reflection on adjacent geometry surface
I am trying to replicate the reflection, of a video/image texture placed on the wall, on the floor below as seen in the attached image. As you can see, it's not merely mirroring the texture because ...
- 440
1
vote
0
answers
124
views
curtains.js black hole effect in fragment shader
i am trying to get a kind of a black hole effect where the chessboard gets sucked into the middle of the frame, like in the image below:
In the main FS function I have this:
vec4 mapEffect = ...
0
votes
1
answer
87
views
same JS code in 2 diiferent WebGL applications, works in 1 but fails in other: problem with vertexAttribute?
I have created 2 snippets here, starting from https://interactivecomputergraphics.com/8E/Code/06/shadedCube.html. The 1st snippet works as expected but the second one does not. When I run the 2nd ...
- 76
1
vote
1
answer
306
views
Trouble using mouse position in WebGL fragment shader
Let's say I draw a texture to my WebGL canvas. After the texture is drawn, I want to send the mouseover mouse position directly to the fragment shader, and perform some manipulation on that texture ...
- 10.8k