Webpage 3D rendering and control method

Abstract

The invention discloses a webpage 3D rendering and control method, which comprises the following steps: step 1, asynchronous resource loading and scene initialization: carrying out network-aware asynchronous resource loading by adopting an intelligent prediction driven block loading technology, optimizing memory occupation through a self-adaptive space block and LRU cache strategy, and carrying out scene initialization; meanwhile, constructing a hierarchical scene tree to manage object transformation and a bounding box; and step 2, dynamic rendering pipeline execution: deploying a hierarchical visual degradation engine, dynamically switching multiple effects of soft shadow / PCF hard shadow, SSR precision and I BL sampling based on a five-level frame rate threshold, combining a PBR material adaptive rendering and motion perception LOD system, performing seamless detail level switching through normal reservation simplification, GPU-driven Morph transition and an asynchronous pre-calculation assembly line, and performing dynamic rendering on a dynamic rendering pipeline. The rendering optimization coordinator integrates the multi-dimensional parameters to generate a degradation instruction, and visual consistency is maintained; and step 3, user interaction and control feedback.

Description

Technical Field

[0001] This invention relates to the field of 3D rendering technology, and more particularly to a method for webpage 3D rendering and control. Background Technology

[0002] With the integration of WebGL into the HTML5 standard, the opening of browsers to GPU acceleration capabilities, and the leapfrog improvement in the performance of mobile devices, the traditional 2D web page rendering mode based on Canvas can no longer meet users' urgent needs for immersive experiences, complex scene interactions, and cross-platform consistency. This has prompted developers to build a 3D engine architecture based on the browser's native graphics API, balancing rendering efficiency and code maintainability. By encapsulating 3D graphics algorithms, resource management strategies, and user input control logic into independent modules, a low-level framework independent of specific game logic is formed.

[0003] Existing technologies only address quality degradation by switching soft shadows on and off, lacking layered optimization. For example, they do not dynamically adjust the soft shadow sampling rate or blur radius based on object distance or screen coverage. Therefore, a web page 3D rendering and control method is proposed. Summary of the Invention

[0004] The purpose of this invention is to address the shortcomings of existing technologies by proposing a webpage 3D rendering and control method.

[0005] To achieve the above objectives, the present invention adopts the following technical solution:

[0006] A method for rendering and controlling 3D web pages includes the following steps:

[0007] Step 1: Asynchronous Resource Loading and Scene Initialization: Using intelligent prediction-driven chunked loading technology, combined with player operation mode analysis, Bézier curve trajectory prediction and dynamic view frustum expansion mechanism, asynchronous resource loading is performed in a network-aware manner according to the priority of "foreground interactive objects → path obstacles → environmental decorations". Memory usage is optimized through adaptive spatial chunking and LRU caching strategy. At the same time, a hierarchical scene tree is built to manage object transformations and bounding boxes, providing basic data for subsequent rendering.

[0008] Step 2: Dynamic rendering pipeline execution: Deploy a layered visual degradation engine, dynamically switch between soft shadows / PCF hard shadows, SSR precision and IBL sampling effects based on five frame rate thresholds, combine PBR material adaptive rendering and motion-aware LOD system, seamlessly switch between levels of detail through normal preservation simplification, GPU-driven Morph transition and asynchronous pre-computation pipeline, and have the rendering optimization coordinator integrate multi-dimensional parameters to generate degradation instructions to maintain visual consistency;

[0009] Step 3: User Interaction and Control Feedback: Accurate object picking is achieved through a unified input manager and octree-accelerated ray detection, combined with layered collision detection and character controllers to prevent penetration. At the same time, the LOD sensitivity is dynamically adjusted according to the player's speed, and 3D-UI linkage and dynamic layout loading are supported through a hot-update UI system.

[0010] The above further includes:

[0011] Furthermore, the specific steps for asynchronous resource loading and scene initialization are as follows:

[0012] Player operation pattern analysis: Record player input frequency and mouse movement speed to generate operation pattern feature vectors. Use clustering algorithm to classify player behavior into exploratory and observational types, and dynamically adjust prediction model parameters. The exploratory type is represented by the player input frequency being greater than a set threshold, and the observational type is represented by the mouse movement speed being greater than a set threshold.

[0013] Bézier curve trajectory prediction: Using the cubic Bézier curve formula B(t)=(1-t) 3 P0+3(1-t) 2 2tP1+3(1-t)t 2 P2+t 3 P3, where t∈[0,1], P0, P1, P2, P3 are the historical positions within the last 3 seconds. The future position is predicted by fitting the curve using the least squares method.

[0014] Dynamic expansion of the view frustum: The preload radius is calculated based on the player's real-time speed v to complete the dynamic expansion of the view frustum;

[0015] Bandwidth-resolution mapping via Bandwidth D link Mapped to maximum texture resolution

[0016] Multi-priority loading queue: A weighted scheduling algorithm is adopted. The object loading priority P is obtained by weighting the type weight W and the triggering condition C, which is expressed as P = W·C, ensuring that critical resources are loaded first.

[0017] Resource loading: The main thread submits loading tasks to the Web Worker pool, and loads texture and mesh data asynchronously according to priority.

[0018] Furthermore, the specific steps for optimizing memory usage through adaptive space partitioning and LRU caching strategies during resource loading are as follows:

[0019] Space block optimization: A dynamic block density adjustment algorithm is adopted to calculate the block size in real time according to the scene complexity. Combined with the LRU cache eviction mechanism, a doubly linked list is maintained, sorted by access time, and a hash table is used to quickly locate the block. When the cache capacity reaches the limit, the block at the tail of the linked list is removed. Each time a block is requested, it is moved to the head of the linked list.

[0020] Hierarchical scene tree construction: Construct a quadtree scene structure managed by the SceneNode class, accelerate spatial queries through axis-aligned bounding boxes, merge static objects into single Draw Calls at the block level, and allocate instantiated buffers for dynamic characters;

[0021] Rendering queue classification: Static batched objects are sorted by material to reduce shader switching, and dynamic objects are submitted in batches by instantiated buffers, combined with fast scene tree traversal during view frustum clipping.

[0022] Furthermore, in step two, the specific steps for rendering by deploying a layered visual degradation engine and a perceptual LOD system are as follows:

[0023] Layered visual degradation engine: Based on a five-level frame rate threshold, it dynamically switches the gradual transition from soft shadows to PCF hard shadows, linearly degrades SSR accuracy, and dynamically simplifies IBL sampling Mipmap, combined with PBR material degradation strategy to maintain basic visual quality.

[0024] Spatiotemporal hybrid transition model: It adopts a motion-aware LOD system, calculates dynamic bias values ​​based on player speed and view direction, drives a normal-preserving mesh simplification algorithm to protect visual feature edges, and uses GPU-driven Morph transition to interpolate high / low detail meshes in the vertex shader to achieve seamless switching, and reduces runtime overhead with asynchronous pre-computation pipeline.

[0025] Optimization Coordination: The rendering optimization coordinator integrates frame rate, temperature, and power consumption parameters, dynamically adjusts the degradation threshold through a PID controller, enables visual compensation on critical objects, and combines color correction LUTs and dynamic resolution scaling technology to maintain core visual focus during performance fluctuations.

[0026] Furthermore, in the hierarchical visual degradation engine, the current degradation level is determined by comparing the real-time frame rate with a preset threshold, and is represented as follows:

[0027] Rendering effects are dynamically adjusted:

[0028] Level 1: Gradient transition from soft shadow to PCF hard shadow;

[0029] Level L2: SSR is turned off, and the number of IBL samplings is reduced;

[0030] Level 3: Disable dynamic shadows, switch environment objects to baked shadow maps;

[0031] Level L4: Preserve basic PBR lighting and fix all objects at Level LOD0.

[0032] Furthermore, in the spatiotemporal hybrid transition model, the GPU-driven Morph transition is used to interpolate high / low detail meshes in the vertex shader to achieve seamless switching. The specific steps for reducing runtime overhead with the asynchronous pre-computation pipeline are as follows: A LOD cache is generated using Web Workers; multi-level meshes are generated through a simplified algorithm during idle periods; data is stored in a GPU buffer and dynamically invoked at runtime; the rendering thread selects the pre-computed mesh based on lodBias, and seamless switching is achieved by combining the Morph parameter (t).

[0033] GPU-driven Morph transition: interpolating high / low detail mesh vertex positions in the vertex shader;

[0034] Main thread task submission: During browser idle periods or when the player pauses, the main thread submits the raw mesh data and target LOD level to the Web Worker via postMessage;

[0035] Worker thread LOD generation: Using an improved quadratic error metric algorithm, feature edges and UV seams are preserved first. The mesh is iteratively shrunk at each level of LOD according to the simplification rate to generate a multi-level topology. After generating the multi-level topology, it is serialized into an ArrayBuffer containing vertices / indices / bounding boxes and returned without copying using a Transferable object.

[0036] Main thread GPU resource storage: The main thread maps the received LOD data to the WebGL / WebGPU buffer, builds a double buffering mechanism to avoid rendering interruption, and records the metadata of each LOD level;

[0037] Runtime dynamic LOD switching: The LOD level is dynamically selected at runtime based on the lodBias calculated according to the player's speed and view direction. The Morph transition factor is generated by combining distance or time interpolation. Finally, the high / low detail mesh vertex positions are interpolated in the vertex shader through the mix function. Seamless detail switching is achieved with normal continuity protection, and memory usage is optimized through the LRU cache eviction policy.

[0038] Furthermore, in step three, the specific steps for user interaction and control feedback are as follows:

[0039] Input event handling: An octree space partitioning algorithm is used to accelerate ray detection for object picking, combined with a hierarchical collision detection system to prevent penetration;

[0040] Physical interaction feedback: Stable movement is ensured through the character controller's position correction formula and terrain height query;

[0041] Dynamic LOD Adjustment: LOD sensitivity adjustment is driven by motion perception factor and viewing direction, and the mesh detail level is dynamically switched in combination with screen error threshold screenError;

[0042] Hot-update UI system: Binding to 3D spatial elements through nine-grid scaling technology.

[0043] Furthermore, the specific steps of the input event processing are as follows:

[0044] Octree-accelerated ray detection: The scene is recursively divided into an octree structure, where each node represents a cubic region. Subdivision continues only if a child node contains an object. Starting from the root node, the intersection of a ray and the bounding box of the current node is detected. If they do not intersect, the branch is pruned. For intersecting nodes, child nodes are sorted by spatial proximity, prioritizing the detection of the nearest child node. When a leaf node is detected, all objects within it are traversed, and... The algorithm calculates the precise intersection point between the ray and the object's bounding box to complete the picking process;

[0045] A layered collision detection system is constructed: Terrain layer: The terrain is divided into regular grids, and each grid cell is represented by an AABB bounding box; Character layer: The character is represented by a capsule. When an AABB overlap with an obstacle is detected, the minimum displacement vector is calculated using the separating axis theorem, and the character's position is adjusted; Projectile layer: The projectile layer uses the sphere equation. If the sphere overlaps with the character's capsule, a damage event is triggered, and the projectile's position is adjusted to the nearest non-collision point; Penetration prevention logic: After the character moves, capsule-terrain detection is performed first. If penetration occurs, an iterative method is used to gradually approach the legal position.

[0046] The present invention has the following beneficial effects:

[0047] In this invention, a five-level dynamic degradation engine is constructed. The gradual transition from soft shadows to PCF hard shadows is driven by the frame rate threshold. Combined with SSR precision dynamic adjustment and IBL sampling simplification, visual coherence is improved. When soft shadows are disabled, the contact hard shadows retain the contact hardening characteristics and form a light and shadow transition chain with the screen space reflection of PBR material, thus solving the problem of inconsistency between hard shadows and soft reflections / refractions. Attached Figure Description

[0048] Figure 1 This is a flowchart illustrating the steps of a webpage 3D rendering and control method proposed in this invention. Detailed Implementation

[0049] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0050] Please see Figure 1 As shown, the present invention is a method for 3D rendering and control of web pages, comprising the following steps:

[0051] Step 1: Asynchronous Resource Loading and Scene Initialization: Using intelligent prediction-driven chunked loading technology, combined with player operation mode analysis, Bézier curve trajectory prediction and dynamic view frustum expansion mechanism, asynchronous resource loading is performed in a network-aware manner according to the priority of "foreground interactive objects → path obstacles → environmental decorations". Memory usage is optimized through adaptive spatial chunking and LRU caching strategy. At the same time, a hierarchical scene tree is built to manage object transformations and bounding boxes, providing basic data for subsequent rendering.

[0052] Step 2: Dynamic rendering pipeline execution: Deploy a layered visual degradation engine, dynamically switch between soft shadows / PCF hard shadows, SSR precision and IBL sampling effects based on five frame rate thresholds, combine PBR material adaptive rendering and motion-aware LOD system, seamlessly switch between levels of detail through normal preservation simplification, GPU-driven Morph transition and asynchronous pre-computation pipeline, and have the rendering optimization coordinator integrate multi-dimensional parameters to generate degradation instructions to maintain visual consistency;

[0053] Step 3: User Interaction and Control Feedback: Accurate object picking is achieved through a unified input manager and octree-accelerated ray detection, combined with layered collision detection and character controllers to prevent penetration. At the same time, the LOD sensitivity is dynamically adjusted according to the player's speed, and 3D-UI linkage and dynamic layout loading are supported through a hot-update UI system.

[0054] In one embodiment, the specific steps of asynchronous resource loading and scene initialization are as follows:

[0055] Player operation pattern analysis: Record player input frequency (keyboard keystrokes / second) and mouse movement speed (pixels / frame), generate operation pattern feature vectors, and divide player behavior into exploratory and observational types using a clustering algorithm (K-Means). Dynamically adjust the prediction model parameters. The exploratory type is represented by the player input frequency being greater than a set threshold, and the observational type is represented by the mouse movement speed being greater than a set threshold.

[0056] Bézier curve trajectory prediction: Using the cubic Bézier curve formula B(t)=(1-t) 3 P0+3(1-t)2 2tP1+3(1-t)t 2 P2+t 3 P3, where t∈[0,1], P0, P1, P2, P3 are the historical positions within the last 3 seconds (sampled once per second). The future position is predicted by fitting the curve using the least squares method.

[0057] Dynamic expansion of the view frustum: The preload radius is calculated based on the player's real-time speed v (m / s) to complete the dynamic expansion of the view frustum;

[0058] Bandwidth-resolution mapping via Bandwidth D link Mapped to the maximum texture resolution;

[0059] Example:

[0060] 10Mbps → 2048×2048

[0061] 8Mbps → 1536×1536 (rounded down to 1024×1024)

[0062] 5Mbps → 1024×1024.

[0063] Multi-priority loading queue: A weighted scheduling algorithm is adopted. The object loading priority P is obtained by weighting the type weight W and the triggering condition C, which is expressed as P = W·C, ensuring that critical resources are loaded first.

[0064] Resource loading: The main thread submits loading tasks to the Web Worker pool, and loads texture and mesh data asynchronously according to priority.

[0065] Example:

[0066] Type weights: Foreground interactors W = 0.9, Path obstacles W = 0.7, Environmental decorations W = 0.3.

[0067] Triggering conditions: gaze direction Cview = 1, predicted trajectory overlap Cpred = 0.8, and field of view edge Cedge = 0.5.

[0068] The treasure chest the player is looking at (foreground interactive object + direction of view): P = 0.9 * 1 = 0.9

[0069] Trees along the path (environmental decorations + predicted trajectory overlap): P = 0.3·0.8 = 0.24.

[0070] Prediction phase: Record input data for each frame, update the operation mode feature vector, use Bézier curves to predict future position, and expand the view frustum to the preloaded radius;

[0071] Network testing phase: Obtaining bandwidth D linkCalculate R tex Mapped to the maximum resolution of the texture.

[0072] Priority sorting phase: Sort objects within the view frustum according to their P-values ​​and generate a loading queue (e.g., foreground interactive objects → path obstacles → environment decorations);

[0073] Resource loading phase: The main thread submits loading tasks to the Web Worker pool, loads texture and mesh data asynchronously according to priority, and uses the LRU strategy to evict the oldest block that exceeds the cache capacity (e.g., 100 blocks).

[0074] In one embodiment, the specific steps for optimizing memory usage through adaptive space partitioning and LRU caching strategies during resource loading are as follows:

[0075] Spatial block optimization: A dynamic block density adjustment algorithm is adopted to calculate the block size in real time according to the scene complexity (e.g., urban areas are refined to 125 meters / block, and outdoor terrain is expanded to 500 meters / block). Combined with the LRU cache eviction mechanism, a doubly linked list is maintained, sorted by access time, and a hash table is used to quickly locate blocks. When the cache capacity reaches the limit (e.g., 100 blocks), the block at the tail of the linked list (the least used block) is removed. Each time a block is requested, it is moved to the head of the linked list.

[0076] Hierarchical scene tree construction: Construct a quadtree scene structure managed by the SceneNode class, accelerate spatial queries through axis-aligned bounding boxes (AABB), merge static objects into a single Draw Call at the block level (e.g., 50 trees of the same material are batched into 1.2MB of vertex data), while dynamic characters are allocated instantiation buffers (100 characters share the same mesh, and GPU instantiation is achieved through glVertexAttribDivisor);

[0077] Rendering queue classification: Static batched objects are sorted by material to reduce shader switching, and dynamic objects are submitted in batches by instantiated buffers. This is combined with fast scene tree traversal during view frustum clipping (AABB clipping skips 70% of irrelevant nodes).

[0078] In one embodiment, the specific steps for rendering by deploying a hierarchical visual degradation engine and a perceptual LOD system in step two are as follows:

[0079] Layered visual degradation engine: Based on five-level frame rate threshold, it dynamically switches the gradual transition from soft shadows to PCF hard shadows, linearly degrades SSR accuracy, and dynamically simplifies IBL sampling Mipmap. Combined with PBR material degradation strategies (such as L3 level to reduce metallicity and enhance AO compensation details) to maintain basic visual quality.

[0080] Spatiotemporal hybrid transition model: Employs a motion-aware LOD system, which calculates dynamic bias values ​​based on player speed and view direction (lodBias = speed factor × view factor, calculated every frame based on player speed (v) and view direction (θ), switching LOD in advance when moving at high speed or facing an object), drives a normal-preserving mesh simplification algorithm to protect visual feature edges, and uses GPU-driven Morph transition to interpolate high / low detail meshes in the vertex shader to achieve seamless switching, combined with an asynchronous pre-computation pipeline (Web Worker generates LOD cache) to reduce runtime overhead;

[0081] Optimization Coordination: The rendering optimization coordinator integrates frame rate, temperature, and power consumption parameters, dynamically adjusts the degradation threshold through a PID controller, and enables visual compensation on key objects (such as improving character material details at L3 / L4 level). Combined with color correction LUT and dynamic resolution scaling (TAAU) technology, it maintains the core visual focus when performance fluctuates.

[0082] In one embodiment, in a hierarchical visual degradation engine, the current degradation level is determined by comparing the real-time frame rate (FPS) with a preset threshold, denoted as:

[0083] Rendering effects are dynamically adjusted:

[0084] Level L1: Soft shadow → PCF hard shadow gradient transition, SSR accuracy reduced by 50% (formula: ssrQuality = 1 - 0.5 × degradLevel);

[0085] Level L2: SSR is turned off, and the number of IBL samples is reduced (formula: iblSamples=16×0.25^(degradLevel-1));

[0086] Level 3: Disable dynamic shadows, switch environment objects to baked shadow maps;

[0087] Level L4: Preserve basic PBR lighting and fix all objects at Level LOD0.

[0088] In one embodiment, in the spatiotemporal hybrid transition model, the GPU-driven Morph transition interpolates high / low detail meshes in the vertex shader to achieve seamless switching. The specific steps, combined with an asynchronous pre-computation pipeline to reduce runtime overhead, are as follows: A LOD cache is generated using a Web Worker; during idle periods, a simplified algorithm generates multi-level meshes (LOD1-LOD4); data is stored in a GPU buffer and dynamically accessed at runtime; the rendering thread selects the pre-computed mesh based on lodBias and combines this with the Morph parameter (t) to achieve seamless switching.

[0089] GPU-driven Morph transition: interpolating high / low detail mesh vertex positions in the vertex shader;

[0090] Main thread task submission: During browser idle periods or when the player pauses, the main thread submits the raw mesh data and target LOD level to the Web Worker via postMessage;

[0091] Worker thread LOD generation: Using an improved Quadric Error Metrics algorithm, feature edges (such as abrupt angle changes > 30°) and UV seams are preserved first. For each LOD level, the mesh is iteratively shrunk according to the simplification rate (such as LOD1: 75% vertices, LOD4: 10% vertices) to generate a multi-level topology. After generating the multi-level topology, it is serialized into an ArrayBuffer containing vertices / indices / bounding boxes and returned without copying using a Transferable object.

[0092] Main thread GPU resource storage: The main thread maps the received LOD data to the WebGL / WebGPU buffer, builds a double buffering mechanism to avoid rendering interruption, and records the metadata of each LOD level;

[0093] Runtime dynamic LOD switching: The LOD level is dynamically selected at runtime based on the lodBias calculated according to the player's speed and view direction. The Morph transition factor is generated by combining distance or time interpolation. Finally, the high / low detail mesh vertex positions are interpolated in the vertex shader through the mix function. Seamless detail switching is achieved with normal continuity protection, and memory usage is optimized through the LRU cache eviction policy.

[0094] In one embodiment, the specific steps of user interaction and control feedback in step three are as follows:

[0095] Input event handling: Octree space partitioning is used to accelerate the ray detection algorithm (based on...). The formula calculates the intersection of the ray and the bounding box to pick up objects, and combines a layered collision detection system (the terrain layer uses AABB for fast detection, the character layer defines the movement range through the capsule formula height h / radius r, and the projectile layer uses the sphere detection formula) to prevent penetration.

[0096] Physical interaction feedback: Stable movement is ensured through the character controller's position correction formula and terrain height query;

[0097] Dynamic LOD Adjustment: LOD sensitivity adjustment is driven by motion perception factor and viewing direction, and the mesh detail level is dynamically switched in combination with screen error threshold screenError;

[0098] Hot-update UI system: Binding to 3D space elements through nine-grid scaling technology (anchoring HTML controls using matrix transformation from world coordinates to screen coordinates).

[0099] In one embodiment, the specific steps of the input event processing are as follows:

[0100] Octree-accelerated ray detection: The scene is recursively divided into an octree structure, where each node represents a cubic region. Subdivision continues only if a child node contains an object. Starting from the root node, the intersection of a ray and the bounding box of the current node is detected. If they do not intersect, the branch is pruned. For intersecting nodes, child nodes are sorted by spatial proximity, prioritizing the detection of the nearest child node. When a leaf node is detected, all objects within it are traversed, and... The algorithm calculates the precise intersection point between the ray and the object's bounding box to complete the picking process;

[0101] A layered collision detection system is constructed: Terrain layer: The terrain is divided into regular grids, and each grid cell is represented by an AABB bounding box; Character layer: The character is represented by a capsule. When an AABB overlap with an obstacle is detected, the minimum displacement vector (MDV) is calculated using the Separating Axis Theorem (SAT) to adjust the character's position; Projectile layer: The projectile layer uses the sphere equation. If the sphere overlaps with the character's capsule, a damage event is triggered and the projectile's position is adjusted to the nearest non-collision point; Penetration prevention logic: After the character moves, capsule-terrain detection is performed first. If penetration occurs, an iterative method is used to gradually approach the legal position.

[0102] Although embodiments of the invention have been shown and described, it will be understood by those skilled in the art that various changes, modifications, substitutions and variations can be made to these embodiments without departing from the principles and spirit of the invention, the scope of which is defined by the appended claims and their equivalents.

Claims

1. A method for 3D rendering and control of web pages, characterized in that, Includes the following steps: Step 1: Asynchronous Resource Loading and Scene Initialization: Using intelligent prediction-driven chunked loading technology, combined with player operation mode analysis, Bézier curve trajectory prediction and dynamic view frustum expansion mechanism, asynchronous resource loading is performed in a network-aware manner according to the priority of "foreground interactive objects → path obstacles → environmental decorations". Memory usage is optimized through adaptive spatial chunking and LRU caching strategy. At the same time, a hierarchical scene tree is built to manage object transformations and bounding boxes, providing basic data for subsequent rendering. Step 2: Dynamic rendering pipeline execution: Deploy a layered visual degradation engine, dynamically switch between soft shadows / PCF hard shadows, SSR precision and IBL sampling effects based on five frame rate thresholds, combine PBR material adaptive rendering and motion-aware LOD system, seamlessly switch between levels of detail through normal preservation simplification, GPU-driven Morph transition and asynchronous pre-computation pipeline, and have the rendering optimization coordinator integrate multi-dimensional parameters to generate degradation instructions to maintain visual consistency; Step 3: User Interaction and Control Feedback: Accurate object picking is achieved through a unified input manager and octree-accelerated ray detection, combined with layered collision detection and character controllers to prevent penetration. At the same time, the LOD sensitivity is dynamically adjusted according to the player's speed, and 3D-UI linkage and dynamic layout loading are supported through a hot-update UI system.

2. The webpage 3D rendering and control method according to claim 1, characterized in that, The specific steps for asynchronous resource loading and scene initialization are as follows: Player operation pattern analysis: Record player input frequency and mouse movement speed to generate operation pattern feature vectors. Use clustering algorithm to classify player behavior into exploratory and observational types, and dynamically adjust prediction model parameters. The exploratory type is represented by the player input frequency being greater than a set threshold, and the observational type is represented by the mouse movement speed being greater than a set threshold. Bézier curve trajectory prediction: Using the cubic Bézier curve formula B(t)=(1-t) 3 P0+3(1-t) 2 2tP1+3(1-t)t 2 P2+t 3 P3, where t∈[0,1], P0, P1, P2, P3 are the historical positions within the last 3 seconds. The future position is predicted by fitting the curve using the least squares method. Dynamic expansion of the view frustum: The preload radius is calculated based on the player's real-time speed v to complete the dynamic expansion of the view frustum; Bandwidth-resolution mapping via Bandwidth D link Mapped to the maximum texture resolution; Multi-priority loading queue: A weighted scheduling algorithm is adopted. The object loading priority P is obtained by weighting the type weight W and the triggering condition C, which is expressed as P = W·C, ensuring that critical resources are loaded first. Resource loading: The main thread submits loading tasks to the Web Worker pool, and loads texture and mesh data asynchronously according to priority.

3. The webpage 3D rendering and control method according to claim 2, characterized in that, The specific steps for optimizing memory usage through adaptive space partitioning and LRU caching strategies during resource loading are as follows: Space block optimization: A dynamic block density adjustment algorithm is adopted to calculate the block size in real time according to the scene complexity. Combined with the LRU cache eviction mechanism, a doubly linked list is maintained, sorted by access time, and a hash table is used to quickly locate the block. When the cache capacity reaches the limit, the block at the tail of the linked list is removed. Each time a block is requested, it is moved to the head of the linked list. Hierarchical scene tree construction: Construct a quadtree scene structure managed by the SceneNode class, accelerate spatial queries through axis-aligned bounding boxes, merge static objects into single Draw Calls at the block level, and allocate instantiated buffers for dynamic characters; Rendering queue classification: Static batched objects are sorted by material to reduce shader switching, and dynamic objects are submitted in batches by instantiated buffers, combined with fast scene tree traversal during view frustum clipping.

4. The webpage 3D rendering and control method according to claim 1, characterized in that, In step two, the specific steps for rendering by deploying a layered visual degradation engine and a perceptual LOD system are as follows: Layered visual degradation engine: Based on a five-level frame rate threshold, it dynamically switches the gradual transition from soft shadows to PCF hard shadows, linearly degrades SSR accuracy, and dynamically simplifies IBL sampling Mipmap, combined with PBR material degradation strategy to maintain basic visual quality. Spatiotemporal hybrid transition model: It adopts a motion-aware LOD system, calculates dynamic bias values ​​based on player speed and view direction, drives a normal-preserving mesh simplification algorithm to protect visual feature edges, and uses GPU-driven Morph transition to interpolate high / low detail meshes in the vertex shader to achieve seamless switching, and reduces runtime overhead with asynchronous pre-computation pipeline. Optimization Coordination: The rendering optimization coordinator integrates frame rate, temperature, and power consumption parameters, dynamically adjusts the degradation threshold through a PID controller, enables visual compensation on critical objects, and combines color correction LUTs and dynamic resolution scaling technology to maintain core visual focus during performance fluctuations.

5. A webpage 3D rendering and control method according to claim 4, characterized in that, In the hierarchical visual degradation engine, the current degradation level is determined by comparing the real-time frame rate with a preset threshold, and is represented as follows: Rendering effects are dynamically adjusted: Level 1: Gradient transition from soft shadow to PCF hard shadow; Level L2: SSR is turned off, and the number of IBL samplings is reduced; Level 3: Disable dynamic shadows, switch environment objects to baked shadow maps; Level L4: Preserve basic PBR lighting and fix all objects at Level LOD0.

6. The webpage 3D rendering and control method according to claim 1, characterized in that, In the spatiotemporal hybrid transition model, GPU-driven Morph transitions are used to interpolate high / low detail meshes in the vertex shader to achieve seamless switching. The specific steps, combined with an asynchronous pre-computation pipeline to reduce runtime overhead, are as follows: A LOD cache is generated using Web Workers; multi-level meshes are generated during idle periods using a simplified algorithm; data is stored in a GPU buffer and dynamically accessed at runtime; the rendering thread selects the pre-computed mesh based on lodBias and combines this with the Morph parameter (t) to achieve seamless switching. GPU-driven Morph transition: interpolating high / low detail mesh vertex positions in the vertex shader; Main thread task submission: During browser idle periods or when the player pauses, the main thread submits the raw mesh data and target LOD level to the Web Worker via postMessage; Worker thread LOD generation: Using an improved quadratic error metric algorithm, feature edges and UV seams are preserved first. The mesh is iteratively shrunk at each level of LOD according to the simplification rate to generate a multi-level topology. After generating the multi-level topology, it is serialized into an ArrayBuffer containing vertices / indices / bounding boxes and returned without copying using a Transferable object. Main thread GPU resource storage: The main thread maps the received LOD data to the WebGL / WebGPU buffer, builds a double buffering mechanism to avoid rendering interruption, and records the metadata of each LOD level; Runtime dynamic LOD switching: The LOD level is dynamically selected at runtime based on the lodBias calculated according to the player's speed and view direction. The Morph transition factor is generated by combining distance or time interpolation. Finally, the high / low detail mesh vertex positions are interpolated in the vertex shader through the mix function. Seamless detail switching is achieved with normal continuity protection, and memory usage is optimized through the LRU cache eviction policy.

7. The webpage 3D rendering and control method according to claim 1, characterized in that, In step three, the specific steps for user interaction and control feedback are as follows: Input event handling: An octree space partitioning algorithm is used to accelerate ray detection for object picking, combined with a hierarchical collision detection system to prevent penetration; Physical interaction feedback: Stable movement is ensured through the character controller's position correction formula and terrain height query; Dynamic LOD Adjustment: LOD sensitivity adjustment is driven by motion perception factor and viewing direction, and the mesh detail level is dynamically switched in combination with screen error threshold screenError; Hot-update UI system: Binding to 3D spatial elements through nine-grid scaling technology.

8. A webpage 3D rendering and control method according to claim 7, characterized in that, The specific steps for handling input events are as follows: Octree-accelerated ray detection: The scene is recursively divided into an octree structure, where each node represents a cubic region. Subdivision continues only if a child node contains an object. Starting from the root node, the intersection of a ray and the bounding box of the current node is detected. If they do not intersect, the branch is pruned. For intersecting nodes, child nodes are sorted by spatial proximity, prioritizing the detection of the nearest child node. When a leaf node is detected, all objects within it are traversed, and... - The Trumbore algorithm calculates the precise intersection of the ray and the object's bounding box to complete the picking; Construct a layered collision detection system: Terrain layer: The terrain is divided into regular grids, and each grid cell is represented by an AABB bounding box; Character layer: The character is represented by a capsule. When an AABB overlap with an obstacle is detected, the minimum displacement vector is calculated using the separating axis theorem, and the character's position is adjusted; Projectile layer: The projectile layer uses the sphere equation. If the sphere overlaps with the character's capsule, a damage event is triggered, and the projectile's position is adjusted to the nearest non-collision point. After the penetration prevention logic character moves, a capsule-terrain detection is performed first. If penetration occurs, the legal position is gradually approached through an iterative method.

Images