Creating hyper-realistic 3D experience on Web

When you’re looking at a photo that just looks a little bit too perfect and pleasant to the eyes, is not always a real-world picture captured by a high configuration camera there’s a chance you are not looking at a photo at all. You could be looking at a hyper-realistic 3D experience on web, let get back to the days where games use to be just a few pixels reused everywhere to form a scene but now things changed drastically and with a light tracing manner. Take any game now it’s so realistic that you play that for 10 min you feel like your Captain price in Call of Duty.

So now let’s get back to our design part as we are daily looking into a 2d based design on the web its looks so boring and simple but what if I say we can bring them alive with just a few z-axis’s sizzling into it. Sounds simple right, then have a look at this. 

 

By Redis Agency

Now a simple story well explains, isn’t it?

There where the power of 3D comes in to make a simple site into an eye-soothing site. Now let’s take another example, say suppose you are a builder and you want to explain what work you have done. Instead of just writing it down with images attached what you can do is this.

 

 By Proximity

Now let’s talk a bit about the tech that helps a web developer to build it just like Thanos’s snap.

• WebGL: WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics and image processing and effects as part of the web page canvas

• Three js: Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL. The source code is hosted in a repository on GitHub

These are all bout old tech that HTML, CSS, and Js can do but what about the new tech like React, Angular, etc … a good question!!

For that, we have npm backed up packages like three.js, @react-three/Drei, and @react-three/fiber which provides component base 3D models and a lot more. 

And as a FreeFlow team, Let me share our experience using these packages.

This package is well maintained and easy to use. As a React developer who was not experienced with 3D models, it took only a week or so to understand how this is rendering, and now I am implementing this in our new venture’s site i.e Cre8.

By FreeFlow Tech

Cre8 going to be a platform where its investors and start-ups are going to sync up to bring their ideas to life with sync with FreeFlow. 

Tech used:

• Next Js: Next.js is an open-source development framework built on top of Node.js enabling React-based web applications functionalities such as server-side rendering and generating a static website.
• Three.js: As mentioned above, it works with WebGL to render the canvas.

 

Okay let me share, our steps to future

With that said let’s talk about a bit more advanced thing in this 3D universe which is the next step towards web experience, which is none other than VR (Virtual Reality), in the current phase of web dev we are lucky enough that we can present our thoughts with 3D Models and environment but there are sites which are working on Virtual Reality for better presentation and user experience.

We FreeFlow Tech are looking forward to presenting you our thoughts with the same reality.