3D color replace

How do I...?
1

Good morning,

I hope I’ve placed this topic in a good category. While parts of this post could count as feature requests, I’m mostly looking for feedback regarding my current research / knowledge. (Well, perhaps I also want to yell into the void after staring at out-of-context JavaScript for days!)

I’ve been looking for a way to do a simple color replace on a 3D scene.

ColorReplace10
Before I continue, I would like to state that I am very satisfied with this current state of 3D in the engine. I adore how the non-aliased graphics appear—especially the lack of color distortion—and the default slate of 3D effects is more than enough to create stunning retro and nu retro graphics, including my work on Logic Bulb Adventure .

There’s only one relatively minor problem.
ColorReplace11
I made a feature that replaces the 4 end-result colors on 2D layers (before other effects, of course). No such engine effects exist for 3D layers. In addition, none of the current ways of reading or projecting 2D scenes (Sprite snapshot, Read pixels) work with 3D layers, so I am unable to project a 3D scene onto a 2D layer for it to be color-replaced.

This makes sense; the 2D canvas and 3D Three.js scene are different renders. The effects and extensions for 2D layers and 3D layers are for different renders and work with different parts of the engine (as far as I can tell).
.

From the research I’ve done, my current options seem to be:

[1] Create a color replace effect for 3D layers. (I have no clue where to even begin. I’ve located and looked inside ThreeAddons.js, the 3D extension folder, and the basic (JavaScript) extension tutorial, but I’m not much closer to knowing how to do this.)

[2] Create or amend an extension to project a 3D scene onto a 2D sprite on a primary layer so it can be color-replaced. (Same problem as [1])

[3] Create or amend an extension to “read” a 3D scene and draw it using a Shape-painter. (Least preferred; cost-ineffective; same problem as [1])

[4] Some sort of JavaScript relating to Three.js processing passes in the scene events?

[5] Some other, simpler method that I have missed.

[ Ideally, a 3D effect would have an option to occur before any other lighting effects (like how it functions on 2D layers). ]
.

My biggest obstacle to implementing a 3D color replace effect myself is my mere beginner-level understanding of the implementation of Three.js, its addons, and its graphics processing. It is possible that I may be able to look deeper into this after I finish my upcoming participation in GBJAM 12, but I am posting this in the meantime, hoping that someone with more immediate knowledge has any suggestions. I worked myself into knots doing research into this, and I might have missed something obvious.

I understand the current philosophy of using only “battle-tested” effects in the engine, and that the current 3D effects are from the “default” Three.js post-process / lighting effects. I understand if it is unreasonable to expect a bespoke color replace effect for 3D as a built-in engine effect.

Thank you for your time,
— Clark Padmore

2

Maybe you can adjust the hue. This effect exists for 2D as well as 3D.

3

While that is a good suggestion, I have already attempted this. I also presumed basic hue-shifting might work, since an equivalent effect exists in both 2D and 3D. Unfortunately, I tested and looked into the code for Hue, Saturation, and Brightness effects between 2D and 3D, and they all use different formulas that produce clearly different colors. (It’s not an “off by one” situation, but quite obvious differences when placed next to each other. The color weights are simply not the same.)

Thank you for the consideration!

4

Hello.:wave: Um, Nice to meet you. I’m SuperMrWilliams3