Ziroom 3D Design System 1.0
About The Project
The 3D component system, as part of Ziroom's graphic assets, is a team production tool developed in response to the demand for higher quality and efficiency in business growth. The direction of development was determined through the study of people of interest and user profile analysis, etc., and the development of the generic components - Ziroom's product and character components was carried out, which was synchronized to be compatible with the four types of renderers by normalizing the parameters, and the processing of the 3D requirements was completed quickly by the pre-rendering mode, while the 3D designers were able to carry out a richer expansion through the component library to improve the efficiency of the team's collaboration.
Ziroom 3D component system has a basic sandbox worldview, which retains the high degree of product reproduction and recognition, and at the same time increases the real-life texture. The whole system consists of two parts: the general component and the character component. In the development of the general component, we complete the modeling/material/lighting setting and encapsulation through a series of design specifications; in the part of the character component, we complete the setting and standardization of the basic character image through the study of the user's portrait, combined with the image of the two-dimensional illustration, and derive the application of the component such as the expression.
· Examples of major styles
Background
Why.How.Who.
We analyzed the project stakeholders (designers/users/business people/enterprises/brands, etc.) and the corresponding user profiles, and evaluated the important aspects of the 3D design process in terms of branding, growth, efficiency, competitiveness, and other dimensions, which helped us to clarify the design goals and the people we serve, as well as the form in which we can reach the instrumental attributes of the 3D component system.
Research & Testing
World view setting
In the early stages of development, we defined the world view of the system, which is a sandbox world composed of a variety of basic elements. We hope that the components can meet various visual needs such as operation/experience, and be different from physical products, so that the space has the texture and affinity of toys, while retaining the details of quality of life, just like the concentration of real life moments.
Style testing
Early definition of style through the autonomous perception of team members is used to create more possibilities.
Lighting
By using Python in Xpresso to generate an orthogonal parameter picture matrix, a simple test prototype is built. Through multi-person experiments, the ideal results that meet the needs of the group are quickly obtained, and the parameters corresponding to the results are used as the basic principles of lighting. At the same time, common lighting patterns are also preset, as well as matching camera position presets.
Proportions
Sandbox game
The proportions of each component are strictly controlled so that they can be freely combined and stacked in the scene, similar to a sandbox game.
Rendering
Materials
A single scene contains a large number of different types of materials. We divide the materials into three categories: basic/cloth/advanced to meet different needs: use basic materials to quickly color, use cloth to add a soft life texture to the scene, and use advanced The material is rich in detail. We have formulated specifications for these materials to unify parameters and ensure consistent output effects. Designers can also modify/expand based on the materials in the library to ensure that the material library can continue to be enriched.
Pre-Render
Efficient pre-rendering mechanism
In order to help non-3D designers to utilize 3D graphic resources, we have developed a pre-rendering mechanism, i.e., by rendering and reconstructing the elements in the scene individually, reassembling them into a completed scene and being able to be edited in graphic software; and ensuring a certain degree of mobility through the special lighting and materials in the specification, so that the graphic designers can make use of these basic product scenes to assist them in completing the design and save time while obtaining a visual style different from that of the illustration.
System Assets
Common Components
The general component part of the 3D component system 1.0 contains the whole series of product components of Youjia/XInshe，each product scene contains bedding/decorative objects/plants/home furnishings components corresponding to the product styles, and each component can be edited independently; in order to have a better display effect and usability expansion, we build an independent Stage for each product, so that the content in the whole product space can be fully displayed and the unity between different scenes can be guaranteed. The entire product space can be fully displayed, and ensure the unity of different scenes.
System Assets
Characters
Our 3D character image is developed based on the 2D illustration draft, using standard octagonal modeling and convex facial features to ensure that the character is more stable when dynamic. The current component library contains basic images of Ziroomke/owner/housekeeper and service staff. Through bone binding, designers can freely create the required dynamics or animations.
Usage
Controller and Gyroscope
Combined with the characteristics of 3D graphics, Three.JS technology is used to provide interactive and dynamic visuals, which can amplify the communication efficiency of products and content.
