HTML5 Canvas Rendering Engine GPU Offload

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Conventional graphic rendering on mobile devices is slow due to complex logic operations in HTML5 Canvas standard, which forces the CPU to process numerous operations, and game applications developed in C++ or Java require cumbersome installation and updating processes.

Innovation Solution

The method involves executing JavaScript codes with an API based on OPENGL, which parses and encapsulates rendering functions to optimize graphic rendering, leveraging GPU capabilities and avoiding unnecessary operations, allowing direct downloadable and easily updatable graphic applications.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Ease of operation

If HTML5 Canvas standard is used for graphic rendering in web browsers, then compatibility and ease of operation are improved, but CPU processing load increases and graphic rendering speed deteriorates

Engineering Contradiction:

Improveease of operationVSAvoidgraphic rendering speed

Core Design Contradiction:

Ease of operationVSProductivity

Solution Approach 1:

The patent introduces a rendering engine as an intermediary layer between the HTML5 Canvas API and the rendering target. This engine parses the Canvas API calls and translates them into optimized rendering operations, reducing the direct processing burden on the CPU while maintaining compatibility with the HTML5 standard.

Inventive Principle:

Principle #24Intermediary (Mediator)

Solution Approach 2:

The patent replaces the conventional CPU-based rendering mechanism with a hybrid approach that leverages GPU acceleration. By substituting the mechanical CPU processing with GPU-based parallel processing for rendering operations, the system achieves higher rendering speeds while maintaining the HTML5 Canvas interface.

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

2Productivity

If C++ or Java codes are used to develop game clients with GPU rendering, then graphic rendering speed is improved, but installation and updating complexity increases

Engineering Contradiction:

Improvegraphic rendering speedVSAvoidease of manufacture

Core Design Contradiction:

ProductivityVSEase of manufacture

Solution Approach 1:

The patent creates a universal runtime environment that can execute both HTML5/JavaScript code and native code components. This multi-functional platform allows game clients to be distributed as lightweight packages that can be easily updated without full installation, while still providing access to GPU rendering capabilities through the unified rendering engine.

Inventive Principle:

Principle #6Universality (Multi-functionality)

Solution Approach 2:

The patent extracts the rendering engine as a separate, standalone component that can be independently updated and distributed. This separation allows the core rendering functionality to be updated without requiring full reinstallation of the game client, reducing deployment complexity while maintaining high rendering performance.

Inventive Principle:

Principle #2Taking out (Extraction)

3Adaptability or versatility

If HTML5 Canvas API is used for graphic rendering, then ease of operation and compatibility are improved, but CPU processing burden increases

Engineering Contradiction:

ImproveadaptabilityVSAvoidCPU energy consumption

Core Design Contradiction:

Adaptability or versatilityVSUse of energy by moving object

Solution Approach 1:

The rendering engine serves as an intermediary that intercepts CPU-bound Canvas API calls and redirects appropriate operations to the GPU. This mediation reduces the energy consumption of the CPU by offloading rendering-intensive tasks to the GPU, which is better suited for parallel processing of graphical data.

Inventive Principle:

Principle #24Intermediary (Mediator)

Solution Approach 2:

The patent implements a dynamic rendering architecture that can adaptively switch between CPU and GPU processing based on the specific rendering task. This dynamic allocation optimizes energy usage by employing the most efficient processor for each operation, maintaining adaptability while reducing overall CPU energy consumption.

Inventive Principle:

Principle #15Dynamics

Data Source

PatentUS9646357B2Graphic rendering

Publication Date: 2017.05.09 ALIBABA GROUP HOLDING LTD

AI summary

The present disclosure provides example methods and apparatuses of conducting graphic rendering. JavaScript codes of a graphic application are obtained. The JavaScript codes include an API corresponding to a rendering function based on OPENGL. The API has a format complying with a standard of HTML5 Canvas. The JavaScript codes are executed at a parsing engine. When the API of the JavaScript codes is executed, the parsing engine parses the API to obtain a corresponding rendering function based on OPENGL. The rendering function is called to conduct graphic rendering to a rendering target. The present techniques improve a speed of graphic rendering at a mobile device.