in js
//In update
var heightPos = new pc.Vec3(2, 5, 2);
var offset = (this.time - this.buoyTimeBias) * this.waveSpeed;
var height = this.sample((heightPos.x / 500) + offset, (heightPos.z / 500) + offset, 'repeat', 'repeat');
this.height = height * this.bumpiness;
this.testBuoy.setPosition(new pc.Vec3(2, this.height, 2));
WaterMaterial.prototype.sample = function (x, y, wrappingS, wrappingT) {
var tempVec = { x: x, y: y };
clampCoords(tempVec, wrappingS, wrappingT);
x = Math.floor(tempVec.x * this.imageData.width);
y = Math.floor((1 - tempVec.y) * this.imageData.height);
if (x >= this.imageData.width) x = this.imageData.width - 1;
if (y >= this.imageData.height) y = this.imageData.height - 1;
var val = this.imageData.data[((this.imageData.width * y) + x) * 4];
return val / 255.0; // Normalize the value to [0, 1]
}
// Function to handle wrapping behavior
function clampCoords(vec, wrappingS, wrappingT) {
// Handle wrapping for S (x-axis) and T (y-axis) based on wrapping modes
if (wrappingS === 'repeat') {
vec.x = (vec.x % 1 + 1) % 1; // Wrap around if out of bounds
} else if (wrappingS === 'clamp') {
vec.x = Math.max(0, Math.min(vec.x, 1)); // Clamp to [0, 1]
}
if (wrappingT === 'repeat') {
vec.y = (vec.y % 1 + 1) % 1; // Wrap around if out of bounds
} else if (wrappingT === 'clamp') {
vec.y = Math.max(0, Math.min(vec.y, 1)); // Clamp to [0, 1]
}
}
in GLSL ( water vertex shader )
dModelMatrix = getModelMatrix();
vec3 localPos = vertex_position;
float height = texture2D(uBumpMap, localPos.xz + (iGlobalTime * uWaveSpeed)).r;
localPos.y += height * uBumpiness;
The Buoy not buoying correctly what I doing wrong or Is there any difference between CPU frame and GPU frame
