I'm drawing two geometries next to each other and have them rotate. The problem is that the first drawn one is obstructing the second one, where transparency should take effect. The two objects should have the same transparency, regardless of who was drawn first. That's why blending is turned on and depth test is off.
Here are the images:
Both geometries are point cloud using THREE.ShaderMaterial as followed:
var shaderMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
attributes: attributes,
vertexShader: document.getElementById('vertexshader').textContent,
fragmentShader: document.getElementById('fragmentshader').textContent,
blending: THREE.NormalBlending,
depthTest: false,
transparent: true
});
where
// attributes
attributes = {
size: { type: 'f', value: null },
alpha: { type: 'f', value: [] },
customColor: { type: 'c', value: null }
};
// uniforms
uniforms = {
color: { type: "c", value: new THREE.Color(0x00ff00) },
texture: { type: "t", value: THREE.ImageUtils.loadTexture("../textures/sprites/circle.png") }
};
and
<script type="x-shader/x-vertex" id="vertexshader">
attribute float alpha;
attribute float size;
attribute vec3 customColor;
varying float vAlpha;
varying vec3 vColor;
void main() {
vAlpha = alpha;
vColor = customColor;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * ( 120.0 / length( mvPosition.xyz ));
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
uniform vec3 color;
uniform sampler2D texture;
varying float vAlpha;
varying vec3 vColor;
void main() {
gl_FragColor = vec4( vColor, vAlpha );
gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}
</script>
Example code with 2 textures, but can be made to work with one as well:
<script id="fragmentShaderLoader" type="x-shader/x-fragment">
uniform float percent;
uniform sampler2D texture1;
uniform sampler2D texture2;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D( texture1, vUv);
vec4 tex2 = texture2D( texture2, vUv );
if(tex2.a - percent < 0.0) {
gl_FragColor.a = 0.0;
//or without transparent = true use
//discard;
}
}
</script>
<script id="vertexShaderLoader" type="x-shader/x-vertex">
varying vec2 vUv;
void main()
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
</script>
Then for init:
uniformsMove = {
percent: { type: "f", value: 1.0 },
texture1: { type: "t", value: (new THREE.TextureLoader()).load( "govr/loader-test.png" ) },
texture2: { type: "t", value: (new THREE.TextureLoader()).load( "govr/loader-mask2.png" ) }
};
material = new THREE.ShaderMaterial( {
uniforms: uniformsMove,
vertexShader: document.getElementById( 'vertexShaderLoader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShaderLoader' ).textContent
} );
material.transparent = true;
Related
The task is to change the color of the texture with a predominance of red. I'm trying to do this, but my texture completely fills the picture with red, please tell me where is the error?
I don't understand why I can't set transparency
function vertexShader(){
return `
precision mediump float;
varying vec2 vUv;
void main(){
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 );
}
`
}
function fragmentShader(){
return `
precision mediump float;
varying vec2 vUv;
uniform sampler2D u_texture;
uniform float u_time;
void main(){
gl_FragColor = texture2D(u_texture, vUv);
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`
}
var texLoader = new THREE.TextureLoader();
var texture = texLoader.load("217.png");
const uniforms = {
u_texture: {value: texture}
}
const material = new THREE.ShaderMaterial(
{
uniforms,
vertexShader: vertexShader(),
fragmentShader: fragmentShader(),
side: THREE.DoubleSide,
//wireframe: true
}
);
The shader is setting gl_FragColor to red
gl_FragColor = texture2D(u_texture, vUv); // this line is effectively ignored
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // because this line sets glFragColor
Maybe you meant this?
gl_FragColor = texture2D(u_texture, vUv);
gl_FragColor += vec4(1.0, 0.0, 0.0, 1.0); // add red
or this?
gl_FragColor = texture2D(u_texture, vUv);
gl_FragColor *= vec4(1.0, 0.0, 0.0, 1.0); // multiply by red
I have written a simple three.js of using a height map. This is the relevant code that creates the shader material:
function loadHeightMap() {
// fake a lookup table
var lut = [];
for ( var n=0; n<256; n++ ) {
lut.push(new THREE.Vector3(0.5, 0.4, 0.3));
}
var loader = new THREE.TextureLoader();
var zScale = 10;
var mapLoc = "https://s22.postimg.org/8n93ehmep/Terrain128.png";
loader.load(mapLoc, function ( texture ) {
// use "this." to create global object
this.customUniforms = {
zTexture: { type: "t", value: texture },
zScale: { type: "f", value: zScale },
zLut: { type: "v3v", value: lut }
};
var customMaterial = new THREE.ShaderMaterial({
uniforms: customUniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
side: THREE.DoubleSide
});
var planeGeo = new THREE.PlaneGeometry( 20, 20, 129, 129 );
var plane = new THREE.Mesh( planeGeo, customMaterial );
plane.rotation.x = -Math.PI / 2;
plane.position.y = 0;
scene.add(plane);
});
}
And here are the shaders:
<script id="vertexShader" type="x-shader/x-vertex">
uniform sampler2D zTexture;
uniform float zScale;
uniform vec3 zLut[ 256 ];
varying float vAmount;
void main() {
vec4 heightData = texture2D( zTexture, uv );
vAmount = heightData.r;
// move the position along the normal
vec3 newPosition = position + normal * zScale * vAmount;
gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-vertex">
uniform vec3 zLut[ 256 ];
varying float vAmount;
void main() {
int index = int(vAmount) * 255;
vec3 vColor = vec3(vAmount, vAmount, vAmount);
//gl_FragColor = vec4(zLut[index], 1.0);
gl_FragColor = vec4(vColor, 1.0);
}
The shaders and the height map part works fine. But I want to pass the lookup table (zLut). The above code works fine if I don't try to use the lookup table. A working example is here. I created a fiddle as well here but it fails because of CORS issues.
Any suggestions are welcome.
OK, solved this (mostly). The trick was to fetch the lookup color in the vertex shader, where one CAN index into an array with a non-const value. The pass the resulting color to the fragmentShader as a varying. So the two shaders end up being:
<script id="vertexShader" type="x-shader/x-vertex">
uniform sampler2D vTexture;
uniform float vScale;
uniform vec3 vLut[ 256 ];
varying vec3 vColor;
void main() {
vec4 heightData = texture2D( vTexture, uv );
// assuming map is grayscale it doesn't matter if you use r, g, or b.
float vAmount = heightData.r;
// fetch the color from the lookup table so it gets passed to the fragshader
int index = int(heightData.r * 255.0);
vColor = vLut[index];
// move the position along the normal
vec3 newPosition = position + normal * vScale * vAmount;
gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-vertex">
varying vec3 vColor;
void main() {
gl_FragColor = vec4(vColor, 1.0);
}
</script>
The remaining problem I have is that when rendered the colors are all flat. I tried forcing an update on the vertices in the animate function but didn't work. Still researching but the question here is solved (AFAIK).
You can see the result here
some days ago I visited the site activetheory.net again. And I saw this stunning nice glass effect in the Homescreen logo border and tried to recode it. Based on the minified code I was able to see they use a PNG as a mask.
I was able to load a png inside the shader and show it up, also it was easy to get a mesh with video texture working. Now I'm stuck on the combining part (png with video) inside the shaders.
someone got experience with it and can help me?
Thank you and have a nice Day!
here is the shader-material part from:
var g = new THREE.PlaneGeometry(128.0, 72.0);
var outline = THREE.ImageUtils
.loadTexture('outline.png');
outline.magFilter = THREE.NearestFilter;
var mat = new THREE.ShaderMaterial({
uniforms: {
map: {type: "t", value: movieScreen.texture},
outline: {type: "t", outline},
aspect: {type: "fv1", value: []},
res: {type: "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight)}
},
vertexShader: document.
getElementById('vertShader').text,
fragmentShader: document.
getElementById('fragShader').text,
transparent: true,
});
here are the shaders:
<script id="vertShader" type="shader">
varying vec2 vUv;
varying vec2 nUv;
void main() {
vUv = uv;
nUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script id="fragShader" type="shader">
varying vec2 vUv;
varying vec2 nUv;
uniform float color;
uniform sampler2D outline;
uniform sampler2D map;
void main(void) {
float alpha = step(0.9, texture2D(outline, vUv).a);
gl_FragColor = texture2D(outline, nUv);
gl_FragColor *= alpha;
}
</script>
Finally, I got a similar shader working. For everyone who is interested.
The shaders:
<script id="vertShader" type="shader">
varying vec2 vUv;
varying vec2 nUv;
void main() {
vUv = uv;
nUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.05);
}
</script>
<script id="fragShader" type="shader">
varying vec2 vUv;
varying vec2 nUv;
uniform float color;
uniform sampler2D outline;
uniform sampler2D map;
void main(void) {
float alpha = step(0.9, texture2D(outline, vUv).a);
gl_FragColor = texture2D(map, nUv);
gl_FragColor *= alpha;
gl_FragColor += 0.08 * alpha;
}
</script>
Have fun!
I am trying to get a .obj to render with a .png texture, however when I put the .png texture, the head turns white as seen here:
White headed avatar
However when I remove the png texture it looks like this:
This is what I am using to create the texture:
<script id="vertex_shader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="fragment_shader" type="x-shader/x-fragment">
uniform vec3 color;
uniform sampler2D texture;
varying vec2 vUv;
void main() {
vec4 tColor = texture2D( texture, vUv );
gl_FragColor = vec4( mix( color, tColor.rgb, tColor.a ), 1.0 );
}
var texture = THREE.ImageUtils.loadTexture('./Avatar/FaceTestTr.png');
texture.needsUpdate = true;
var uniforms = {
color: { type: "c", value: new THREE.Color( 0xffffff ) }, // material is "red"
texture: { type: "t", value: texture },
transparent: true,
opacity: 0.9,
};
var AvatarTextureF = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById( 'vertex_shader' ).textContent,
fragmentShader : document.getElementById( 'fragment_shader' ).textContent
});
And this to apply it to the object:
object.children[1].material = AvatarTextureF;
I have tried a few ways, including just using a normal material:
var AvatarTextureF = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('./Avatar/FaceTestTr.png'), shininess: 80, color: 0xffcc66, shading: THREE.SmoothShading, alphaMap: 0x000000} );
With the same result.
Here is the updated code, now the head is just invisible..
Invisible head
Shaders:
<script type="x-shader/x-vertex" id="vertex_shader">
#if NUM_DIR_LIGHTS > 0
struct DirectionalLight {
vec3 direction;
vec3 color;
int shadow;
float shadowBias;
float shadowRadius;
vec2 shadowMapSize;
};
uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ];
#endif
//varying vec3 color;
void main() {
float r = directionalLights[0].color.r;
//color = vec3(r,0.6,0.6,0.6);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position , 1.0); }
</script>
<script type="x-shader/x-fragment" id="fragment_shader">
uniform vec3 color;
uniform sampler2D texture;
varying vec2 vUv;
void main() {
vec4 tColor = texture2D( texture, vUv );
gl_FragColor = vec4( mix( color, tColor.rgb, tColor.a ), 1.0 );
}
</script>
And the head:
var texture = THREE.ImageUtils.loadTexture('./Avatar/FaceTestTr.png');
texture.needsUpdate = true;
// uniforms
var uniforms = THREE.UniformsUtils.merge( [
THREE.UniformsLib[ "lights" ],
{
color: { type: "c", value: new THREE.Color( 0xffffff ) },
texture: { type: "t", value: texture }
}
] );
// material
var AvatarTextureF = new THREE.ShaderMaterial({
uniforms : uniforms,
vertexShader : document.getElementById( 'vertex_shader' ).textContent,
fragmentShader : document.getElementById( 'fragment_shader' ).textContent,
//transparent: true,
lights: true
});
Did you applied a transparent PNG with the face look?
gl_FragColor = vec4( mix( color, tColor.rgb, tColor.a ), 1.0 ); will be rendered in color value, if tColor.a is 0.0.
That means, it will be painted in white, which you set with color: { type: "c", value: new THREE.Color( 0xffffff ) }, except the face look where alpha is 1.0.
Change the color value from 0xffffff to color you want.
Also you are missing lighting process in your fragment shader.
i've added simple box to my scene, and I want to create shader that will add a texture to it and add color to this texture.
This is my vertex shader(nothing special about it):
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>
And this is my fragment shader:
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec2 resolution;
uniform float time;
uniform sampler2D texture;
varying vec2 vUv;
uniform vec3 color;
varying vec3 vColor;
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = fragCoord.xy / vec2(1920.0, 1920.0);
fragColor = vec4(uv, 0.5 + 0.5 * cos(time) * sin(time) ,1.0);
}
void main( void ) {
vec4 color = vec4(0.0,0.0,0.0,1.0);
mainImage( color, gl_FragCoord.xy );
color.w = 1.0;
gl_FragColor = texture2D(texture, vUv);
gl_FragColor = color;
}
</script>
As You can see, in two last lines i've sets gl_FragColor with texture and color.
When last line is gl_FragColor = color; The result is:
When i change order and last line is gl_FragColor = texture2D(texture, vUv); The result is:
This is the code that use shader and add a box to a scene:
var geometry = new THREE.BoxGeometry(.5, 1, .5);
uniforms = {
time: { type: "f", value: 1.0 },
resolution: { type: "v2", value: new THREE.Vector2() },
texture: { type: "t", value: THREE.ImageUtils.loadTexture("../img/disc.png") }
};
var material = new THREE.ShaderMaterial({
transparent: true,
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
Is there a possibility to color my texture(mix color and texture in object) by this shader in the same way like in the picture?
Just like any other variable setting it twice just makes it the 2nd result;
var foo;
foo = 123;
foo = 456;
foo now equals 456
If you want to combine the results you need to something yourself to combine them
gl_FragColor = texture2D(texture, vUv);
gl_FragColor = color;
Just means gl_FragColor equals color;
I'm guessing you want something like
gl_FragColor = texture2D(texture, vUv) * color;
But of course what math you use is up to you depending on what you're trying to achieve.
Given your example texture and color above multiplying the texture by the color you'll get a circle with a gradient color. It's not clear if that's the result you wanted.