How to add fog of war for stone tiles?

Questions
1

Hello,
I need to add fog of war for stone tiles

I found this sample:

2

First solution: use 2d canvas with pixels as tiles position.
Second solution: use point material like tiles and rendertarget texture.
And in custom shader can use bluring median, box, bilinear, bicubic.

1 Like
3

@Chaser_Code
thx

i think I may use bg image and another image (transparent side) to construct mesh from 4 sides

4

this dont show texture as transparent, it just hides
but for three.js/r128 it works

// 2. Create an 8x8 alpha mask (1 = opaque, 0 = transparent)
const mask = [
  1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 0, 0, 0, 0, 1, 1,
  1, 1, 0, 0, 0, 0, 1, 1,
  1, 1, 0, 0, 0, 0, 1, 1,
  1, 1, 0, 0, 0, 0, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1
];

// 3. Create the alpha texture
const data = new Uint8Array(mask.map(v => v * 255)); // Convert to 0-255
const texture = new THREE.DataTexture(
  data, 
  8, 8, 
  THREE.LuminanceFormat, 
  THREE.UnsignedByteType
);
texture.needsUpdate = true;

// Configure texture
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// 4. Create material with alpha map
const material = new THREE.MeshBasicMaterial({
  color: 0x0000ff,      // Red color
  alphaMap: texture,     // Use our mask
  transparent: true,     // Required for transparency
  side: THREE.DoubleSide // Show both faces
});

// 5. Create mesh
const geometry = new THREE.PlaneGeometry(4, 4); // 4x4 units
const mesh = new THREE.Mesh(geometry, material);

// Rotate to make visible (planes are vertical by default)
mesh.rotation.x = -Math.PI / 2;
mesh.position.set(0, 2, 0);

// 6. Position camera
// camera.position.set(0, 5, 5);
// camera.lookAt(0, 0, 0);

// 7. Add to scene
scene.add(mesh);
2 Likes
5

Why r128? Isn’t that a super old version? :smiley: We’re on 177 now.

2 Likes
6

and dungeon has oil

you see it is different than fog of war
i used 4+4 variations of tiles

ok, waiting for solution with alpha

7

@manthrax

it is not easy to find tutorials for threejs
bots provided code only for r128

but i see in 177 different alpha mask
if we may find sample of use, it would be cool

8

I looked at your code and I think it should work with latest threejs, and might be a little bit faster. :slight_smile: cool stuff!

9

@manthrax
I created samples of code

r174 (alpha map is not displayed)
https://codepen.io/meded90-the-selector/pen/RNPJevm

r128 (here it works)
https://codepen.io/meded90-the-selector/pen/jEPKeJV

10

The THREE.LuminanceFormat format is no longer supported in newer versions of WebGL.

const width = 8; 
const height = 8;


// 2. Create an 8x8 alpha mask (1 = opaque, 0 = transparent)
const mask = [
  1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 0, 0, 0, 0, 1, 1,
  1, 1, 0, 0, 0, 0, 1, 1,
  1, 1, 0, 0, 0, 0, 1, 1,
  1, 1, 0, 0, 0, 0, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1
];

// 3. Create the alpha texture
const data = new Uint8Array(width * height * 4); // Convert to 0-255
        for (let i = 0; i < width * height; i++) {
            const value = mask[i];
            // Установим R, G, B, A для каждого пикселя
            data[i * 4] = value * 255;     // R
            data[i * 4 + 1] = value * 255; // G
            data[i * 4 + 2] = value * 255; // B
            data[i * 4 + 3] = value * 255; // A
        }

const texture = new THREE.DataTexture(
  data, 
  8, 8, 
  THREE.RGBAFormat, 
  THREE.UnsignedByteType
);
texture.needsUpdate = true;

image
image451×286 9.12 KB

2 Likes
11

got it, and inverse of mask

const value = ! mask[i];

2 Likes
12

use fog

map