Web Browser Image Compositing via Server-Side Rendering
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Web browsers struggle to quickly and accurately render highly detailed images due to hardware limitations, leading to disparities in image quality and responsiveness, as they rely solely on end-user device hardware for processing and rendering, which restricts dynamic scenes and complex lighting capabilities.
Innovation Solution
A system and method that utilize a rendering farm to handle image processing, allowing for adaptive composition and dynamic lighting, where image data is pre-computed and stored on render servers, enabling high-resolution rendering without relying on user device hardware, and allowing for dynamic interaction and low infrastructure requirements.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Manufacturing precision
If integrated graphics generation using end-user GPU is used, then image rendering can be performed in web browser, but image resolution and quality are limited by hardware capabilities
Solution Approach 1:
The system segments the image rendering process into two distinct parts: (1) server-side pre-computation of high-resolution image data and lighting calculations, and (2) client-side composition and display of pre-rendered layers. This segmentation allows the computationally intensive rendering tasks to be performed on powerful servers while the client device only needs to handle lightweight composition operations, thereby achieving high image resolution without being constrained by end-user GPU capabilities.
Solution Approach 2:
The system introduces an intermediary rendering server that acts as a mediator between the image source and the end-user device. This intermediary performs the complex rendering and lighting calculations centrally, then transmits the processed image data to clients. This intermediary approach eliminates the need for each client device to possess high-end graphics hardware, as the rendering burden is transferred to the intermediary server.
2Illumination intensity
If dynamic lighting system is used, then lighting quality can be improved, but GPU requirements increase and performance drops on lower-end hardware
Solution Approach 1:
The system extracts the dynamic lighting calculations from the client device and relocates them to the server environment. By taking out the computationally intensive lighting computations from the end-user GPU and performing them centrally on the rendering server, the system achieves high-quality dynamic lighting effects without imposing heavy GPU requirements on client devices.
3Manufacturing precision
If high complexity images are rendered, then image detail and accuracy improve, but rendering speed decreases due to processing requirements
Solution Approach 1:
The system performs preliminary rendering actions by pre-computing high-detail image data and lighting information on the server before transmission to client devices. This preliminary action allows complex, high-detail images to be rendered in advance on powerful servers, then delivered to clients as ready-to-display data, thereby achieving both high image detail and fast client-side display performance.
Data Source
AI summary
A system and method display two-dimensional (2D) and cube mapped (360) map environments divided into many different parts that are changeable over a network by end-users in real-time. Large portions of the images are filled with texture layers of different shapes and variants, so that a user can easily switch between the large portions. All of the large portions are saved on one or more render servers as a pack of digital images, and the end-users can communicate with the render servers to download the necessary portions of the images exactly when such portions are needed. The system and method utilize a set of rules that adaptively chooses the best way, in terms of computer performance, of composing the map environment and of changing the shapes and variants of the layers depending on a given environment.