Update geometry with image [Solved]

Questions
1

Hi!
I have been working on changing an image and that it becomes particles and it works but when I change the image, it does not update and also starts to slow down the browser.

Neither with verticesNeedUpdate works

The part important is the Drawmap function

(In the html file i call changeState to update the image)

The code is this

var renderer, scene, camera, ww, wh, particles, mw, mh, mz, numState;

numState = 0;

mz = 6; // Matrerial size

ww = document.getElementById('map-container').offsetWidth,

wh = 450;

mw = ww * 2;

mh = wh * 2;

renderer = new THREE.WebGLRenderer({

    canvas: document.getElementById("map"),

    antialias: false

});

camera = new THREE.OrthographicCamera( ww / - 2, ww / 2, wh / 2, wh / - 2, 1, 1000 );

scene = new THREE.Scene();

particles = new THREE.Points();

var centerVector = new THREE.Vector3(0, 0, 0);

var previousTime = 0;

    speed = 10;

    isMouseDown = false;

var getImageData = function(image) {

    var canvas = document.createElement("canvas");

    canvas.width = image.width;

    canvas.height = image.height;

    var ctx = canvas.getContext("2d");

    ctx.drawImage(image, 0, 0);

    return ctx.getImageData(0, 0, image.width, image.height);

}

var material = new THREE.PointsMaterial({

    size: 3,

    color: 0xFFFFFF,

    sizeAttenuation: false

});

particles.material = material

scene.add(camera);

scene.add(particles);

var drawTheMap = function() {

    let vertices = particles.geometry; // this acts as a REFERENCE!

    vertices.length = 0; // clears the vertices array

    for (var y = 0, y2 = imagedata.height; y < y2; y += 2) {

        for (var x = 0, x2 = imagedata.width; x < x2; x += 2) {

            if (imagedata.data[(x * 4 + y * 4 * imagedata.width)] < 128) {

                var vertex = new THREE.Vector3();

                vertex.x = x - imagedata.width / 2;

                vertex.y = -y + imagedata.height / 2;

                vertex.z = -Math.random()*500;

                vertex.speed = Math.random() / speed + 0.015;

                vertices.vertices.push(vertex);

                

                vertex = null

            }

        }

    }

    

    particles.geometry.verticesNeedUpdate = true;

    requestAnimationFrame(render);

};

var init = function() {

    renderer.setSize(ww, wh);

    renderer.setClearColor(0x12347C);

    

    camera.position.set(7, 0, 4);

    camera.lookAt(centerVector);

    

    camera.zoom = 4;

    camera.updateProjectionMatrix();

    imagedata = getImageData(image);

    drawTheMap();

    

    onResize();

    window.addEventListener('mousemove', onMousemove, false);

    window.addEventListener('mousedown', onMousedown, false);

    window.addEventListener('mouseup', onMouseup, false);

    window.addEventListener('resize', onResize, false);

};

var onResize = function(){

    var mov1, mov2;

    ww = document.getElementById('map-container').offsetWidth;

    wh = 450;

    

    if (window.innerWidth > 850) {

        mw = ww * 2;

        mh = wh * 2;

        mz = 6;

        mov1 = 2.2;

        mov2 = 1.9;

        particles.material.size = mz;

    } else {

        mw = ww;

        mh = wh;

        mz = 3;

        mov1 = 2;

        mov2 = 2;

        particles.material.size = mz;

    }

    renderer.setSize(mw, mh);

    camera.left    = ww / - mov1;

    camera.right   = ww / 2;

    camera.top     = wh / mov2;

    camera.bottom  = wh / - 2;

    camera.updateProjectionMatrix();

};

var onMouseup = function(){

    isMouseDown = false;

}

var onMousedown = function(e){

    isMouseDown = true;

    lastMousePos = {x:e.clientX, y:e.clientY};

};

var onMousemove = function(e){

    if(isMouseDown){

        camera.position.x += (e.clientX-lastMousePos.x)/100;

        camera.position.y -= (e.clientY-lastMousePos.y)/100;

        camera.lookAt(centerVector);

        lastMousePos = {x:e.clientX, y:e.clientY};

    }

};

var render = function(a) {

    requestAnimationFrame(render);

    particles.geometry.verticesNeedUpdate = true;

    if(!isMouseDown){

        camera.position.x += (0-camera.position.x)*0.06;

        camera.position.y += (0-camera.position.y)*0.06;

        camera.lookAt(centerVector);

    }

    renderer.render(scene, camera);

};

var imgData;

var image;

imgData ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABgCAYAAADrc9dCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAwuSURBVHja7F17UFTVH//sIu+HArbKQxQYYJMYWagG0HRCJYHReIxjoKPZhDjUZPxR+SCkJiNtnNLGlLHxkToiZU2RTatprZCvlBEEZTaSjIchrIDLIrKy398fDvtjWRZ3L/cu9677mfn+cR/nnO+5n3u+5/s959xzRUTUDMATAsC///4rjomJcffx8aFp06bpJBIJBQcH65566ilat25dv1gshsChFhERCUVbpVKJiIgIo/MuLi7QaDSwAUIgBnBPKMr29vaOeP69996zCTIA3JsgJG3b29sNjn18fDB//nysW7cOtgJBvVYuLi4Gx2+++SbKysrg7e2NtWvX4sqVK8JnhIi6SUCor6+nefPmEQBatmwZERF98803BIAA0FtvvUU9PT0kUHQLzvBGREQgKCgIABASEgIA2Lp1q/76zp07odVq7SbLmjh79iwAID09Hf39/bh8+bL+WkxMDCZNmmRw/40bN/DBBx/YTRZXGDRPOp2OPv30U/0xAFq+fLnBvZ2dnSSVSgkALV68mDQajd1ksQWVSoW9e/cCAPz8/HD79m1s27bN4J6wsDAjV7m+vh4AUF5ejqioKH0L4yN46/a2tLSgtrYW169fR01NDWpqavDXX39BrVYDAFJSUiCXy41cYalUanDs7++PkpIS5ObmAgBu3ryJ1157DQ0NDXZCzMH777+P7777DvX19dDpdCbvc3JywvHjx0fs9IcjJSXF4LioqMjeh5iD//77z6A/MCUikYhiY2PJ1dXV4Ly7u7vJPsLLy0t/X3JyMpWUlNDt27d514fwipAPP/zQbEJGOh8dHW2UZ1NTE23YsIEcHR2N7nd2dqakpCTq7e3lDSG8Mll79uwxt1WPeD4qKsrguKenBzKZDB0dHSPe/+DBA735s8chw3DkyBG0traOKY/hhCQmJpokAwA8PT1x4sQJODg42Dt1I0UmjF2VL774AsePH0dgYCBaWlrw559/mrzXwcEBpaWlrJTLJkRE1A3AiwfOBSQSyahvNJuYNm0aLl68CD8/P14Nv/PGZIlEImRmZlqtvKamJuzatYt3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";

const changeState = function(state, num) {

    document.getElementById('dropbox-choose').innerHTML = state;

    numState = num;

    switch (numState)

    {

        case 0:

            imgData ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABgCAYAAADrc9dCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAwuSURBVHja7F17UFTVH//sIu+HArbKQxQYYJMYWagG0HRCJYHReIxjoKPZhDjUZPxR+SCkJiNtnNLGlLHxkToiZU2RTatprZCvlBEEZTaSjIchrIDLIrKy398fDvtjWRZ3L/cu9677mfn+cR/nnO+5n3u+5/s959xzRUTUDMATAsC///4rjomJcffx8aFp06bpJBIJBQcH65566ilat25dv1gshsChFhERCUVbpVKJiIgIo/MuLi7QaDSwAUIgBnBPKMr29vaOeP69996zCTIA3JsgJG3b29sNjn18fDB//nysW7cOtgJBvVYuLi4Gx2+++SbKysrg7e2NtWvX4sqVK8JnhIi6SUCor6+nefPmEQBatmwZERF98803BIAA0FtvvUU9PT0kUHQLzvBGREQgKCgIABASEgIA2Lp1q/76zp07odVq7SbLmjh79iwAID09Hf39/bh8+bL+WkxMDCZNmmRw/40bN/DBBx/YTRZXGDRPOp2OPv30U/0xAFq+fLnBvZ2dnSSVSgkALV68mDQajd1ksQWVSoW9e/cCAPz8/HD79m1s27bN4J6wsDAjV7m+vh4AUF5ejqioKH0L4yN46/a2tLSgtrYW169fR01NDWpqavDXX39BrVYDAFJSUiCXy41cYalUanDs7++PkpIS5ObmAgBu3ryJ1157DQ0NDXZCzMH777+P7777DvX19dDpdCbvc3JywvHjx0fs9IcjJSXF4LioqMjeh5iD//77z6A/MCUikYhiY2PJ1dXV4Ly7u7vJPsLLy0t/X3JyMpWUlNDt27d514fwipAPP/zQbEJGOh8dHW2UZ1NTE23YsIEcHR2N7nd2dqakpCTq7e3lDSG8Mll79uwxt1WPeD4qKsrguKenBzKZDB0dHSPe/+DBA735s8chw3DkyBG0traOKY/hhCQmJpokAwA8PT1x4sQJODg42Dt1I0UmjF2VL774AsePH0dgYCBaWlrw559/mrzXwcEBpaWlrJTLJkRE1A3AiwfOBSQSyahvNJuYNm0aLl68CD8/P14Nv/PGZIlEImRmZlqtvKamJuzatYt3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";

        break;

        case 1:

            imgData = "data:image/png;base64,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"

        break;

    }

    image.src = imgData;

}

var image = document.createElement("img");

image.onload = init;

image.src = imgData;

Thank for your support.

2

A typical cause of performance issue is the fact to update an instance of Geometry.

It is more performant to use BufferGeometry instead since all instances of Geometry have to be converted to BufferGeometry before rendering.

So I suggest you use BufferGeometry right from the beginning. Keep in mind that almost all official three.js example use BufferGeometry so it should be easy to find out how to work with this class. The official documentation is also a good starting point:

https://threejs.org/docs/index.html#api/en/core/BufferGeometry

1 Like
3

Thank you very much, I have changed to BufferGeometry and it works perfectly.

1 Like