I'm setting up a texture on a mesh in three.js and when it loads it looks how I want it too:
texture = THREE.ImageUtils.loadTexture("textures/hash.png");
texture.needsUpdate = true;
uniforms = {
color: { type: "c", value: new THREE.Color( 0xffffff ) },
texture: { type: "t", value: texture },
},
vertexShader = "varying vec2 vUv; void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}",
fragmentShader = "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 );}",
material = new THREE.ShaderMaterial({
uniforms : uniforms,
vertexShader : vertexShader,
fragmentShader : fragmentShader
});
but I want to change the texture that is on this mesh later on, I have tried this:
obj.mesh.material.uniforms.texture = THREE.ImageUtils.loadTexture("textures/1.png");
obj.mesh.material.uniforms.texture.needsUpdate = true;
but this doesn't change the texture being displayed on the mesh, how can I change a texture on a THREE.ShaderMaterial ?
Assign the texture to obj.mesh.material.uniforms.texture.value instead. Also consider setting the needsUpdate flag after the texture has successfully loaded (by subscribing to the load event).
Related
I am trying to use three.js blending and I have been trying to get MultiplyBlending, SubtractiveBlending, NoBlending to work but all that I get are white squares:
When I use AdditiveBlending I get something that works:
fragment shader:
uniform sampler2D diffuseTexture;
varying vec4 vColor;
varying vec2 vAngle;
void main() {
vec2 coords = (gl_PointCoord - 0.5) * mat2(vAngle.x, vAngle.y, -vAngle.y, vAngle.x) + 0.5;
gl_FragColor = texture2D(diffuseTexture, coords) * vColor;
}
vertex shader:
uniform float pointMultiplier;
attribute float size;
attribute float angle;
varying vec4 vColor;
varying vec2 vAngle;
void main() {
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * mvPosition;
gl_PointSize = size * pointMultiplier / gl_Position.w;
vAngle = vec2(cos(angle), sin(angle));
vColor = color;
}
This is how I am creating the material and geometry in the TypeScript:
this.material = new Three.ShaderMaterial({
uniforms: {
diffuseTexture: {
value: new Three.TextureLoader().load(basicParticle)
},
pointMultiplier: {
value: window.innerHeight / (2.0 * Math.tan(0.5 * 60.0 * Math.PI / 180.0))
}
},
vertexShader,
fragmentShader,
blending: Three.MultiplyBlending,
depthTest: true,
depthWrite: false,
transparent: true,
vertexColors: true
});
this.geometry = new Three.BufferGeometry();
new Three.Points(this.geometry, this.material);
What is causing me to get white squares and how can I fix it? Is it the shaders, TypeScript, or both?
I am working on a scene in threejs that renders an image of a cat.
Specifically, I'd like to render a rectangle, and I'd like for the right half of that rectangle to be red, and for the left half of that rectangle to contain the full image of the cat (the image will be stretched and that's fine).
Here's my scene:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 2;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BufferGeometry();
var imageSize = {width: 3, height: 2};
// add verts
var coords = {x: -1.5, y: -1, z: 0};
var vertices = new Float32Array([
coords.x, coords.y, coords.z,
coords.x+imageSize.width, coords.y, coords.z,
coords.x+imageSize.width, coords.y+imageSize.height, coords.z,
coords.x, coords.y+imageSize.height, coords.z,
])
var uvs = new Float32Array([
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
])
geometry.setIndex([0,1,2, 2,3,0])
geometry.setAttribute('position', new THREE.BufferAttribute( vertices, 3 ));
geometry.setAttribute('uv', new THREE.BufferAttribute( uvs, 2) )
var loader = new THREE.TextureLoader();
var url = 'https://s3.amazonaws.com/duhaime/blog/tsne-webgl/assets/cat.jpg';
var material = new THREE.RawShaderMaterial({
uniforms: {
texture: {
type: 't',
value: loader.load(url)
},
},
vertexShader: document.getElementById('vertex-shader').textContent,
fragmentShader: document.getElementById('fragment-shader').textContent
});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0,0,0)
scene.add(mesh);
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
console.clear();
};
render();
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js'></script>
<script type='x-shader/x-vertex' id='vertex-shader'>
precision mediump float;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec3 cameraPosition;
attribute vec3 position;
attribute vec3 translation;
attribute vec2 uv;
varying vec2 vUv;
varying vec3 vPosition;
void main() {
vUv = uv;
vPosition = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script type='x-shader/x-fragment' id='fragment-shader'>
precision highp float;
uniform sampler2D texture;
varying vec2 vUv;
varying vec3 vPosition;
void main() {
vec2 uv = vUv;
if (vPosition.x > 0.0) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
} else {
gl_FragColor = texture2D(texture, uv);
}
}
</script>
As you can see, only half of the cat image is displayed on the left hand side of the rectangle. I'm not sure how to display the full cat image on the left hand side of the rectangle. Does anyone know? Any pointers would be greatly appreciated!
[...] I'd like for the right half of that rectangle to be red, and for the left half of that rectangle to contain the full image [...]
The texture coordinates are in the range [0.0, 1.0]. The center of the texture is at (0.5, 0.5). Therefore, in the right half of the texture, the x component of the texture coordinate is > 0.5. On the left, you need to scale the x component of the texture coordinates by 2.0:
gl_FragColor = vUv.x > 0.5
? vec4(1.0, 0.0, 0.0, 1.0)
: texture2D(texture, vec2(vUv.x*2.0, vUv.y));
I have 2 scenes, in one of them I have mapped a texture image to a plane geometry and I have simply rendered it, in the other scene I have a cube with shader material, now I want the image texure shown in hte first scene to be mapped to the cube surface, but I dont know how can I do it, can anyone help?
actually there is not enough documentation on what I want to do and I am somehow new to three.js so I have no idea what should I do in my HTML file's vertex and fragment shaders, only have done what I mentioned earlir.
here are my texture image and plane geometry in the first scene and the cube in the other, and also my fragment and vertex shader:
this.vertShader = document.getElementById('vertexShader').innerHTML;
this.fragShader = document.getElementById('fragmentShader').innerHTML;
var geometry = new THREE.BoxGeometry( 0.5, 0.5 );
var material = new THREE.MeshLambertMaterial( { color: "blue", wireframe:
true} );
this.mesh = new THREE.Mesh( geometry, material );
this.scene.add( this.mesh );
var texture = new THREE.TextureLoader().load ('js/textures/earth.jpg');
var texMaterial = new THREE.MeshBasicMaterial( { map: texture } );
var texGeometry = new THREE.PlaneGeometry(1, 1);
this.texmesh = new THREE.Mesh(texGeometry, texMaterial);
this.texmesh.position.set(0,0,0);
this.texScene.add(this.texmesh);
vertex shader:
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix *
vec4(position,1.0);
}
fragment shader:
uniform sampler2D texture;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D(texture, vUv);
}
I woud like the cube to be covered with the texture image.
In the fragment shader has to be declared a uniform variable of type sampler2D:
Vertex Shader:
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
Fragment Shader:
precision highp float;
uniform sampler2D u_texture; // <---------------------------------- texture sampler uniform
varying vec2 vUv;
void main(){
gl_FragColor = texture2D(u_texture, vUv);
}
With the shaders a THREE.ShaderMaterial can be created.
First load the texture:
var texture = new THREE.TextureLoader().load ('js/textures/earth.jpg');
Then specify the set of Uniforms (in this case there is the texture uniform only):
var uniforms = {
u_texture: {type: 't', value: texture}
};
Finally create the material:
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertex-shader').textContent,
fragmentShader: document.getElementById('fragment-shader').textContent
});
The material can be used in the same manner as any other material, see the example:
(function onLoad() {
var loader, camera, scene, renderer, orbitControls;
init();
animate();
function createModel() {
var texture = new THREE.TextureLoader().load( 'https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/Gominolas.png' );
var uniforms = {
u_texture: {type: 't', value: texture}
};
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertex-shader').textContent,
fragmentShader: document.getElementById('fragment-shader').textContent
});
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
function init() {
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(0, 1, -2);
loader = new THREE.TextureLoader();
loader.setCrossOrigin("");
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
scene.add(camera);
window.onresize = resize;
orbitControls = new THREE.OrbitControls(camera);
addGridHelper();
createModel();
}
function addGridHelper() {
var helper = new THREE.GridHelper(100, 100);
helper.material.opacity = 0.25;
helper.material.transparent = true;
scene.add(helper);
var axis = new THREE.AxesHelper(1000);
scene.add(axis);
}
function resize() {
var aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = aspect;
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame(animate);
orbitControls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
})();
<script type='x-shader/x-vertex' id='vertex-shader'>
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script type='x-shader/x-fragment' id='fragment-shader'>
precision highp float;
uniform sampler2D u_texture;
varying vec2 vUv;
void main(){
gl_FragColor = texture2D(u_texture, vUv);
}
</script>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
I'm using THREE.js r73, and I'm trying to make a particle system using THREE.BufferGeometery to hold the vertices and THREE.ShaderMaterial to add functionality to them. For some reason, I'm getting the error above. Here is my code (using Typescript). The error is occurring at the line gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord ); (The last one in the fragment shader).
this.particleSystem = new THREE.PointCloud(
this.particles,
new THREE.ShaderMaterial({
uniforms: {
texture: wTex
},
vertexShader: `
attribute vec3 color;
attribute float size;
varying vec3 vColor;
varying vec2 vUv;
void main() {
vUv = uv;
vColor = color; // set color associated to vertex; use later in fragment shader
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );
gl_Position = projectionMatrix * mvPosition;
}
`,
fragmentShader: `
uniform sampler2D texture;
varying vec3 vColor; // colors associated to vertices; assigned by vertex shader
varying vec2 vUv;
void main() {
// calculates a color for the particle
gl_FragColor = vec4( vColor, 1.0 );
// sets particle texture to desired color
gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}
`
})
);
The code was adapted from some examples I found online, but I understand it.
You're not constructing the uniform correctly. It should be...
uniforms: {
texture: { type: 't', value: wTex }
}
I have this material:
<script id="vertexShader2" type="x-shader/x-vertex">
varying vec2 vUv;
void main()
{
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<!-- fragment shader a.k.a. pixel shader -->
<script id="fragmentShader2" type="x-shader/x-vertex">
uniform sampler2D baseTexture;
uniform float baseSpeed;
uniform sampler2D noiseTexture;
uniform float noiseScale;
uniform float alpha;
uniform float time;
varying vec2 vUv;
void main()
{
vec2 uvTimeShift = vUv + vec2( -0.7, 1.5 ) * time * baseSpeed;
vec4 noiseGeneratorTimeShift = texture2D( noiseTexture, uvTimeShift );
vec2 uvNoiseTimeShift = vUv + noiseScale * vec2( noiseGeneratorTimeShift.r, noiseGeneratorTimeShift.b );
vec4 baseColor = texture2D( baseTexture, uvNoiseTimeShift );
baseColor.a = alpha;
gl_FragColor = baseColor;
}
</script>
var noiseTexture = new THREE.ImageUtils.loadTexture( 'img/wormholes/cloud.png' );
noiseTexture.wrapS = noiseTexture.wrapT = THREE.RepeatWrapping;
var lavaTexture = new THREE.ImageUtils.loadTexture( "img/planets/"+value['texture_clouds'] );
lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping;
this.earthUniforms = {
baseTexture: { type: "t", value: lavaTexture },
baseSpeed: { type: "f", value: 0.001 },
noiseTexture: { type: "t", value: noiseTexture },
noiseScale: { type: "f", value: 0.07337 },
alpha: { type: "f", value: 10.0 },
time: { type: "f", value: 1.0 }
};
animatedSurfaces.push(earthUniforms);
var customMaterial = new THREE.ShaderMaterial(
{
uniforms: earthUniforms,
vertexShader: document.getElementById( 'vertexShader2' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader2' ).textContent,
specular : new THREE.Color("rgb(255,255,255)"),
shininess : 0.1,
depthTest : 0,
blending : 1,
transparent: true,
bumpScale : 1, //0.8
bumpMap : THREE.ImageUtils.loadTexture( "img/planets/"+value['texture_clouds_alpha'] ),
map : THREE.ImageUtils.loadTexture( "img/planets/"+value['texture_clouds'] ),
color : 0xffffff,
//opacity : 0.1,
emissive : new THREE.Color("rgb(30,22,20)"),
alphaMap : THREE.ImageUtils.loadTexture( "img/planets/"+value['texture_clouds_alpha']),
});
It is reacting with light like MeshBasic material.
I need to react like MeshLambert material with alpha map.
It means to configure material black color in "lavatexture" to be transparent, and reacting on light source. Lighted side to have diffuse color, and side in shadow to have specular color.
How to solve this, when uniforms don't let material to behive like meshLambertMaterial, i cant set diffuse and specular color.
But i need that uniforms effect. (lava effect http://stemkoski.github.io/Three.js/Shader-Animate.html)
r71