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

Budget: 1500 PLN Deadline: 7 days

Hello!

My name is Evgeny, and I have been professionally developing mobile applications, websites, web services, and web applications for 7 years.

*The cost I indicated is for 1 hour of work. To provide a more detailed price, I would like to connect/call and discuss the details.

- You can review my portfolio, feedback, and awards in my profile.

Why should you choose me?
- I have taken 1st and 2nd places in international championships and competitions in the IT field.
- I have verified video testimonials and letters of appreciation.
- I am always available, honest, and reasonable.
- I work under a contract.
- I lead my own development team.

I would be happy to talk to you in more detail about the project. Expand

Budget: 700 PLN Deadline: 7 days

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?

Budget: 1500 PLN Deadline: 7 days

Good day, Vyacheslav!

I have reviewed the responses from other specialists regarding your project. I will try to propose a solution so that you have the opportunity to communicate not only with GPT chats =)

- ⭐689% traffic growth in 3 months!⭐ - https://freelancehunt.com/showcase/work/689-prirostu-trafiku-za-misyatsi/1993127.html
- ⭐Clothing print company. Traffic growth of 486%⭐ - https://freelancehunt.com/showcase/work/magazin-dlya-doroslih-zrostannya-prodazhiv-na/1993118.html
- ⭐Traffic growth of 4854% in 15 months. Want the same?⭐ - https://freelancehunt.com/showcase/work/zrostannya-trafiku-na-4854-za/1993112.html

For now, I will refrain from a specific proposal, as it is important to understand the ultimate goals of your project. To offer the optimal collaboration option, please clarify:

- What timeline for project implementation are you interested in? Are you planning a quick launch or do you have some time to spare?
- Do you have a detailed technical specification or a formed vision of the future scene?
- How long should the animation be active before it is fixed?
- Are you considering the possibility of creating a unique shader or are you ready to use existing solutions?

Several factors influence the cost and timeline of development:

1. Availability of a ready base model and its adaptation to your requirements.
2. Development of a unique shader or use of existing solutions.
3. Detail of the technical specification: the more detailed it is, the faster and more accurately the project can be implemented.
4. The volume of work on integration and scene setup in Three.js.
5. The complexity of the animation and the need for code optimization for stable operation on different devices.

Looking into the future, at the initial stage, we will need to form and agree on the final vision of the end result of your project. I prefer to create such a vision based on the analysis of competitive solutions and your personal wishes. This will allow us to understand what approaches others are using and offer you a unique and more effective solution.

Your project to create an interactive 3D component for a funnel design table requires a deep understanding of WebGL and Three.js. I have experience in developing complex shaders and generating 3D models, which will allow us to implement your project considering all technical requirements and nuances.

The next step is to discuss the project details and understand how well we fit each other. Let's fix all the nuances in correspondence or at a meeting. Expand

Budget: 200 PLN Deadline: 2 days

ready to help you out with this

will send you previous work in chat to make sure we match

Budget: 14000 PLN Deadline: 3 days

Hello! I am ready to perform your project with high quality. I have experience in similar tasks, let's discuss the details.

Budget: 1167 PLN Deadline: 8 days

Vyacheslav, good day!

Straight to the main technical nuance, as it determines the approach and price: is the internal vortex in the funnel created through vertex displacement or is it purely a fragment/raymarch effect inside the glass?

This is critical because THREE.GLTFExporter exports the mesh geometry. If the vortex is a fragment effect, then the "frozen" model cannot simply be exported: it appears on the screen, but it has no real geometry. In this case, at the moment of the snapshot, the shape of the vortex needs to be baked into real geometry (for example, marching cubes based on the density field) and then exported as .glb/.gltf. If the vortex is at the vertices, it’s simpler: we fix the vertex positions at the required millisecond and export.

What I will do:
— load the base model (.glb/.gltf) into the scene with a fixed camera, without user rotation;
— custom ShaderMaterial: transparent glass/acrylic with Fresnel + animated vortex through a fragment shader (u_time);
— continuous rotation around Y;
— "Freeze Shape" button: the screen animation does NOT stop, but the code captures the parameters/phases of the shader at that millisecond and generates a frozen 3D model of that phase;
— export to .obj/.gltf via GLTFExporter;
— optimization for stable 60 FPS on desktop and mobile.

I work with React Three Fiber, drei, postprocessing; I have done GPGPU particle flow-fields and raymarched volumetric scenes — so custom shaders and geometry are my specialty. I can send examples.

Approximately: 14,000 UAH, ~8 days. I will confirm the exact figure as soon as we determine the method of "baking" the vortex (vertices vs fragment) — this is the main factor in the volume. Expand

Budget: 50000 PLN Deadline: 14 days

We already have a nearly ready base for such a WebGL scene - Three.js, shader animation, object rotation, and 3D export, which can be quickly adapted to your model ))

For the timeline, I would estimate 10-14 working days for the working component with .glb loading, a static camera, studio lighting, ShaderMaterial, a snapshot button, and export via GLTFExporter or OBJExporter.

As for the price, the starting point is 65,000 UAH for the first stable version; I can provide a more accurate figure after reviewing the source model.

There is a nuance - if the snapshot needs to bake the mathematical deformation of the shape, this can be done normally through separate geometry and saving phase parameters.

However, if we need to bake visual refraction lines from the fragment shader as physical geometry, that is more complex, and the price should be calculated separately.

- We need the original .glb or .gltf
- We need to understand if we are exporting only the shape of the table or also the material with the frozen effect
- We need to clarify the target devices for 60 FPS - desktop, iPhone, Android, tablets

Similar engineering logic cases from Ingello:

- https://business.ingello.com/fractal - a complex interactive system with generative logic and automation
- https://business.ingello.com/vorfahr - an example of a product with non-standard 3D/digital logic and quick launch

The main landing page for the exchange - https://systems-fl.ingello.com

I am available; we can discuss the details here on the exchange and choose the shortest path without unnecessary engineering acrobatics =)

Overall, it's fine to start with a prototype - first, we create the scene, shader, and snapshot, then we refine the export and optimization. Expand

Budget: 1500 PLN Deadline: 14 days

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.

Budget: 26990 PLN Deadline: 29 days

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

Budget: 1000 PLN Deadline: 5 days

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.

Budget: 1300 PLN Deadline: 10 days

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

Budget: 2000 PLN Deadline: 5 days

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.

Budget: 2000 PLN Deadline: 14 days

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. Expand

Budget: 2500 PLN Deadline: 12 days

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. Expand

Budget: 2000 PLN Deadline: 10 days

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. Expand

Budget: 1000 PLN Deadline: 4 days

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.

Budget: 1800 PLN Deadline: 8 days

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?

Budget: 2000 PLN Deadline: 10 days

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. Expand

Budget: 1500 PLN Deadline: 10 days

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