Issue with adjusting the column width in the three.js shader

Question

Issue with adjusting the column width in the three.js shader

My challenge involves dividing a shader into 6 columns and 3 rows, each with dimensions of 100vw by 100vh. The goal is to have the rows evenly proportioned by height. However, the width of the shader segments should vary in proportions of 17.65vw, 16.25vw, 16.32vw, 16.32vw, 16.25vw, and 17.15vw from left to right. Currently, all segments have the same width, preventing me from achieving the desired result.

I received the initial code from a web designer, which was built using React. Since I needed it in JavaScript, I rewrote the code but encountered an issue where the shader segments were only square-shaped and couldn't be adjusted for different shapes and sizes. Despite researching three.js and reviewing the provided code, I haven't been able to make it work as intended. Here is my code:

const canvas = document.getElementById('canvas');
    const renderer = new THREE.WebGLRenderer({ canvas });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    const scene = new THREE.Scene();

    const camera = new THREE.OrthographicCamera(
        window.innerWidth / -2, window.innerWidth / 2,
        window.innerHeight / 2, window.innerHeight / -2,
        0.1, 1000
    );
    camera.position.z = 1;

    window.addEventListener('resize', () => {
        const width = window.innerWidth;
        const height = window.innerHeight;
        renderer.setSize(width, height);
        camera.left = width / -2;
        camera.right = width / 2;
        camera.top = height / 2;
        camera.bottom = height / -2;
        camera.updateProjectionMatrix();
    });

    const vertexShader = `
        varying vec2 vUv;
        void main() {
            vUv = uv;
            vec4 modelPosition = modelMatrix * vec4(position, 1.0);
            vec4 viewPosition = viewMatrix * modelPosition;
            vec4 projectionPosition = projectionMatrix * viewPosition;
            gl_Position = projectionPosition;
        }
    `;

    const fragmentShader = `
        uniform float time;
        uniform vec2 resolution;
        uniform vec2 pointer;
        varying vec2 vUv;

        // Fragment shader logic goes here

    `;

    const uniforms = {
        time: { value: 0 },
        resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
        pointer: { value: new THREE.Vector2(0, 0) }
    };

    // Shader material setup

    const geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight);
    const plane = new THREE.Mesh(geometry, material);
    scene.add(plane);

    const clock = new THREE.Clock();
    function animate() {
        uniforms.time.value += clock.getDelta();
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }

    animate();

#canvas {
  display: block; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh;
}

<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

I am seeking assistance in making the shader's column (segments') width adjustable and distinct from each other. Can you please help me find a solution?

javascript three.js shader

Answer 1

Answer №1

expanding the number of segments in PlaneGeometry is possible.

const widthSegments = 6
const heightSegments = 3

const geometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)

By adjusting geometry.attributes.position, you can alter the behavior to achieve this result: https://i.sstatic.net/fluTlO6t.png To accomplish this, use the following function:

function adjustPlaneGeomPosAttr(planeGeometry, widthSegments, heightSegments) {
    function validate(value, valueCheck) {
        if ( !(value instanceof Array) || (value instanceof Array && value?.length != valueCheck)) {
            if (value instanceof Number) {
                return new Array(value).fill(1)
            } else {
                return new Array(valueCheck).fill(1)
            }
        } else {
            return value
        }
    }

    widthSegments   = validate(widthSegments , planeGeometry.parameters.widthSegments )
    heightSegments  = validate(heightSegments, planeGeometry.parameters.heightSegments)

    const widthPos   = widthSegments .reduce((ac,a,i)=>{ac[i+1]=ac[i]+a; return ac}, new Array(widthSegments .length+1).fill(0)).map((a,_,A)=>a/A.at(-1))
    const heightPos  = heightSegments.reduce((ac,a,i)=>{ac[i+1]=ac[i]+a; return ac}, new Array(heightSegments.length+1).fill(0)).map((a,_,A)=>a/A.at(-1))

    const pos = planeGeometry.attributes.position.array
    let i = 0;
    for (yPos of heightPos) {
        y = (yPos-0.5)*planeGeometry.parameters.height

        for (xPos of widthPos) {        
            x = (xPos-0.5)*planeGeometry.parameters.width

            pos[i++] = x
            pos[i++] = -y
            pos[i++] = 0
        }
    }
}

planeGeometry represents the THREE.PlaneGeometry you wish to modify
widthSegments should be an Array with a length equal to the widthSegments of PlaneGeometry (if you don't want to change widthSegments, just set it to null)
heightSegments should be an Array with a length equal to the heightSegments of PlaneGeometry (if you don't want to change heightSegments, simply set it to null or omit specifying a value)

To demonstrate how to apply this function, here's an example:

const geometry = new THREE.PlaneGeometry(width, height, 6, 3);
adjustPlaneGeomPosAttr(geometry, [1,2,3,4,5,6], [1,2,3])

In this scenario:
widthSegments = [1,2,3,4,5,6], indicating relative widths for each segment (the overall width remains unchanged)
heightSegments = [1,2,3], denoting relative heights for each segment (the total height stays constant)
As a result, you will see: https://i.sstatic.net/6ER1YdBM.png For your specific situation, assign widthSegments as

[17.65, 16.25, 16.32, 16.32, 16.25, 17.15]

Complete code section:

function modifyPlaneGeomPosAttr(planeGeometry, widthSegments, heightSegments) {
    // Function code here...
}

// Additional code snippet...

#css styles go here...

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <canvas id="canvas"></canvas>
    <input type="range" min=0 max=1 step=0.001 value=0.385>

Answer 2

expanding the number of segments in PlaneGeometry is possible.

const widthSegments = 6
const heightSegments = 3

const geometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)

By adjusting geometry.attributes.position, you can alter the behavior to achieve this result: https://i.sstatic.net/fluTlO6t.png To accomplish this, use the following function:

function adjustPlaneGeomPosAttr(planeGeometry, widthSegments, heightSegments) {
    function validate(value, valueCheck) {
        if ( !(value instanceof Array) || (value instanceof Array && value?.length != valueCheck)) {
            if (value instanceof Number) {
                return new Array(value).fill(1)
            } else {
                return new Array(valueCheck).fill(1)
            }
        } else {
            return value
        }
    }

    widthSegments   = validate(widthSegments , planeGeometry.parameters.widthSegments )
    heightSegments  = validate(heightSegments, planeGeometry.parameters.heightSegments)

    const widthPos   = widthSegments .reduce((ac,a,i)=>{ac[i+1]=ac[i]+a; return ac}, new Array(widthSegments .length+1).fill(0)).map((a,_,A)=>a/A.at(-1))
    const heightPos  = heightSegments.reduce((ac,a,i)=>{ac[i+1]=ac[i]+a; return ac}, new Array(heightSegments.length+1).fill(0)).map((a,_,A)=>a/A.at(-1))

    const pos = planeGeometry.attributes.position.array
    let i = 0;
    for (yPos of heightPos) {
        y = (yPos-0.5)*planeGeometry.parameters.height

        for (xPos of widthPos) {        
            x = (xPos-0.5)*planeGeometry.parameters.width

            pos[i++] = x
            pos[i++] = -y
            pos[i++] = 0
        }
    }
}

planeGeometry represents the THREE.PlaneGeometry you wish to modify
widthSegments should be an Array with a length equal to the widthSegments of PlaneGeometry (if you don't want to change widthSegments, just set it to null)
heightSegments should be an Array with a length equal to the heightSegments of PlaneGeometry (if you don't want to change heightSegments, simply set it to null or omit specifying a value)

To demonstrate how to apply this function, here's an example:

const geometry = new THREE.PlaneGeometry(width, height, 6, 3);
adjustPlaneGeomPosAttr(geometry, [1,2,3,4,5,6], [1,2,3])

In this scenario:
widthSegments = [1,2,3,4,5,6], indicating relative widths for each segment (the overall width remains unchanged)
heightSegments = [1,2,3], denoting relative heights for each segment (the total height stays constant)
As a result, you will see: https://i.sstatic.net/6ER1YdBM.png For your specific situation, assign widthSegments as

[17.65, 16.25, 16.32, 16.32, 16.25, 17.15]

Complete code section:

function modifyPlaneGeomPosAttr(planeGeometry, widthSegments, heightSegments) {
    // Function code here...
}

// Additional code snippet...

#css styles go here...

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <canvas id="canvas"></canvas>
    <input type="range" min=0 max=1 step=0.001 value=0.385>

Issue with adjusting the column width in the three.js shader

Answer №1

Similar questions

The return statement seems to be coming up blank

What is the importance of updating project dependencies regularly?

Ensuring the absence of non-UTF8 characters in JavaScript

Resposiveness of force-directed graph is lost

What is the best way to add a dynamic parameter to the URL?

Sorting a function with two parameters in descending order is possible even when dealing with an empty array and no initial value for reduction

Is the element loaded but not appearing on screen?

Combining Python Arrays with JavaScript Indexing in Django's Template Language

How come every time I click on a different lightbox link, it always shows the same content

Can information be securely transmitted using Ajax?

Do discrepancies exist between ' and " symbols?

"After clicking the button for the second time, the jQuery on-click function begins functioning properly

Utilizing Ajax and JQuery to invoke a PHP function with parameters

Is there a way to retrieve all IDs within an array of objects using a foreach loop and merge the data associated with each ID?

Steps for displaying a loading gif animation prior to retrieving text content using JavaScript

Is it possible to create personalized BBCode?

Trigger a PHP function with an image's OnClick event

Import reactjs modules without the need for Browserify, Webpack, or Babel

Simple Method to Retrieve one document from Firebase v9 in a React Application

Providing static content within the generated code structure by Yeoman for the Angular Fullstack framework