Development of a WebGL/Three.js scene with generation and export of 3D (snapshot) from an animated shader

I saw your project with the vortex, and the task is really interesting. Especially the moment with the "Fix Form" button, where you need to take a snapshot of the mathematical parameters of deformation without stopping the animation, and then generate a mesh from this shader phase. This is non-trivial but solvable through synchronization of u_time and geometry on the CPU side.

I am a full-stack developer with about 3.5 years of commercial experience, primarily using TypeScript and Vue/React. I use Three.js, GLSL, and work with geometry in web projects. A shader for transparent acrylic with a Fresnel effect and animation of internal flows through u_time, plus export via GLTFExporter, is something I have worked with in practice.

As a result: an optimized script ready for integration, 60 FPS on desktop and mobile. I can show my approach to implementation before starting if you want to understand how I plan to take the phase snapshot and export it.

I am ready to discuss the details, feel free to write if you have any questions.

Show original

Translate

Good day! My name is Valentin, and I represent Arctic Web Agency. We are a team that specializes in creating modern and effective solutions for businesses. I can provide examples of our similar work in personal messages. We are ready to take your project to work!

Sincerely,
Arctic Web Team
Freelancehunt

Show original

Translate

I have worked with Three.js and shaders, I enjoy such tasks. I see it like this: we write a GLSL shader with procedural geometry for a vortex, animate it through uniforms, and separately export a snapshot through rendering to an offscreen buffer with the required resolution. Question: do you need a raster snapshot (PNG/JPG) or would you like to export the geometry as a 3D model (glTF, OBJ)? I am ready to discuss the details.

Show original

Translate

Hello. I can complete your task. I have experience. Write to me and we will agree.

Show original

Translate

Good afternoon, I work with three.js and webgl, there are projects in my profile, I am ready to discuss the details of this task.

Show original

Translate

Vyacheslav, good afternoon.

The key point in this task is not the glass shader itself, but the "Fix Shape" button. The deformation of the funnel lives in the vertex shader, meaning the vertex positions are calculated on the GPU right during rendering. If at the moment of clicking you simply hand over the scene to GLTFExporter/OBJExporter, the output will be the original, undeformed model — the exporter does not see what the shader has calculated. This is a typical trap where such tasks get stuck.

To make the snapshot real, the deformation needs to be "baked" into the geometry at the moment of clicking:

1. On click, I take the current u_time and phase parameters.
2. I calculate the vertex offsets on the CPU using the same code as in the shader (I extract the deformation formula into a common JS module so that both the shader and the baking calculate the same), or I capture the result from the GPU via transform feedback on WebGL2.
3. I write the new positions into a fresh BufferGeometry, recalculate the normals (computeVertexNormals) — otherwise, in an external editor, the model will be shaded incorrectly.
… 4. I hand over the result to GLTFExporter (.glb/.gltf) or OBJExporter. The main scene continues to rotate — the snapshot goes into a separate buffer and does not affect it.

One point needs to be discussed in advance. You animate the internal flows and refraction lines in the fragment shader — this is optics and surface color, not geometry. In .obj/.gltf, this "twist" will not be baked as a shape: a deformed silhouette of the bowl with a stem plus an approximation of the glass material will be exported. If by "frozen vortex" you mean the volumetric geometry of the internal flows — that is a different scope of work (the vortex needs to be pushed into real geometry). Let's confirm at the start what exactly should be in the downloaded file — this will determine the approach.

Regarding the rest:

- The camera is fixed, without controls — as per the specifications.
- Rotation and deformation are in the vertex shader, the material is a custom ShaderMaterial with glass and Fresnel.
- I maintain 60 FPS due to a single mesh without per-frame work on the CPU; the heavy operation (baking) occurs only at the moment of clicking.
- The output is a ready module for integration into your page, with a basic model as input.
- I have a portfolio on WebGL/shader animation, I will show it in private.

Deadline: 10–14 days.
Cost: I will provide an exact figure after we confirm the content of the export and I review the basic funnel model.

Show original

Translate

Hello, Vyacheslav

As a full-stack developer,I have fully experience in three.js programming.
Here are some of my examples:

https://www.kodeclubs.com/
https://acoustics.autoneum.com/

I am ready to start right now and feeel free contact me any time.
…
Best, Hanh.

https://sensei3d.com/

Hi hope you are doing well

I can build the interactive Three.js WebGL component for your whirlpool table using the provided GLB or GLTF model with fixed camera studio lighting smooth Y axis rotation and a custom glass style shader.

I will create a clean scene with locked perspective or axonometric camera soft shadows glossy highlights and optimized rendering for desktop and mobile. The object will rotate continuously while the shader animates transparent acrylic glass effects with Fresnel highlights and moving spiral refraction lines driven by time.

For the Capture Shape feature I will implement a button that snapshots the current deformation parameters and shader phase at the exact click moment while the visible animation continues running. Using those frozen values I will generate a separate non animated 3D mold that represents that captured state and export it as GLTF or OBJ with Three.js exporters.
…
Best regards
Youssef.

Good day, I can start working right now. I have over 4 years of experience in development, working with three.js and webgl. I can create an example of how it will look by this evening and show the result. Of course, polishing will take another 1-2 days. I would be happy to collaborate.

Show original

Translate

Hello, Vyacheslav.

I will load the .glb in Three.js, set a fixed camera without controls, studio lighting, and slow rotation around the Y-axis. I will make the glass a custom ShaderMaterial with Fresnel, and animate the spiral inside the funnel in the fragment shader using u_time.

The main thing here is capturing the shape. When the button is pressed, the scene continues to rotate, and at the moment of clicking, I will freeze u_time, bake the mesh vertices into static geometry, and export it via GLTFExporter so that the shape can be opened in any editor. I will maintain 60 FPS on desktop and mobile.

I am new to freelancing, I charge low rates, but I will deliver quickly and with quality.

Please let me know: does the shader create the shape of the funnel or is the deformation already in the geometry, and which format is more convenient, glb or obj?

Show original

Translate

The essence of the task is to capture the deformation parameters at a specific millisecond and bake them into a static mesh while the vortex continues to spin. This is the most interesting part.
In the last project, I exported baked geometry from ShaderMaterial with vertex displacement to glTF. There, it was also necessary to copy the position attribute into a separate buffer without stopping the render.
To assess the volume more accurately, please clarify: is the deformation of the vortex already embedded in the vertices of the original GLB, or is the shape completely computed in the vertex shader?

Show original

Translate

Hello!
This is a very interesting project because it combines shader development for real-time procedural graphics and geometry generation, rather than a traditional Three.js product viewer.
I have experience with implementing custom ShaderMaterial in GLSL in Three.js, procedural animation, and geometry export workflows, which are the main requirements here.
The most important technical detail in your specification is the distinction between an animated object in real-time and captured frozen geometry.
Instead of simply exporting the currently displayed mesh, the system should capture the exact state of deformation and shader parameters at a specific moment in time and generate a separate snapshot of static geometry, while the original object continues to rotate and animate in real-time.
For implementation, I would use custom GLSL shaders in Three.js and a special geometry generation layer that reflects the deformation logic used by the visual effect.
The scene will include a fixed camera position, studio lighting, soft shadows, physically accurate materials, and smooth continuous rotation around the Y-axis.
For the material, I would create a custom shader for glass or acrylic with Fresnel reflections, distortion inspired by refraction, animated vortex flows, and procedural motion driven by time, while maintaining compatibility with desktop and mobile devices. Performance
The capture workflow will include:
… capturing the exact state in time
capturing deformation parameters
generating a frozen version of the geometry
creating an exportable mesh
exporting via GLTFExporter or OBJExporter
This approach ensures that the exported model accurately reflects the state of the vortex at the chosen moment in time, rather than being a generic mesh.
To enhance performance, I would focus on:
optimized shader computations
efficient geometry updates
a minimal number of draw calls
adaptive rendering for mobile devices
a stable target frame rate of 60 frames per second on modern devices
The end result will be a clean modular component ready for integration with a website, setting up the Three.js scene, shader code capture logic, and export functionality.
The project is technically complex in the right sense, as it lies at the intersection of creative programming and procedural modeling.

Show original

Translate

Good afternoon
I am ready to discuss the details in private messages
---------------------------------

Show original

Translate