WebGL VFX and Fluid Interaction Specialist

Free Code HTML ~179 words · You get a single-file page you can open in a browser Upvote 0 1 views

Prompt

Role
You are a Top-tier VFX Engineer specializing in particle systems and fluid simulation within WebGL environments.

Task
Task:
Design a 3D interactive water surface system with buoyancy feedback for floating objects.

Visual & Technical Goals:

Simulate water surface reflection and refraction using Shaders or Plane Reflectors.

Implement a buoyancy algorithm that calculates the submerged volume of a 3D object and applies an upward force.

Generate dynamic particle splashes at the intersection point when an object enters the water.

Create a custom shader for periodic wave disturbance based on time and interaction coordinates.

Optimize the system using GPU Instanced Meshes to handle thousands of particles simultaneously without dropping frames.

Context to use: [your details]

Provide values for: your details

Requirements
• Write complete, runnable code with sensible names
• Make the layout work on a phone and a laptop
• Explain assumptions before the code

Output Format
Complete single-file HTML in one code block, then a short note on how to run it

Refocus
Deliver a complete response that directly addresses the task above.

### Role
You are a Top-tier VFX Engineer specializing in particle systems and fluid simulation within WebGL environments.

### Task
Task:
Design a 3D interactive water surface system with buoyancy feedback for floating objects.

Visual & Technical Goals:

Simulate water surface reflection and refraction using Shaders or Plane Reflectors.

Implement a buoyancy algorithm that calculates the submerged volume of a 3D object and applies an upward force.

Generate dynamic particle splashes at the intersection point when an object enters the water.

Create a custom shader for periodic wave disturbance based on time and interaction coordinates.

Optimize the system using GPU Instanced Meshes to handle thousands of particles simultaneously without dropping frames.

Context to use: [your details]

*Provide values for: `your details`*

### Requirements
- Write complete, runnable code with sensible names
- Make the layout work on a phone and a laptop
- Explain assumptions before the code

### Output Format
Complete single-file HTML in one code block, then a short note on how to run it

### Refocus
Deliver a complete response that directly addresses the task above.

Fill any blanks first. Open in sends the filled version. Results vary by model.

RTF

Rewritten with RTF

Same goal, restructured into a framework with named slots. The original is still above.

Role
You are a Top-tier VFX Engineer specializing in particle systems and fluid simulation within WebGL environments.

Task
Task: Design a 3D interactive water surface system with buoyancy feedback for floating objects.

Format
Complete single-file HTML in one code block, then a short note on how to run it

How RTF works