Three.js THREE.InstancedBufferGeometry multiple sampler2D vertical tearings - three.js

I have created a RawShaderMaterial for an InstancedBufferGeometry object that is rendering well with 1 sampler2D uniform. As soon as it uses a second sampler2D uniform, it renders with a lot of vertical tearings
Here is the fragment shader:
precision highp float;
uniform sampler2D utexture1;
uniform sampler2D utexture2;
varying float vindex;
varying vec2 vUv;
varying vec3 mapcolor;
vec4 gettexture(){
vec4 color;
if(vindex==0.){
color = texture2D(utexture1, vUv)*vec4(mapcolor,1.);
}else if(vindex==1.){
color = texture2D(utexture1, vUv)*vec4(mapcolor,1.);
}else if(vindex==2.){
color = texture2D(utexture2, vUv)*vec4(mapcolor,1.);
}else if(vindex==3.){
color = texture2D(utexture2, vUv)*vec4(mapcolor,1.);
}
return color;
}
void main() {
gl_FragColor = gettexture();
}
Notes: The 2 textures used for the sampler2D have the same size (512x512) and they are loaded before material creation.
Anyone knows where these vertical tearings come from?
Thank you in advance for your help!

Related

How to change transparency of texture in shader

I wanna create shader what will be changing alpha color of texture from invisible to visible.
I've seen method to change gl_FragColor.a. But for me it doesn't work. What ever i setting there always all screen is black.
precision mediump float;
uniform vec4 vColor;
uniform sampler2D uTexture;
varying vec2 vTexCoordinate;
uniform float alphaMod;
void main(){
gl_FragColor = texture2D(uTexture, vTexCoordinate);
gl_FragColor.a = alphaMod;
}
Modified object should be barely visible but for now is invisible.

How to make visible uniform variable in both shaders?

I have variable in vertex shader "uIsTeapot".
uniform float uIsTeapot;
Vertex shader work with it very well, but fragment shader don't see it. If I use
if (uIsTeapot == 0.0)
then an error occured
"uIsTeapot": undeclared identifier
but I defined it in vertex shader. If I define uIsTeapot in both shaders as uniform, then program say "Could not initialise shaders" since program don't pass veryfication
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
EDITED:
I add mediump to variables and now program compiled without errors, but result is one object on screen, but I draw two object.
Vertex shader
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec2 aTextureCoord;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat3 uNMatrix;
uniform vec3 uAmbientColor;
uniform vec3 uPointLightingLocation;
uniform vec3 uPointLightingColor;
uniform mediump float uIsTeapot;
//varying float vIsTeapot;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
varying vec4 vColor;
void main(void) {
if (uIsTeapot == 1.0) {
vec4 mvPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
gl_Position = uPMatrix * mvPosition;
vec3 lightDirection = normalize(uPointLightingLocation - mvPosition.xyz);
vec3 transformedNormal = uNMatrix * aVertexNormal;
float directionalLightWeighting = max(dot(transformedNormal, lightDirection), 0.0);
directionalLightWeighting = 100.0;
vLightWeighting = uAmbientColor + uPointLightingColor * directionalLightWeighting;
vTextureCoord = aTextureCoord;
}
if (uIsTeapot == 0.0) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
} }
Fragment shader
precision mediump float;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
varying vec4 vColor;
uniform sampler2D uSampler;
uniform mediump float uIsTeapot;
//varying float vIsTeapot;
void main(void) {
if (uIsTeapot == 1.0) {
vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);
} else {
gl_FragColor = vColor;
}
}
You need to declare it in both shaders, with the same precision.
What do you mean by:
then program don't work right.
Can you post your vertex shader and your fragment shader? I suspect you are relying on the default precision, and it is likely that you are using highp in the vertex shader and mediump in the fragment shader
Try using:
uniform mediump float uIsTeapot;
... in both vertex shader and fragment shader.

How to write a only alpha > 0 to the stencil buffer?

I am trying to render a texture to the stencil buffer. I only need pixels where their alpha is > 0, but my code is rendering every pixel of my quad - even the ones with 0 alpha. How can I avoid this?
Heres my code:
GL.StencilOp(StencilOp.Keep, StencilOp.Keep, StencilOp.Incr);
GL.ColorMask(false, false, false, false);
GL.DepthMask(false);
RenderMask(mask);
GL.StencilFunc(StencilFunction.Equal, 1, 0xFF);
GL.StencilOp(StencilOp.Keep, StencilOp.Keep, StencilOp.Keep);
GL.ColorMask(true, true, true, true);
GL.DepthMask(true);
When debugging with RenderDoc I see that the stencil buffer contains 1s where my texture is... but its a rectangle, it does not take alpha into account.
Heres my fragment shader (it works fine for normal rendering):
varying lowp vec4 vColor;
varying lowp vec2 vTexCoords;
uniform lowp sampler2D uTexture;
void main() {
gl_FragColor = texture2D(uTexture, vTexCoords) * vColor;
}
Use a "discard" statement in the shader to drop the fragments you don't want to keep.
varying lowp vec4 vColor;
varying lowp vec2 vTexCoords;
uniform lowp sampler2D uTexture;
void main() {
vec4 color = texture2D(uTexture, vTexCoords) * vColor;
if (color.a == 0.0) {
discard;
}
gl_FragColor = color;
}

Can't get OpenGL code to work properly

I'm very new to OpenGL, GLSL and WebGL. I'm trying to get this sample code to work in a tool like http://shdr.bkcore.com/ but I can't get it to work.
Vertex Shader:
void main()
{
gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
gl_TexCoord[0] = gl_MultiTexCoord0;
}
Fragment Shader:
precision highp float;
uniform float time;
uniform vec2 resolution;
varying vec3 fPosition;
varying vec3 fNormal;
uniform sampler2D tex0;
void main()
{
float border = 0.01;
float circle_radius = 0.5;
vec4 circle_color = vec4(1.0, 1.0, 1.0, 1.0);
vec2 circle_center = vec2(0.5, 0.5);
vec2 uv = gl_TexCoord[0].xy;
vec4 bkg_color = texture2D(tex0,uv * vec2(1.0, -1.0));
// Offset uv with the center of the circle.
uv -= circle_center;
float dist = sqrt(dot(uv, uv));
if ( (dist > (circle_radius+border)) || (dist < (circle_radius-border)) )
gl_FragColor = bkg_color;
else
gl_FragColor = circle_color;
}
I figured that this code must be from an outdated version of the language, so I changed the vertex shader to:
precision highp float;
attribute vec2 position;
attribute vec3 normal;
varying vec2 TextCoord;
attribute vec2 textCoord;
uniform mat3 normalMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
varying vec3 fNormal;
varying vec3 fPosition;
void main()
{
gl_Position = vec4(position, 0.0, 1.0);
TextCoord = vec2(textCoord);
}
That seemed to fix the error messages about undeclared identifiers and not being able to "convert from 'float' to highp 4-component something-or-other", but I have no idea if, functionally, this will do the same thing as the original intended.
Also, when I convert to this version of the Vertex Shader I have no idea what I'm supposed to do with this line in the Fragment Shader:
vec2 uv = gl_TexCoord[0].xy;
How do I convert this line to fit in with the converted vertex shader and how can I be sure that the vertex shader is even converted correctly?
gl_TexCoord is from desktop OpenGL, and not part of OpenGL ES. You'll need to create a new user-defined vec2 varying to hold the coordinate value.

OpenGL ES: Combine two Frame Buffer Objects

I draw two FBO offscreen. Now I wanna overlay them deppending on the depthbuffer values.
How can I do this?
I found a solution:
at first I render the depthbuffer in a texture which is attached to the FBO.
second I load it in the fragmentshader to compare the two deptbuffers.
My Fragmentshader looks like this.
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D s_texture1;
uniform sampler2D s_texture2;
uniform sampler2D s_depth1;
uniform sampler2D s_depth2;
void main(){
vec4 tex1;
vec4 tex2;
vec4 depth1;
vec4 depth2;
depth1 = texture2D( s_depth1, v_texCoord);
depth2 = texture2D( s_depth2, v_texCoord);
tex1 = texture2D( s_texture1, v_texCoord );
tex2 = texture2D( s_texture2, v_texCoord );
if ( depth1.r < depth2.r ){
gl_FragColor = tex1;
}else{
gl_FragColor = tex2;
}
}
But it seems like this is not that high-performance.
Is it possible to use a attached renderbuffer in the FBO and access to the data of the renderbuffer in fragmentshader like I do it now?
Would this increase my performance?
Thank you very much.
ragards Mat.

Resources