All Questions
507
questions
-1
votes
0
answers
28
views
When using PlaneGeometry with ShaderMaterila my browser throws "Program Info Log: Fragment shader is not compiled."
I am new to Three.js and running on version 0.167.0 of Three.js.
I am trying to create a PlaneGeometry with ShaderMaterial, but I get an error and nothing renders in the scene.
Here is my code snippet....
0
votes
0
answers
46
views
How do i pass uniforms to my glsl code at compile and during run time in three js?
I have a three js scene where i render meshes from a sdf glsl shader. I want to create uniforms on these shaders to adjust the distance field via sliders in the UI. Passing the shaders in from another ...
- 11
0
votes
0
answers
20
views
How To Let ShaderMaterial Receive/Cast Shadows
So, I have been playing around with vertex and fragment shaders, and wanted to know if there was a way to add shadows to the fragment shaders? I have tried many unsuccessful attempts, and researched a ...
0
votes
0
answers
50
views
Making Vertex Shader face Camera like billboard in THREE.JS
Im attempting to make a vertex shader that i can apply to a mesh to make all its quads turn into billboards. I found this code is the closest i could get it however it does not fully face the camera ...
0
votes
0
answers
42
views
Adding outlines for blender model with sharp edges
I've started learning some three.js and blender to achieve the cartoon effect. I've been working on some code to add black outlines to Blender objects. I've based my code on the tutorial I found on ...
- 15
1
vote
0
answers
60
views
GLSL shader difference between desktop and mobile - varyings or noise function?
Context
I'm building a WebGL GLSL shader using a 3d Perlin Noise function to warp the vertices as well as color the fragments so they line up with the vertices.
I'm running the Perlin Noise function ...
- 31.6k
0
votes
1
answer
128
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,184
0
votes
1
answer
42
views
normal is always pointing the same way
I have an open topped cylinder with a material that is double sided in a Three.JS scene.
What I am trying to achieve is one color on the front of the cylinder, and another color on the inside of the ...
- 2,879
0
votes
0
answers
41
views
Three.js how to determine if backfacing in a RawShaderMaterial that's double sided and transparent?
In Three.js, I'm trying to create a fresnel based glowing outline on a sphere, with a RawShaderMaterial, on a double sided transparent sphere.
The RawShaderMaterial GLSL is a fairly straightforward ...
- 31.6k
0
votes
0
answers
29
views
Regarding webgl’s ping-pong loop, I don’t know why I can’t use the new one
I know that the ping-pong loop is set based on two set rendertargets. For example
this.fbo_material.uniforms.particle_time.value = this.accumulate_time;
this.fbo_material.uniforms.fbo_texture.value = ...
- 23
1
vote
1
answer
139
views
Can't avoid interpolation of UV : " 'flat' : Illegal use of reserved word "
I want to made that UV are not interpolated, so I can get the exact pixel (As a beginner I see this from that video). Why using 'flat' gives an error?
If I past flat before varying of Uv (I named it ...
1
vote
1
answer
124
views
How to build webGL globe animation as seen in Piano.io website
I've been exploring around webGL and threejs recently and noticed the piano.io website globe animation is really good.
There are many examples to create the dotted globe but I am wondering how to ...
- 1,201
2
votes
1
answer
102
views
Three.js Y Axis Offset for Equirectangular Image Not Working
I have a mash with two textures that I mix. Each texture is a panoramic equirectangular image. I need to offset only one of two textures by providing degrees for X or Y axis.
// usage: applyOffset(90, ...
- 3,720
0
votes
2
answers
76
views
i create circle around mouse pointer but problem is that it display perfect in my pc ,when test in laptop then it not display around mouse pointer
fragment code :
export const fragment = `varying vec2 vUv;
uniform vec2 viewport;
uniform vec2 uMouse;
float createCircle() {
vec2 viewportUv = gl_FragCoord.xy / viewport;
float ...
0
votes
0
answers
63
views
How to reduce the gray-line artifacts in three.js isosurface rendering of 3D texture example?
the isosurface example in the three.js website shows gray-line artifacts over the surface, please see
https://threejs.org/examples/webgl2_materials_texture3d.html
the glsl shader source code is here
...
- 1,520