At present, I am implementing to encode the height value into canvas and then pass it to RawTexture through toDataUrl method for use, but during this process, I found that Canvas.fillstyle can only accept standard CSS color values. How do I encode the position information with many decimal places correctly into the canvas? I think I might need an algorithm.
I have terrain information in my gltf and I want to modify the height of the topographical vertices by reading the colors in the RawTexture through the shader in the MaterialPlugin.
You can also use hexadecimal with the “#” sign followed by RGB channel. Each channel take two characters space of 0 to F which make a total of 256 possibilities. In hexa, F = 16 and FF = 255.
I came up with a way to encode decimals, integers, and symbols separately into color channels.
const factor = 3000
const height = -123.1234567
const symbol = 100 or 0 // Store the sign bits separately, 100 if they are integers and 0 if they are negative
const r = rgba(255 * (123 / factor), symbol + 12, 34, 56)
Now I have another problem, this may require a new topic, when I use the same material plugin to operate on the ground material, changing some of the position offset parameters shows a different effect. Can someone help me figure this out? You can swap comment lines to see the correct effect