I started to use ThreeJS a few months ago and that lead me to webgl.
I watched a bunch of courses on youtube but most of them are oriented to 3d compositions.
So far I got a basic understanding of how this works but I´m still suck at some stuff.
Here is the thing.
I’m trying to understand how to get the data, meaning pixel position and values, from my displacement texture so I can switch the values between my images and make a transition.
I was following this example here but I’m using webpack and three JS and my porpouse here is not to copy but to understand how this works and I think here is missing information or I just can’t understand.
Anyway, I couldn’t find much information about this on the web but as far as I could get is that my images are converted to textures in my code so I should have the values of every pixel of my images and convert those values to UV coordinates and switch the values between my images to get the effect I want.
Here is a link to my repo.
So far I have this.
Here is how I load the images and
import * as THREE from 'three';
import { imgTexture1, imgTexture2, imgTexture3 } from './imgLoaderManager.js';
import vertexShader from './glsl/vertex.glsl';
import fragmentShader from './glsl/fragment.glsl';
//
const texturesArr = [imgTexture1, imgTexture2, imgTexture3];
const planeGeometry = new THREE.PlaneBufferGeometry(3, 3);
const planeMaterial = new THREE.ShaderMaterial({
vertexShader: vertexShader,
fragmentShader: fragmentShader,
side: THREE.DoubleSide,
});
planeMaterial.uniforms.uTime = { value: 0 };
planeMaterial.uniforms.uTexture1 = { value: imgTexture1 };
planeMaterial.uniforms.uTexture2 = { value: imgTexture2 };
planeMaterial.uniforms.uTexture3 = { value: imgTexture3 };
planeMaterial.uniforms.uTexture = {
value: new THREE.TextureLoader().load(texturesArr),
};
console.log(planeMaterial);
console.log(planeGeometry.attributes);
console.log(imgTexture1);
console.log(imgTexture2);
console.log(imgTexture3);
export const plane = new THREE.Mesh(planeGeometry, planeMaterial);
Here is my Fragment and vertex Code
varying vec2 vUv;
varying vec3 vPosition;
uniform sampler2D uTexture1;
uniform sampler2D uTexture2;
uniform sampler2D uTexture3;
void main() {
vec3 img1 = texture2D(uTexture1, vUv).xyz;
vec3 img2 = texture2D(uTexture2, vUv).xyz;
vec3 img3 = texture2D(uTexture3, vUv).xyz;
gl_FragColor = vec4(img1 * img2 * img3, 1);
//gl_FragColor = vec4(vPosition, 1);
}
//////////////////////////////////////////////
varying vec2 vUv;
varying vec3 vPosition;
void main() {
vPosition = position;
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
2
Answers
I found a solution to this. If anyone here is trying to understand how this works.
I don’t really understand what effect you would like to achieve/understand… If it’s the one in the example you provided, you can do it using the
mix
function and interpolate the values. Instead of colors, you can use your textures.You also have coordinates and pixel values printed.