Very large alpha map

Questions
1

Hi, I’m relatively new to threejs. I’m trying to create an web app, where you have a fog of war capability. So basically my idea is to have the whole map (canvas) be black. One user then can reveal the map with various forms, mostly polygons.
The application calculates the points inside the revealed polygons, calculates a DataTexture and uses this one as alpha map on an object spanning the whole map, which is at the moment of the size 7000x7000.
This is working for now, but it is really slow. Is there a better way of doing it?
Below is the relevant code for generating the alpha-map:

 const dataSize = size * size;

        const hiddenValue = 255;
        for (let i = 0; i < dataSize; i++) {
            data[i * 2 + 1] = hiddenValue;
        }

        const positionDiff = new Point(size / 2, size / 2).subtract(position.x, position.y);
        const positionedFogOfWarArea = fogOfWarArea.copy().moveAt(positionDiff);

        areas?.forEach((area) => {
            const dataValue = area.isClearArea ? 0 : hiddenValue;
            new Face(...area.points.map(p => new Point(p.x, p.y).add(positionDiff))).getAllPointsInside().forEach((point: Point) => {
                if (!positionedFogOfWarArea.containsPoint(point) || point.x === positionedFogOfWarArea.p2.x || point.y === positionedFogOfWarArea.p2.y) {
                    return;
                }

                const i = Math.round((point.y) * size + point.x);
                data[i * 2 + 1] = dataValue;
            });
        });


        dataTexture.needsUpdate = true;

size is 7000 and dataTexture is set on a material as alphaMap

2

Here is what I would do if I were to make something like this:

  • I’d use a canvas texture, because it has nice commands to draw filled polygons (you just give the vertices and it does the rest much faster than if you manually set points’ colors)
  • I’d use smaller texture, because some low-end mobile devices may choke on textures this big (also, smaller alpha texture may make boundaries of gaps blurred, which is not bad in this case)
2 Likes
3

Thanks! I’ve tested it with a canvas texture and it is much more performant!

2 Likes