My journey with ThreeJS started a few months back, leading me into the fascinating world of webgl. I delved into numerous courses on YouTube, but most of them were centered around 3D compositions.
While I have developed a basic understanding of how things work, there are still areas where I struggle to grasp concepts fully.
Here's where I need help:
I'm currently trying to figure out how to extract data, specifically pixel positions and values, from my displacement texture. My goal is to be able to swap values between my images for creating transitions.
I attempted to follow an example provided here, but I am using webpack and Three JS. My intention is not to simply copy code but to truly understand the process, which seems to lack information or comprehension on my part.
Researching online didn't yield much information, but as far as I could gather, my images are converted to textures in my code. This means I should have access to pixel values, convert them to UV coordinates, and then manipulate them to achieve the desired effect.
If you're interested in diving deeper, check out my repository.
Let me now show you what I've managed to accomplish so far with loading the images:
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);
Take a look at the Fragment and Vertex Code below:
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);
}