[[three-js]]

[[3d modeling tools and resources]]

[[Procedural dungeon for rogue like]]

https://www.turbosquid.com/3d-models/low-poly-minotaurs-3d-2081447

So, you:

• downloaded this free low poly human: https://www.cgtrader.com/free-3d-models/character/man/low-poly-human-14e42a91-2872-4de6-93f7-b83aef1e7bf3
  • might be female equivalent: https://www.cgtrader.com/free-3d-models/character/woman/lowpoly-female-basemesh
• uploaded it to mixamo
• applied “sword and shield pack” to it
• downloaded it, which gave you 50 files, including:
  • LowPolyMale.fbx which is the model in T pose, 284k
  • all the animations, which appear to be just the armature, each 200-500k

How do I add the animations to the model? How do I keep the model itself from moving (e.g. make walking animation in place). You are fairly sure this was part of the directions in the video you watched some time ago.

This video is low on information but does demonstrate a free tool called Plask

NOT this video: https://www.youtube.com/watch?v=Iy5m3jFo-EM

Here’s low poly female, not as low poly as the male: https://www.cgtrader.com/free-3d-models/character/woman/lowpoly-female-basemesh

Keep the Model/Rig/Skeleton itself from moving

You:

1. Loaded animation e.g. sword and shield walk.fbx
2. Clicked in hierarchical scene view until you found hips: Scene Collection > Collection > Armature > Armature > mixamorig:Hips
3. In the timeline view at the bottom, expanded mixamorig:Hips and unchecked X, Y, & Z location
4. Exported as gltf/glb

low poly skeleton

https://sketchfab.com/3d-models/low-poly-skeleton-4866bd05df2d4febba463295cd24b564#download

Trouble with Bump Map/Normal Map

Trying to export bump maps leads to bizarre situations where the walls has transparent parts. You believe that your attempts to export a gltf with a normal map is resulting a normal map with normals facing away from the surface (and so making it see through at that point).

This may be the result of the wrong color space being used?

“super quick bump map” https://www.youtube.com/watch?v=lB2BgBvwfeo Baking texture: https://www.youtube.com/watch?v=Se8GdHptD4A&list=PLsGl9GczcgBvJPh7D_ITafvmTW7ZzQTEr&index=2

https://gltf.report info about gltf file

Ugh you failed to write conclusions, but you did get it working. Maybe see v4.

Baked Lighting

So, a problem is that not all light will be coming from player or other players/entities. There will be environmental lights. To expensive to compute per-frame.

Typical solution is to bake the lighting. This is a lot of work. Luckily there appears to be something built in to threejs.

• Via this question
• There is this demo
• Source code for demo
• Uses this code for “progressive light map”

But how then do we illuminate characters passing through such a statically lit area? Ugh maybe we need both? Use baked light map to show “seen” areas, use both to show “visible” areas?

Enumerating the problems:

1. Point lights are expensive. Even speed aside, only a certain number of simultaneous point lights can be supported at a time
2. Effect of point light must be seen even if point light itself is not visible
3. Movable objects like characters may be illuminated by point lights

Possible solutions

1. Baked light maps (at load time) via ProgressiveLightMap
2. Good look, but expensive/impossible to change after calculating? Untested.
3. Pseudo tile (or tile quadrant) resolution light map
4. Lower resolution look. Easy to change. Untested.
5. Turn point lights on or off depending on whether their effect can be seen
6. Best look. Expensive; some maximum density.

Solutions 1 & 2 solve problems 1 & 2 but not problem 3.

Solution 3 solves all problems but is least performant and has a hard-to-predict maximum density (e.g. what happens if you have a long hallway lined with torches)

Might movable objects be rendered in a different pass? E.g.:

1. Each tile knows which light sources its in range of (accounting for occlusion via same visibility method we use)
2. For each object, see which light sources need to be on, turn them on, and render that object

Something like that would solve problem 3 for solutions 1 & 2.

Looking at solution 1 (baked light maps). Have not yet got it working. Getting error: ‘WebGL warning: drawElementsInstanced: Texture level 0 would be read by TEXTURE_2D unit 1, but written by framebuffer attachment COLOR_ATTACHMENT0, which would be illegal feedback.’.

Not sure if worth pursuing given inflexibility of this lighting (e.g. can’t turn lights on or off once baked)

A way for solution 2 might be the emissive property on a material. Color could be set to white (or whatever) and intensity set. If material clone is shallow we should be able to reuse the textures and just have, say 32 copies of a material with varying levels of emissive intensity.

Update 2023-07-28

First pass at solution 2 is ugly. Apart from “resolution” of illumination levels, there isn’t a way to cast light on one side of a corner quadrant but not the other.

![[Screenshot_2023-07-28_at_10_55_47_AM.png]]

Adding the floor did not help; Mach band effect is bad.