Visualizing field of vision for a spy game

miko3k · March 30, 2020, 8:07pm

I would like to darken parts of the scene which the main character cannot see for a “spy” game. The scene is viewed from third person view. By visiblity I mean a simple 2d ray casting from player location all around (like in Commands). Similar to this demo < 2d Visibility >.

Any suggestions how to implement this?

I image the solution along following lines (everything below is just my theory):

determine shape of field of vision using the algorithm from the linked site, or some other clever way. This step sounds relatively easy - if everything else fails, I can cast ~360 rays from the character standpoint for satisfactory results
render this polygon by WebGLRenderTarget in white against grayish background, producing a lightmap
multiply fragment color by this “lightmap” (x = u, y = v), z coordinate is up/down, the game takes place on the flat xy surface

No idea idea how to implement the third step. Maybe in postprocesing? Can I access/calculate world coordinates of a fragment during post-processing?

Cheers.

Usnul · March 30, 2020, 8:31pm

Hey, you might find my article on fog of war helpful. It gives you a part of what you want, specifically a way to hide things.

Fog of War for games

the implementation is available on github under MIT as well:

github.com

Usnul/meep/blob/a551bba1fe41748f895af9443f820c346ea49fd4/src/model/level/fow/FogOfWar.js

import { Sampler2D } from "../../graphics/texture/sampler/Sampler2D.js";
import { ClampToEdgeWrapping, DataTexture, LinearFilter, LuminanceFormat, UnsignedByteType } from "three";
import Vector1 from "../../core/geom/Vector1.js";
import Vector2 from "../../core/geom/Vector2.js";
import Vector3 from "../../core/geom/Vector3.js";
import { assert } from "../../core/assert.js";
import { clamp, max2, min2 } from "../../core/math/MathUtils.js";
import { computeUnsignedDistanceField } from "../../graphics/texture/sampler/distanceField.js";
import Vector4 from "../../core/geom/Vector4.js";
import Signal from "../../core/events/signal/Signal.js";
import {
    deserializeRowFirstTable,
    RowFirstTable,
    serializeRowFirstTable
} from "../../core/collection/table/RowFirstTable.js";
import { RowFirstTableSpec } from "../../core/collection/table/RowFirstTableSpec.js";
import { DataType } from "../../core/collection/table/DataType.js";
import { writeSample2DDataToDataTexture } from "../../graphics/texture/sampler/writeSampler2DDataToDataTexture.js";
import { BinaryClassSerializationAdapter } from "../../engine/ecs/storage/binary/BinaryClassSerializationAdapter.js";

This file has been truncated. show original

good luck!

miko3k · March 30, 2020, 9:18pm

Wow! That was fast. Unfortunately the article stops when the things gets interesting.
However, the implementation, especially the shader seems like a practical approach.

Btw, seems like a great game! It’s refreshing to see someone working on a proper game for the web, and not cheating on graphics by making it retro-themed!

Topic		Replies	Views
Help! help! I desperately need a distance based fog! Questions shaders	9	891	June 20, 2023
Adding Depth of Field: Applying Blur Effect to Highlight Close-Up Model Parts Questions post-processing , shaders , depth-of-field , blur , blur-shader , dof , 3d-model , customshadermaterial	5	205	April 2, 2024
Detecting objects which can camera see Questions camera	14	2525	June 22, 2021
Visual indication or Effect to show when an object is occluded Questions models , geometry , mesh , effect-composer , occlusion	0	527	September 14, 2021
How to focus on some 3D objects with keeping the material properties unchanged while making other 3D objects or background objects fade Questions materials , post-processing , shaders , effect-composer , background	5	723	June 4, 2021

Visualizing field of vision for a spy game

Related Topics