Hi, everyone, I am a sweeping monk, a product manager who knows a little technology and a little design. At present, I am in charge of UU errand – efficiency project.

It is my honor to be invited by Oasis team of Ant Group to share the topic of “Improving the Output Efficiency of Art to the front End”. During this trip, I gained a lot and got to know many industry leaders. Meanwhile, MY future development plan became more firm and clear.

Too excited to write a summary 🤡…

The reason

At the end of last year, I received a project to make an application in the form of web games. The purpose is to enable people to participate in the company’s cultural activities through mini-games. The research and development period is about 2 weeks. At that time, my team did not have graphic design and game development, and the DDDD graphics front end was quite different from the Web front end. Have been thinking about how to quickly apply the capabilities of the game engine to keep developers focused on the business.

I had no resources but to learn and do it again with the team, so I understood all the concepts and architectures related to graphics. Download Blender, C4D, various model libraries, buy a bunch of tutorials and follow along with some simple skeletons, motion effects, shadows, textures, textures. Of course, I want to focus on ROI. Therefore, we have been looking for a quick model to solve the business within a limited time. In the end, we managed to find a solution and overcome the technical difficulties, which led to this invitation.

My share

All the big guys and my PPT have download link: This way please.

In order to make the application of light game mode, I chose Oasis Engine with “mobile terminal first and friendly front end” after some research. Alipay Wufu is also produced by Oasis Engine.

At the beginning, we also encountered the problem of reducibility. In order to achieve a high reducibility standard in a short period of time, we chose the way of baking tiles, and to some extent, we achieved the extreme.

Here’s what we did based on baking. Can’t play the video?

Although baking can solve the restore problem, the whole process is time-consuming, and secondary tuning of PS has a lot of time and communication costs. After 1.0 we sorted out some problems.

So through what kind of way to improve the art to the front end efficiency? Make an editor? Or a plug-in for modeling software? We also had in-depth thinking and discussion within the team.

We use a real-time rendering solution, and the users of the service are not only technology, but also UI, interaction designers, etc. Through the program to reduce the technical threshold as much as possible, to achieve the goal of rapid output. On the output side are snippets or urls that are easy to use on the Web front end. Our internal code name is 3DTuning- Tuning the third brother.

Left is the model library, you can also upload yourself. Part parts are components of a single model, supporting selection and customization of materials.

In the middle is the engine real-time rendering area, only support preview, drag and drop, here does not involve the function of the editor, because the editor is a huge amount of engineering, no energy.

The scene and material are on the right side. The material part mainly supports uploading and preview. It is worth mentioning that we made some preset interaction scripts that can be used directly.

  /** Select the component logic */
  const handleObj = (obj: { component: MeshRenderer; mesh? : any }) = > {
    const { component, mesh } = obj;
      (
        component.entity.getComponent(Twinkle) ||
        component.entity.addComponent(Twinkle)
      ).start();
      this.engine.dispatch(IO.PICK_PART, {
        name: component.entity.name,
        index: this.renderers_in_modelGltf.indexOf(component),
      });
  };

// Preset microinteractive script mouse-over broadcast animation
class Action4 extends Script {
  constructor(entity: Entity) {
    super(entity);
    document
      .querySelector("#"+ canvasDomId) ? .addEventListener("mouseover".this.onmouseover);
    document
      .querySelector("#"+ canvasDomId) ? .addEventListener("mouseout".this.onmouseout);
  }
  private onmouseover() {
    let { animations } = modelGltf;
    const animator = modelGltf.defaultSceneRoot.getComponent(Animator);
    if(animations && animations? .length >0&& animator) { animations? .forEach((clip: AnimationClip, index) = > {
        animator.speed = 1;
      });
    }
  }
  private onmouseout() {
    let { animations } = modelGltf;
    constanimator = modelGltf.defaultSceneRoot.getComponent(Animator); animations? .forEach((clip: AnimationClip, index) = > {
      animator.speed = 0;
    });
  }
  onDestroy(): void {
    document
      .querySelector("#"+ canvasDomId) ? .removeEventListener("mouseover".this.onmouseover);
    document
      .querySelector("#"+ canvasDomId) ? .removeEventListener("mouseout".this.onmouseout);
    this.onmouseover(); }}Copy the code

Property configuration is demonstrated in detail here. We can see our positioning more clearly through the figure below. Modeling software is still focused on the design of the model, but the tuning process has been moved into a tuning workbench that is easier to preview and collaborate with.

Some optimization has also been made for the collaboration process, and the overall advantages of the presentation are clearer.

After the optimization of the above scheme, our output efficiency has been greatly improved. Collaboration and communication costs are much lower, and everything from r&d to UI can be picked up quickly. It is worth mentioning that the effect of real-time rendering has also reached the extreme.

As we become more efficient, we will have more energy to design models. So in 2.0 we made a big change and expanded the scenes a lot.

In addition to this project, our design capabilities in the business have been greatly improved.

In the future, we hope to continue to improve the 3D tuning platform based on Web3D, adding more preset materials and cases. Will also start to organize the project, open source into the community.

conclusion

Compared to other big guys, my project is a little bit less deep and broad. After listening to their sharing on the spot, I feel that my brain is going to explode and too much knowledge is pouring in. Up to now, still thinking and absorbing…

After this time, I got acquainted with many leaders such as Roast Goose, Chen Mo, engine architect, Shang Shu, master of Royal Institute of Technology, Tong Lun, Doctor of Mathematics of Peking University, and Zhou Zexin, etc., I realized the importance of learning and exploring the underlying technology. You couldn’t see the wood for the trees. In the future, we should pay attention to the forging of this aspect.

Previous articles:

  • “Necessary for Dachang front End in 2022, the strongest Vue3+Vite2 template out of the box”
  • What front-end technologies will Be Hot in 2022?
  • 9 years of R&D experience, Sweeping monk shows you the future development trend of the front end in 2022
  • How to be a Good Big Front End Leader in 2022

Fan community:

  • Can pay attention to the public account “sweeping the floor blind monk”, reply to add group
  • Sweeping the blind Monk kindergarten group 1 and 2 have stopped enrollment (full), 3 groups ing
  • No talk about technology, no classes, no teaching, paddling fish in the growth
  • Irregular white piao welfare water, red packets more