I have one problem here)
I decided to use my shader for (scene.overrideMaterial) and I need to somehow get the map texture.
MaterialsShader = {
uniforms: {
time: { type: 'f', value: 0.0 },
},
vertexShader:
"varying vec2 vUv; \n\
void main(){\n\
vUv = uv;\n\
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0 );\n\
gl_Position = projectionMatrix * mvPosition;\n\
}",
fragmentShader: [
'varying vec2 vUv;',
'uniform float opacity;',
'#ifdef USE_MAP',
'uniform sampler2D map;',
'#endif',
'void main(){',
'vec3 color = vec3(1.0,0.0,0.0) * opacity;',
'#ifdef USE_MAP',
'vec4 mapTexel = texture2D( map, vUv.xy );',
'gl_FragColor = mapTexel;',
'#endif',
//'gl_FragColor.rgb = color;',
'}'].join("\n")
}
But for some reason the texture itself does not exist, I get black material.
var uniforms = THREE.UniformsUtils.clone( MaterialsShader.uniforms );
uniforms = THREE.UniformsUtils.merge( [uniforms, THREE.UniformsLib['common'],THREE.UniformsLib['lights']] );
var material = new THREE.ShaderMaterial({
uniforms : uniforms,
vertexShader : MaterialsShader.vertexShader,
fragmentShader : MaterialsShader.fragmentShader,
});
How can I get a (map) texture?
1) You need to actually define your map uniform...
MaterialsShader = {
uniforms: {
time: { type: 'f', value: 0.0 },
map: { type: 't', value: yourLoadedTexture },
},
2) You need to define USE_MAP in order to enter that code segment of your shader. Either add this to the top of your shader code:
#define USE_MAP true
Or you can set a defines property for your shader:
var material = new THREE.ShaderMaterial({
uniforms : uniforms,
vertexShader : MaterialsShader.vertexShader,
fragmentShader : MaterialsShader.fragmentShader,
map : yourLoadedTexture,
defines : {
USE_MAP: true
}
});
These have the same effect.
Related
Need help to make opacity work on shader with gradient and alpha map texture.
With code below results are next: gradient is working but opacity is not.
This is my alpha texture
and this is a geometry and material
const geometry = new THREE.BoxGeometry(32, 32);
const material = new THREE.ShaderMaterial({
uniforms: {
transparent: true,
alphaMap: { value: alphaTexture },
color1: {
value: new THREE.Color("purple")
},
color2: {
value: new THREE.Color("red")
}
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform vec3 color1;
uniform vec3 color2;
uniform sampler2D alphaMap;
varying vec2 vUv;
void main() {
float alpha = texture2D(alphaMap, vUv).r;
vec3 color = mix(color1, color2, vUv.y);
gl_FragColor = vec4(color, alpha);
}
`,
});
as you can see, the black part of the texture is becoming white, but has to be transparent.
Make sure the transparent: true property is outside your uniforms object:
uniforms: {
// alphamap, color1, color2
},
transparent: true,
I have a classic mesh composed by a THREE.PlaneGeometry and a material. If I add a THREE.MeshNormalMaterial() here's the result I get :
So far, so good. But when I call my THREE.ShaderMaterial(), using an external texture, the dimension of my mesh completely changes :
I always get that weird ratio even if - like in the screenshot - my texture is a square (512x512). I just want my MaterialShader to fit inside my geometry.
Here is the code of my MaterialShader :
var material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
I don't see what I'm missing. Does anyone has an idea ? Thank you very much.
UPDATE :
Here's the fully code of my ShaderMaterial :
material = new THREE.ShaderMaterial({
uniforms:{
u_time: { type: "f", value: 1.0 },
u_resolution: { type: "v2", value: new THREE.Vector2() },
u_mouse: { type: "v2", value: new THREE.Vector2() },
texture1: { type: "t", value: texture }
},
vertexShader:`
void main() {
gl_Position = vec4( position, 1.0 );
}
`,
fragmentShader:`
#ifdef GL_ES
precision highp float;
precision highp int;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform sampler2D texture1;
void main(){
float pyt=3.1415926*2./3.;
float m=-1e10;
vec4 mv= vec4(0.);
vec2 xy = gl_FragCoord.xy/u_resolution.xy;
int ic=0;
for (int i=0;i<30;i++){
vec2 np=vec2(xy.x+float(i)/u_resolution.x*sin(3.14/2.) * 4.,xy.y+float(i)/u_resolution.y*cos(3.14/2.) * 4.);
float jTime = u_time*1.618;
vec4 tk=texture2D(texture1,np);
float t=tk.r*sin(jTime)+tk.g*sin(jTime+pyt)+tk.b*sin(jTime+2.*pyt)-.01*float(i);
if (t>m){m=t; mv=tk;ic=i;}
}
float sc=float(ic)/30.;
vec4 tk=texture2D(texture1,xy);
mv=sc*tk+(1.-sc)*mv;
gl_FragColor = vec4(mv.r,mv.g,mv.b,1.0);
}
`
});
UPDATE2 :
I changed my vertex shader but nothing has changed.
I might have a lead : I think this is related to my camera settings. I changed them and I've a better result. Now my texture fits into my square mesh.
Unfortunately, the scale isn't good. Since my texture is a square too, I want it to have exactly the same size than my mesh, for now it's zoomed.
How can I manage the size of my texture ? Should I do it inside my vertexShader ?
Here's my texture settings for now :
texture = new THREE.TextureLoader().load( "test5.jpg");
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
UPDATE 3 :
I found that code to apply a texture and make it fit to my mesh :
https://bl.ocks.org/duhaime/c8375f1c313587ac629e04e0253481f9
It's working but as soon as I change the example fragement shader by mine, I've no errors but the shaders become one unique color. I don't understand what I'm missing...
Try this code of the vertex shader:
void main() {
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(position,1.0);
}
Reference
Simply pass the uv coordinates from the vertex shader to the fragment shader and use them there.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x404040);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var iResolution = new THREE.Vector2();
var planeGeo = new THREE.PlaneBufferGeometry(5, 5);
var planeMat = new THREE.ShaderMaterial({
uniforms: {
texture: {
value: null
},
iResolution: {
value: iResolution
},
iTime: {
value: 0
}
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(position,1.0);
}
`,
fragmentShader: `
uniform sampler2D texture;
uniform float iTime;
uniform vec2 iResolution;
varying vec2 vUv;
void main() {
float pyt=3.1415926*2./3.;
float m=-1e10;//very negitive start value for maximisation algorithm.
vec4 mv= vec4(0.);//lank starting value of max so far
vec2 xy = vUv;
int ic=0;//stores smear distance
for (int i=0;i<30;i++){
//point offset on a circle
vec2 np=vec2(xy.x+float(i)/iResolution.x*sin(iTime),xy.y+float(i)/iResolution.y*cos(iTime));
//colour cycles faster than position
float jTime = iTime*1.618;
//get neerby point
vec4 tk=texture2D(texture,np);
// and if its colourfull enough, use that
float t=tk.r*sin(jTime)+tk.g*sin(jTime+pyt)+tk.b*sin(jTime+2.*pyt)-.01*float(i);
if (t>m){m=t; mv=tk;ic=i;}
}
//mix smeared with background depending ondistance
float sc=float(ic)/30.;
vec4 tk=texture2D(texture,xy);
mv=sc*tk+(1.-sc)*mv;
gl_FragColor = vec4(mv.rgb,1.0);
}
`
});
var textureLoader = new THREE.TextureLoader();
textureLoader.load("https://threejs.org/examples/textures/UV_Grid_Sm.jpg", tex => {
planeMat.uniforms.texture.value = tex;
planeMat.uniforms.texture.value.needsUpdate = true;
iResolution.set(tex.image.width, tex.image.height);
planeMat.needsUpdate = true;
console.log(texture);
});
var plane = new THREE.Mesh(planeGeo, planeMat);
scene.add(plane);
var clock = new THREE.Clock();
var time = 0;
render();
function render() {
requestAnimationFrame(render);
time += clock.getDelta();
planeMat.uniforms.iTime.value = time;
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
I am trying to reuse the existing basic, lambert, and phong material so I can have bumps, normal maps, ..etc on my mirror reflections. I am using the latest revision of three.js which is 87.
I have tried using the onBeforeCompile function to append and replace part of the MeshBasicMaterial vertex and fragment code but my mirror is not showing.
Can someone please help. Thank you.
Here is what I have did in the mirror.js
/* commented out the existing code that use the shaderLib mirror shader
var mirrorShader = THREE.ShaderLib[ "mirror" ];
var mirrorUniforms = THREE.UniformsUtils.clone( mirrorShader.uniforms );
//console.log('opacity:', this.mirror_opacity)
mirrorUniforms['opacity'].value = this.mirror_opacity;
this.material = new THREE.ShaderMaterial( {
fragmentShader: mirrorShader.fragmentShader,
vertexShader: mirrorShader.vertexShader,
uniforms: mirrorUniforms,
transparent: true
} );
this.material.uniforms.mirrorSampler.value = this.renderTarget.texture;
this.material.uniforms.mirrorColor.value = mirrorColor;
this.material.uniforms.textureMatrix.value = this.textureMatrix;
*/
/* Here is the material I am replacing with */
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load("images/test.jpg");
this.material = new THREE.MeshBasicMaterial({ map: texture});
var mirror_texture = this.renderTarget.texture;
this.material.onBeforeCompile = function ( shader ) {
let mirrormap_pars_vertex = [
'uniform mat4 textureMatrix;',
'varying vec2 texCoord;',
'varying vec4 mirrorCoord;\n',
] .join('\n');
shader.vertexShader = mirrormap_pars_vertex + shader.vertexShader;
shader.vertextShader = shader.vertexShader.replace(
'#include <begin_vertex>',
[
'vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
'vec4 worldPosition = modelMatrix * vec4( position, 1.0 );',
'mirrorCoord = textureMatrix * worldPosition;',
'texCoord = uv;',
'gl_Position = projectionMatrix * mvPosition;\n',
].join( '\n' )
);
let mirrormap_pars_fragment = [
'uniform vec3 mirrorColor;',
'uniform sampler2D mirrorSampler;',
'uniform sampler2D maskSampler;',
'varying vec4 mirrorCoord;',
'varying vec2 texCoord;\n',
].join('\n');
shader.fragmentShader = mirrormap_pars_fragment + shader.fragmentShader;
shader.fragmentShader = shader.fragmentShader.replace(
'#include <map_fragment>',
[
'#ifdef USE_MAP\n',
'vec4 mask = texture2D(maskSampler, texCoord);',
'vec4 color = texture2DProj(mirrorSampler, mirrorCoord);',
//'vec4 texelColor = texture2D( map, vUv );',
//'color = vec4(blendOverlay(mirrorColor.r, color.r), blendOverlay(mirrorColor.g, color.g), blendOverlay(mirrorColor.b, color.b), opacity);',
//'color.a *= texture2D(maskSampler, texCoord).g;'
'diffuseColor *= color;',
'#endif\n',
].join( '\n' )
);
shader.uniforms.mirrorSampler = {type : "t", value : mirror_texture};
shader.uniforms.textureMatrix = { type: "m4", value: new THREE.Matrix4() };
shader.uniforms.maskSampler = {type: "t", value: null}
shader.uniforms.mirrorColor = { type: "c", value: new THREE.Color(0x7F7F7F) };
console.log("shader", shader )
I'm using this shader to chromakey a video. I would like to add opacity to the same video. I've been trying to add the opacity component to the shader but something more must be missing (don't know what).
I've added opacity in the schema:
opacity: {type: 'number', is: 'uniform', default: 0.5}
And in the update function:
this.material.uniforms.opacity = data.opacity
Here's all the shader code:
AFRAME.registerShader('chromakey', {
schema: {
src: {type: 'map'},
color: {default: {x: 0.1, y: 0.9, z: 0.2}, type: 'vec3', is: 'uniform'},
transparent: {default: true, is: 'uniform'},
opacity: {type: 'number', is: 'uniform', default: 0.5}
},
init: function (data) {
var videoTexture = new THREE.VideoTexture(data.src)
videoTexture.minFilter = THREE.LinearFilter
this.material = new THREE.ShaderMaterial({
uniforms: {
color: {
type: 'c',
value: data.color
},
texture: {
type: 't',
value: videoTexture
}
},
vertexShader: this.vertexShader,
fragmentShader: this.fragmentShader
})
},
update: function (data) {
this.material.color = data.color
this.material.src = data.src
this.material.transparent = data.transparent
this.material.uniforms.opacity = data.opacity
},
vertexShader: [
'varying vec2 vUv;',
'void main(void)',
'{',
'vUv = uv;',
'vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
'gl_Position = projectionMatrix * mvPosition;',
'}'
].join('\n'),
fragmentShader: [
'uniform sampler2D texture;',
'uniform vec3 color;',
'varying vec2 vUv;',
'void main(void)',
'{',
'vec3 tColor = texture2D( texture, vUv ).rgb;',
'float a = (length(tColor - color) - 0.5) * 7.0;',
'gl_FragColor = vec4(tColor, a);',
'}'
].join('\n')
})
When you update the value of the uniform (function update), the you have to set the value property and you have to set the notification, that the uniforms of the material needs to be updated (needsUpdate):
this.material.uniforms.opacity.value = data.opacity
this.material.needsUpdate = true
Further you have to add the uniform opacity to the fragment shader. See the following fragment shader which multiplies the opacity uniform to the alpha channel:
uniform float opacity;
uniform sampler2D texture;
uniform vec3 color;
varying vec2 vUv;
void main(void)
{
vec3 tColor = texture2D( texture, vUv ).rgb;
float a = (length(tColor - color) - 0.5) * 7.0;
gl_FragColor = vec4(tColor, a * opacity);
}
Note, if opacity is set to 0.0, the output will disappear completely.
You would need to add an opacity uniform to the shader in order for it to support what you want.
Try the following code (I haven't tested it) and see if it behaves how you want
fragmentShader: [
'uniform sampler2D texture;',
'uniform vec3 color;',
'uniform float opacity;', // add the uniform to the shader
'varying vec2 vUv;',
'void main(void)',
'{',
'vec3 tColor = texture2D( texture, vUv ).rgb;',
'float a = (length(tColor - color) - 0.5) * 7.0;',
'gl_FragColor = vec4(tColor, a*opacity);', // add the opacity multiplier to the alpha channel
'}'
].join('\n')
I was wondering how to put two materials on the same object...
I have a shader material that I use for the colors, but I also want to have a basing lambert shading.
Here is the code :
var material1 = new THREE.ShaderMaterial( {
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
var material2 = new THREE.MeshLambertMaterial({
color: 0xffffff,
});
var materials = [material1, material2];
var group = new THREE.Object3D();
var plane = new THREE.Mesh(geometry, materials);
Can you help me ?
Here is a fiddle that shows how to incorporate the lambert chuck into your own shader.
Is this what you wanted?
It calculates in the vertex shader the same as the THREE.MeshLambertMaterial.
var myShader = {
uniforms : THREE.UniformsUtils.merge([
THREE.UniformsLib['lights'],
{
color : {type:"c", value:new THREE.Color(0x0000ff)}
}
]),
vertexShader : [
THREE.ShaderChunk[ "common" ],
'varying vec3 vLightFront;',
THREE.ShaderChunk[ "lights_lambert_pars_vertex" ],
'void main() {',
' vec3 transformedNormal = normalMatrix * normal;',
' vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
THREE.ShaderChunk[ "lights_lambert_vertex" ],
' gl_Position = projectionMatrix * mvPosition;',
'}'
].join('\n'),
fragmentShader : [
'uniform vec3 color;',
'varying vec3 vLightFront;',
'void main() {',
' vec3 outgoingLight = color.rgb + vLightFront;',
' gl_FragColor = vec4(outgoingLight, 1.0);',
'}',
].join('\n'),
};
material = new THREE.ShaderMaterial({
uniforms : myShader.uniforms,
vertexShader : myShader.vertexShader,
fragmentShader : myShader.fragmentShader,
lights: true
});