Is the user's view on the A going to be static or can they move around it?
#Using a GLTF model as a clipping box for "water"
bright ice
eager veldt
the A will move based on cursor position
after posting, i realized i could skip a step and render the A as the semitransparent water itself in blender, and just clip the A based on the perlin noise at the top
but i still dont know how i would get a perlin noise mesh as a clipping mask
bright ice
I think your problem with that is going to be that you'll need to clip in 3d, not 2d — and render the top of the water cleanly too.
Your best bet may be a custom shader on the 'A' that does some raycasting across the top. When you hit, check the (surface) spot to see if it's above or below sea level; if it's below then you just use the 'solid' shader. If it's below, then do a quick ray-cast to see if there are any intersection points with the surface.
eager veldt
"sea level" would just do a clean cut across the top though, no?
also it's my understand raycasting is a 1-dementional operation. how would i physically cut the 3d model from 1d raycasts
bright ice
Oh, sorry; I should be clearer. I'm envisioning it such that your model is the entire shape of the A, so you're ostensibly rendering the 'outside' of the water. When you have a fragment, that will represent some point that's on the outer faces of the A; then you test that point as I mentioned above.
You're kind of rendering a volume map that's defined by the noise function; you might look at something like https://www.willusher.io/webgl/2019/01/13/volume-rendering-with-webgl .
eager veldt
uniform float time;
// Include Perlin noise functions
float rand(vec2 co) {
return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
float noise(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
float a = rand(i);
float b = rand(i + vec2(1.0, 0.0));
float c = rand(i + vec2(0.0, 1.0));
float d = rand(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
}
void main() {
// Create a position offset based on noise
vec2 uv = gl_FragCoord.xy / resolution.xy; // Assuming you have 'resolution' uniform
float offset = noise(uv * 10.0 + time * 2.0);
// Apply the offset to the fragment position
vec3 newPosition = position + vec3(0.0, 0.0, offset * 10.0); // Adjust the multiplier for strength
// Your lighting and color calculations here
// ...
gl_FragColor = vec4(finalColor, 1.0);
}
something like this im guessing
chatgpt made this one lol
bright ice
Not quite — that's more offsetting the fragment itself. It'd be hard to briefly explain, I think. :/
eager veldt
is that not what we're trying to do?