A 3D design system based on Realibox engine

Abstract

The invention discloses a 3D design system based on the Realibox engine, comprising the following steps: step one: 3D real-time rendering; step two: performance optimization; step three: data storage and backup. The invention has the following beneficial effects: in the process of 3D real-time rendering, varnish, light transmission, volume and order-independent translucent mixing steps are successively passed, and a translucent mixing depth test is performed in the order-independent translucent mixing step, and the mixing step can be ended only after the translucent mixing depth test is passed, so that the translucent object can achieve the effect of deep mixing, and through the set performance optimization steps, the WebAssembly module and script are cached locally to speed up the loading speed after the first access, the ktx texture compression workflow and map conversion to ktx improve the scene performance; GPU instantiation renders the same mesh at each drawing call, and each instance has different parameters to increase the variation and reduce the repetition in appearance.

Description

Technical Field

[0001] The present invention relates to a 3D design system, in particular to a 3D design system based on a Realibox engine, belonging to the technical field of 3D design systems. Background Art

[0002] In the process of computers rendering 3D scenes with rich content, complex structure and wide spatial range into screen images, the central processing unit and graphics processing unit need to interactively process huge amounts of 3D data.

[0003] The existing 3D design system is based on the Three.js rendering library, which allows online editing of industrial product assembly relationships and imported models, and can quickly and easily complete 3D modeling of industrial products.

[0004] The defect is that in the process of 3D real-time rendering, it is necessary to carry out the steps of varnishing, light transmission and volume processing in sequence, and then many translucent entities are required to be mixed. In the process of mixing, there is incomplete mixing. At the same time, the performance of the 3D design system is difficult to optimize. Therefore, we proposed a 3D design system based on the Realibox engine. Summary of the invention

[0005] The purpose of the present invention is to provide a 3D design system based on the Realibox engine in order to solve the above problems. In the process of 3D real-time rendering, varnish, light transmission, volume and order-independent translucent mixing steps are successively passed, and a translucent mixing depth test is performed in the order-independent translucent mixing step. The mixing step can only be ended after passing the semi-transparent mixing depth test, thereby enabling the translucent object to achieve a depth mixing effect.

[0006] The present invention achieves the above-mentioned purpose through the following technical solutions, a 3D design system based on Realibox engine, comprising the following steps:

[0007] Step 1: 3D real-time rendering, standard effects use physically based rendering to achieve realistic and seamless rendering results across different environments;

[0008] Step 2: Performance optimization, optimize rendering performance;

[0009] Step 3: Data storage and backup, store and back up the rendering data.

[0010] Preferably, the 3D real-time rendering includes:

[0011] Step 1: Varnish;

[0012] Step 2: Light transmission;

[0013] Step 3: Volume;

[0014] Step 4: Order-independent translucent blending.

[0015] Preferably, the varnishing step is specifically as follows:

[0016] Based on the isotropic GGX distribution and microfacet BRDF roughness, the surface of the varnish material object is divided into two parts, one is the ClearCoatLayer and the other is the BaseLayer. When a beam of light is incident on the surface, part of the light is directly reflected as the ClearCoat highlight, and the other part enters the BaseLayer and is divided into diffuse reflection and GGX highlight reflection.

[0017] Preferably, the light transmission step is specifically:

[0018] Add specular_btdf to the core BRDF using transmission.

[0019] Preferably, the volume step is specifically:

[0020] Rendering of various objects and the corresponding top-down slice through the scene. Solid lines represent meshes, grey areas represent volumes, thin-walled materials are applied to open and closed meshes, dashed lines represent imaginary boundaries of infinitely thin volumes, and volumetric materials are applied to closed meshes, creating a volumetric effect of refraction.

[0021] Preferably, the order-independent semi-transparent mixing step is specifically:

[0022] Over is stacked from back to front, while under is stacked from front to back.

[0023] There are three layers of CBA from near to far

[0024] Over operation: first superimpose ab, then superimpose with c;

[0025] Under operation: first superimpose bc, then superimpose with a;

[0026] The under operation is performed on the semi-transparent objects layer by layer from front to back, so that all the semi-transparent objects to be rendered are mixed into one layer, and finally the over operation is performed with the opaque objects at the bottom layer.

[0027] Preferably, the semi-transparent mixed depth test steps are as follows:

[0028] Step 1: Perform depth testing on all objects in an unordered manner and write the depth of the nearest fragment into the z-buffer;

[0029] Step 2: Traverse the semi-transparent objects in an unordered manner, compare the depth of the fragment with the depth of the z-buffer, and if they are the same, execute under the color-buffer with the color-buffer. When executing for the first time, just write it directly into the color-buffer, and write the transparency of the semi-transparent fragment into the a-buffer, and mark the depth of the fragment as a specific value, indicating that this layer is peeled off;

[0030] Step 3: Same as step 1, traverse all objects in an unordered manner to perform depth testing, and write the depth of the nearest fragment into the z-buffer;

[0031] Step 4: Traverse the semi-transparent objects in an unordered manner, compare the depth of the fragment with the depth of the z-buffer, if they are the same, perform under on the color-buffer and write the mixed color and transparency into the color-buffer and a-buffer, and mark the depth of the fragment as a specific value, indicating that this layer is peeled off;

[0032] Step 5: Repeat Step 3 to Step 4, and terminate when any of the following conditions is met;

[0033] 1. When traversing a translucent object, the depth of all fragments is not equal to the z-buffer, which means that an opaque object is encountered;

[0034] 2. Since the transparency in a-buffer increases and approaches 1 after each under, the value in a-buffer is always greater than the threshold;

[0035] 3. Repeat a fixed number of times;

[0036] Step 6: Blend the opaque and translucent layers; traverse the opaque objects to perform depth testing, and perform an over operation on the color of the nearest opaque object and the current color-buffer.

[0037] Preferably, the performance optimization comprises the following steps:

[0038] Step 1: Cache WebAssembly modules and scripts locally to speed up loading after the first visit;

[0039] Step 2: ktx texture compression, ktx texture compression workflow and map conversion to ktx to improve scene performance;

[0040] Step 3: Model Instancing, GPU instancing renders the same mesh on each draw call, with each instance having different parameters to increase variation and reduce repetition in appearance.

[0041] Preferably, the model instantiation comprises the following steps:

[0042] Step 1: Create the model object and instance quantity to be instantiated;

[0043] Step 2: Create an instantiated model object and add the model as a property of the Geomery object to the instantiated model object;

[0044] Step 3: Use the InstancedBufferGeometry class to create the geometry of the instanced model; this class takes the original model geometry as a parameter and provides buffer data of instance attributes for each instance;

[0045] Step 4: Create an InstancedMesh object and pass the instanced geometry and instanced model objects as parameters to the InstancedMesh constructor.

[0046] The beneficial effects of the present invention are as follows: in the process of 3D real-time rendering, varnish, light transmission, volume and order-independent translucent mixing steps are successively passed, and a translucent mixing depth test is performed in the order-independent translucent mixing step. The mixing step can be ended only after the translucent mixing depth test is passed, thereby enabling the translucent object to achieve a depth mixing effect, and through the set performance optimization steps, the WebAssembly modules and scripts are cached locally to speed up the loading speed after the first access, the ktx texture compression workflow and map conversion to ktx improve the scene performance; GPU instantiation renders the same mesh at each drawing call, and each instance has different parameters to increase changes and reduce repetition in appearance, thereby optimizing the performance of the 3D design system. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] Figure 1 It is a schematic diagram of the process of the present invention;

[0048] Figure 2 This is a schematic diagram of the 3D real-time rendering process of the present invention;

[0049] Figure 3 It is a schematic diagram of the varnishing step of the present invention;

[0050] Figure 4 is the calculation formula of the varnish step of the present invention;

[0051] Figure 5 It is a schematic diagram of the light transmission process of the present invention;

[0052] Figure 6 It is a schematic diagram of the volume steps of the present invention;

[0053] Figure 7 A schematic diagram of the sequence-independent semi-transparent mixing steps of the present invention;

[0054] Figure 8 This is a schematic diagram of a semi-transparent mixed depth test of the present invention;

[0055] Fig. 9 This is a schematic diagram of data processing of the present invention;

[0056] Fig.10 This is a schematic diagram of data storage backup in the present invention. DETAILED DESCRIPTION

[0057] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0058] The embodiment of the present invention discloses a 3D design system based on the Realibox engine.

[0059] According to the attached Figure 1-10 As shown, the following steps are included:

[0060] Step 1: 3D real-time rendering, standard effects use physically based rendering to achieve realistic and seamless rendering results across different environments;

[0061] Step 2: Performance optimization, optimize rendering performance;

[0062] Step 3: Data storage and backup, store and back up the rendering data.

[0063] In the process of 3D real-time rendering, it goes through varnish, light transmission, volume and order-independent translucent mixing steps successively, and performs translucent mixing depth test in the order-independent translucent mixing step. The mixing step can be ended only after passing the translucent mixing depth test, so that the translucent objects can achieve the effect of depth mixing. In addition, through the set performance optimization steps, WebAssembly modules and scripts are cached locally to speed up loading after the first access. The ktx texture compression workflow and map conversion to ktx improve the scene performance; GPU instancing renders the same mesh at each drawing call, and each instance has different parameters to increase changes and reduce repetition in appearance, thereby optimizing the performance of the 3D design system.

[0064] Furthermore, the 3D real-time rendering includes:

[0065] Step 1: Varnish;

[0066] Step 2: Light transmission;

[0067] Step 3: Volume;

[0068] Step 4: Order-independent translucent blending.

[0069] Furthermore, the varnishing step is specifically as follows:

[0070] Based on the isotropic GGX distribution and microfacet BRDF roughness, the surface of the varnish material object is divided into two parts, one part is ClearCoatLayer and the other part is BaseLayer. When a beam of light is incident on the surface, part of the light is directly reflected as ClearCoat highlight, and the diffuse reflection of this part of the light is ignored. The other part enters BaseLayer and is divided into diffuse reflection and GGX highlight reflection.

[0071] Furthermore, the light transmission step is specifically as follows:

[0072] Add specular_btdf to the core BRDF using transmission.

[0073] Preferably, the volume step is specifically:

[0074] Rendering of various objects and the corresponding top-down slice through the scene. Solid lines represent meshes, grey areas represent volumes, thin-walled materials are applied to open and closed meshes, dashed lines represent imaginary boundaries of infinitely thin volumes, and volumetric materials are applied to closed meshes, creating a volumetric effect of refraction.

[0075] Specifically disclosed, the order-independent semi-transparent mixing steps are:

[0076] Over is stacked from back to front, while under is stacked from front to back.

[0077] There are three layers of CBA from near to far

[0078] Over operation: first superimpose ab, then superimpose with c;

[0079] Under operation: first superimpose bc, then superimpose with a;

[0080] The under operation is performed on the semi-transparent objects layer by layer from front to back, so that all the semi-transparent objects to be rendered are mixed into one layer, and finally the over operation is performed with the opaque objects at the bottom layer.

[0081] Specifically disclosed, the semi-transparent mixed depth test steps are as follows:

[0082] Step 1: Perform depth testing on all objects in an unordered manner and write the depth of the nearest fragment into the z-buffer;

[0083] Step 2: Traverse the semi-transparent objects in an unordered manner, compare the depth of the fragment with the depth of the z-buffer, and if they are the same, execute under the color-buffer with the color-buffer. When executing for the first time, just write it directly into the color-buffer, and write the transparency of the semi-transparent fragment into the a-buffer, and mark the depth of the fragment as a specific value, indicating that this layer is peeled off;

[0084] Step 3: Same as step 1, traverse all objects in an unordered manner to perform depth testing, and write the depth of the nearest fragment into the z-buffer;

[0085] Step 4: Traverse the semi-transparent objects in an unordered manner, compare the depth of the fragment with the depth of the z-buffer, if they are the same, perform under on the color-buffer and write the mixed color and transparency into the color-buffer and a-buffer, and mark the depth of the fragment as a specific value, indicating that this layer is peeled off;

[0086] Step 5: Repeat Step 3 to Step 4, and terminate when any of the following conditions is met;

[0087] 1. When traversing a translucent object, the depth of all fragments is not equal to the z-buffer, which means that an opaque object is encountered;

[0088] 2. Since the transparency in a-buffer increases and approaches 1 after each under, the value in a-buffer is always greater than the threshold;

[0089] 3. Repeat a fixed number of times;

[0090] Step 6: Blend the opaque and translucent layers; traverse the opaque objects to perform depth testing, and perform an over operation on the color of the nearest opaque object and the current color-buffer.

[0091] Particularly disclosed, the performance optimization comprises the following steps:

[0092] Step 1: Cache WebAssembly modules and scripts locally to speed up loading after the first visit;

[0093] Step 2: ktx texture compression, ktx texture compression workflow and map conversion to ktx to improve scene performance;

[0094] Step 3: Model Instancing, GPU instancing renders the same mesh on each draw call, with each instance having different parameters to increase variation and reduce repetition in appearance.

[0095] Preferably, the model instantiation comprises the following steps:

[0096] Step 1: Create the model object and instance quantity to be instantiated;

[0097] Step 2: Create an instantiated model object and add the model as a property of the Geomery object to the instantiated model object;

[0098] Step 3: Use the InstancedBufferGeometry class to create the geometry of the instanced model; this class takes the original model geometry as a parameter and provides buffer data of instance attributes for each instance;

[0099] Step 4: Create an InstancedMesh object and pass the instanced geometry and instanced model objects as parameters to the InstancedMesh constructor.

[0100] In the process of 3D real-time rendering, it goes through varnish, light transmission, volume and order-independent translucent mixing steps successively, and performs translucent mixing depth test in the order-independent translucent mixing step. The mixing step can be ended only after passing the translucent mixing depth test, so that the translucent objects can achieve the effect of depth mixing. In addition, through the set performance optimization steps, WebAssembly modules and scripts are cached locally to speed up loading after the first access. The ktx texture compression workflow and map conversion to ktx improve the scene performance; GPU instancing renders the same mesh at each drawing call, and each instance has different parameters to increase changes and reduce repetition in appearance, thereby optimizing the performance of the 3D design system.

[0101] In addition, it should be understood that although the present specification is described according to implementation modes, not every implementation mode contains only one independent technical solution. This description of the specification is only for the sake of clarity. Those skilled in the art should regard the specification as a whole. The technical solutions in each embodiment may also be appropriately combined to form other implementation modes that can be understood by those skilled in the art.

Claims

1. A 3D design system based on Realibox engine, characterized in that: The following steps are involved: Step 1: 3D real-time rendering, standard effects use physically based rendering to achieve realistic and seamless rendering results across different environments; Step 2: Performance optimization, optimize rendering performance; Step 3: Data storage and backup, storage and backup of rendering data; The 3D real-time rendering includes: Step 1: Varnish; Step 2: Light transmission; Step 3: Volume; Step 4: Order-independent translucent blending; The varnishing step is specifically as follows: Based on the isotropic GGX distribution and microfacet BRDF roughness, the surface of the varnish material object is divided into two parts, one of which is ClearCoatLayer and the other is BaseLayer. When a beam of light is incident on the surface, part of the light is directly reflected as ClearCoat highlights, and the other part enters BaseLayer and is divided into diffuse reflection and GGX highlights for reflection. The light transmission step is specifically as follows: Add specular_btdf to the core BRDF using transmission; The volume step is specifically as follows: Rendering of various objects and corresponding top-down slices through the scene. Solid lines represent meshes, grey areas represent volumes, thin-walled materials are applied to open and closed meshes, dashed lines represent imaginary boundaries of infinitely thin volumes, and volumetric materials are applied to closed meshes, creating a volumetric effect of refraction. The order-independent semi-transparent mixing steps are specifically: Over is stacked from back to front, while under is stacked from front to back. There are three layers of CBA from near to far Over operation: first superimpose ab, then superimpose with c; Under operation: first superimpose bc, then superimpose with a; Perform the under operation on the semi-transparent objects layer by layer from front to back, so that all the semi-transparent objects to be rendered are mixed into one layer, and finally perform the over operation with the opaque objects at the bottom layer; The steps of the translucent mixed depth test are as follows: Step 1: Perform depth testing on all objects in an unordered manner and write the depth of the nearest fragment into the z-buffer; Step 2: Traverse the semi-transparent objects in an unordered manner, compare the depth of the fragment with the depth of the z-buffer, and if they are the same, execute under the color-buffer with the color-buffer. When executing for the first time, just write it directly into the color-buffer, and write the transparency of the semi-transparent fragment into the a-buffer, and mark the depth of the fragment as a specific value, indicating that this layer is peeled off; Step 3: Same as step 1, traverse all objects in an unordered manner to perform depth testing, and write the depth of the nearest fragment into the z-buffer; Step 4: Traverse the semi-transparent objects in an unordered manner, compare the depth of the fragment with the depth of the z-buffer, if they are the same, perform under on the color-buffer and write the mixed color and transparency into the color-buffer and a-buffer, and mark the depth of the fragment as a specific value, indicating that this layer is peeled off; Step 5: Repeat Step 3 to Step 4, and terminate when any of the following conditions is met; 1. When traversing a translucent object, the depth of all fragments is not equal to the z-buffer, which means that an opaque object is encountered; 2. Since the transparency in a-buffer increases and approaches 1 after each under, the value in a-buffer is always greater than the threshold; 3. Repeat a fixed number of times; Step 6: Blend the opaque and translucent layers; traverse the opaque objects to perform depth testing, and perform an over operation on the color of the nearest opaque object and the current color-buffer.

2. A 3D design system based on Realibox engine according to claim 1, characterized in that: The performance optimization comprises the following steps: Step 1: Cache WebAssembly modules and scripts locally to speed up loading after the first visit; Step 2: ktx texture compression, ktx texture compression workflow and map conversion to ktx to improve scene performance; Step 3: Model Instancing, GPU instancing renders the same mesh on each draw call, with each instance having different parameters to increase variation and reduce repetition in appearance.

3. A 3D design system based on Realibox engine according to claim 2, characterized in that: The model instantiation includes the following steps: Step 1: Create the model object and instance quantity to be instantiated; Step 2: Create an instantiated model object and add the model as a property of the Geomery object to the instantiated model object; Step 3: Use the InstancedBufferGeometry class to create the geometry of the instanced model; this class takes the original model geometry as a parameter and provides buffer data of instance attributes for each instance; Step 4: Create an InstancedMesh object and pass the instanced geometry and instanced model objects as parameters to the InstancedMesh constructor.

Images