Unity is a cross-platform game engine used to develop 3D platforms and games for PCs, consoles, mobile devices, and websites. The latest version of Unity is shipped with Unity WebGL exporter which means that developers can publish their games and applications to the web with ease. As the name suggests, the WebGL exporter takes advantage of WebGL, A Javascript API for rendering interactive 3D computer graphics, and asm.js. Mozilla’s subset of JavaScript is as an “assembly language for the web”
One of our clients reached out to us with a proposal to implement a 3D WebGL platform using Unity. The 3D customer platform shall be open seven days a week, around the clock for journalists, patients, practitioners, bloggers, and politicians to finally talk about indications and product diversity of customers. Keeping the goal in mind, meeting rooms, permanent exhibitions, libraries, event rooms, and an auditorium are made available to stand. This is how the avatars in the 3D environment will work. In the 3D customer forum, both customer employees and visitors will be able to create their avatars, control them, look through their eyes and interact with other avatars through VR headsets. In one-to-one conversion or groups. The main purpose here is to give user avatars a sense of reality.
Why WebGL?
Modern browsers make building web apps with CSS and HTML extremely easy — a fact that we’ve come to appreciate even more since working with Unity web apps. There are a few things HTML just can’t do. Having immersive 3D graphics is one of those things. Given that, CSS provides you a “3D” transform and developers stretch it as far as building a fully functioning virtual 3D environment, but it is still a very small take compared to full polygon models and raytracing.
WebGL is fast, really fast. The latest graphic cards have become absolute wonders of engineering and WebGL offloads expensive object computations and rendering to them while also freeing up the CPU to run your Unity web apps.
Another important aspect of WebGL is that it is highly flexible. Whether you need depth of field effects, color blending, or the same scenario rendered multiple times in different resolutions and angles, WebGL can help with all of this.
How does a user enter the 3D customer forum?
First and foremost, only the registered members can enter the 3D platform. The user can access the 3D platform via his user account in the web browser. This is done in a web portal (Internet browser) so that it can manage all the members. Once the users get their valid access to the platform, They can personalize their avatars in terms of their hairstyle, facial shape, clothes, and their colors, etc.
There is no need for a separate client as a common and up-to-date internet browser will do the job. This normally means that it does not require an additional port for sharing in firewalls. Only the standard Internet Protocols are used. If in any case the required ports, IP addresses, or domains of the server are blocked by a firewall, it tries to switch to other protocols.
With a custom web development solution, corresponding troubleshooting documents for the support will also be developed within the project.
Computer systems and Internet bandwidth suitable for the 3D platform
The platform is compatible with web browsers. Thereby it supports the following browsers: Google Chrome, Firefox, Microsoft Edge, and Safari. If required, the native clients use the following operating systems: Windows 10, macOS, Linux (Ubuntu).
A minimum of 5 Mbit downstream and 1 Mbit upstream are counted as optimal experiences. Additionally, a ping of less than 100 ms should be maintained at all times. A higher ping like 100 ms ensures that even if the interaction in the 3D platform is noticeably delayed for the user, it is still viable.
Features of the 3D Customer Web Portal
Organize events
In theory, an organizer can create his event on the customer web portal i.e. they can determine the type, scope, duration, etc. of an event. So it is also possible in the case of a permanent event like the Customer Portal to use earmarked or topic-related rooms.
Information about events
It is possible to send invitations for freshly booked events through emails. For existing events, there is a feature to send an email for content updates, news, new program items, change in schedules, updates on future events, and current participant numbers at events with participant limitations.
Management of Authorization and Roles
With the Customer Web Portal, the administration of the created user profiles can be done in an arranged dashboard. Therefore, permissions and roles of the complete 3D platform (Customer Web Portal, Customer app, and 3D customer forum) can be assigned as requested.
The administrative rights of the user profiles of the Customer-Employees are like the authorization access of external users. So, a registered trade journalist for example can access the corresponding areas or events preserved. Additionally, internal or external users manage the specific roles. So “Speakers” can use certain functions of media walls for lectures and presentations.
Manage Content
The Customer-web portal is used to manage the media files that can be viewed, read, heard, and downloaded on the 3D platform.
Topics and keywords
In their user profile, users can submit keywords, which are linked to the information fed by Customers to find matches. For example, when the users indicate that they are interested in general company news, research outcomes, open positions, and event dates. Corresponding information is available to you and the other users upon publication by the Customer. It informs you whenever there is any new news as the Customer app will also fulfill this function.
Challenges while making a 3D platform with Unity3D WebGL
Crisp dynamic textures are really hard
ThreeJS lets you project the pixel content of the HTML5 canvas element onto the face of a 3D object as a texture. An approach that 3D objects make extensive use of for things like lines, arrows, icons, areas, etc. But there is a catch, Your canvas is a 2D surface pixel. You should project this onto a surface of 3D space by “texture mapping”
But for this, check how many pixels are into one “texel” of a texture. It depends on the total size of the textured surface in the final rendered image. If it is not closer to the camera, you can get away with the lower resolutions. And on how many pixels does the user’s hardware can support? Creating and mapping high-resolution dynamic textures are expensive.
Arcentry supports a huge drawing plane of 1000×1000 cells. At 128px per cell, we needed a canvas that is more than 16 billion pixels as a base for our 2D shape texture. Tests showed that anything larger than 4096×4096 immediately crashes the browser, so it was never an option.
We overcame this problem by creating the smallest possible plane. A 60 degree rotated square that reaches enough to the corners of the visible areas. This worked very well for us but was a bit complicated. The square sticks to the camera which means that anytime the user pans or zooms the view, the square also has to move and resize itself.
WebGL presents fidelity limitations
WebGL is a low-level graphics API. It becomes a challenge even for experienced developers to develop high-fidelity 3D modules purely with WebGL. The sheer size of these models and the accompanying memory limitations make it hard to run them in a browser. To deal with that, developers have to create low-fidelity models for distribution through WebGL, either by using the Javascript library or by porting WebGL from a game engine.
While this might be enough for hobbyists who want to advance their websites with 3D content using custom web development trends. However, these graphics are not rich enough for most enterprise use. For example, car companies that market their latest models need photorealistic 3D graphics for car configurators. But we found a way around this. We turned to computer-aided design tools and game engines to create their models, for initial publication using the WebGL API.
You may also read about the 15 TIPS FOR BUILDING AN EFFECTIVE BUSINESS WEBSITE IN 2022
Rendering text is even more complicated
Difficulties associated with crisp rendering might not be an issue for large, monochrome areas, but for the text they are. Originally, text projected onto a surface comes out blurry and with greyish edges. See these three steps below:
Increasing Anisotropy: To simply put, Anisotropic Filtering means the extent to which rendered surfaces are influenced by the angle they are rendered at. It lets you decrease pixel density as an object becomes relatively steeper to a 3D view. In short, for an isometric app like Arcentry, you want to increase Anisotropy to the maximum.
Using custom blending: Your canvas texture will have transparent or semi-transparent pixels, for example, everything but the text. Blending greatly impacts by mixing it into the main image. ThreeJS default alpha bending can be rough and leaves grey borders around the edges of transparent areas, but fixing it to custom blending with a simple, solid blend source works well.
Using Anti-Aliasing: This is a technique of rendering a larger image than required and scaling it down. It minimizes the distortion artifacts known as aliasing when representing a high-resolution image at a lower resolution. Multiple pixels help in softening edges.
Why Evon is a perfect partner for your 3D web platform
Would we choose WebGL for our future projects again? Definitely. Not only do we get the results that are truly worth it, but there is also a learning curve that makes every bit of the process feel deeply satisfying. Once you identify the right combination of concepts like antialiasing, anisotropy, and custom blending, your visuals finally look sharp and appealing.
What makes Evon Technologies a perfect partner for companies to implement web apps is not just its decade-long experience in being a custom web development company, but the zeal to take on new challenges and provide highly innovative technology solutions to businesses of all sizes. There is a dedicated team who design, code, and create your website to include all of the crucial areas required for your brand. The talented team of developers makes sure that the web applications are unique and user-friendly for the visitor and content management team. The other attributes include cross-platform compatibility, cross-browser compatibility, usability, and scalability, to your business website. If you are planning or have planned to develop your custom web platform then contact us today or drop an email at sales@evontech.com.
