未加星标

Attempt of making a virtual DOM for Three.js

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

This is a recap of my experimental project Quatrefoil. I want to share ideas in trying to make myself a virtual DOM based framework for Three.js. It’s not really a framework people may use. But I think the informations I got is useful if we want to explore 3D apps in the future.

Quamolit/quatrefoil

quatrefoil - Render Three.js with Respo style code(experimental). github.com

A bitHistory

Almost a year ago, I built 2 libraries based on ClojureScript. The 2 years before that I spent quite a lot time writing an app in React, which made me believe I should pick ClojureScript as my primary language.

Respo : virtual DOM based MVC library like React Quamolit : Respo rendered to Canvas with animations

Since Canvas APIs is slow comparing to WebGL APIs, I though about using Three.js as a backend and made a little experiment. I didn’t finish the demo called Quatrefoil. Recently I did some refactoring work on Respo and though maybe I can finish Quatrefoil now.

Features tooffer

When I look at the Three.js examples, they like Web development in the old days. I guess really world apps would have more mature components in architecture. Maybe we can also try React-like solution for WebGL.

I know someone tried WebGL in React, I just don’t know the details. Anyway when I’m talking about that, I’m talking about these features:

Declarative virtual DOM writing State management like React Animation state defined in a Component

For declarative programming, you may already known. Virtual DOM is a great solution to decouple the business code and the renderer backend. It also make development easy by introducing hot code swapping. We all like that.

And for state management, as our apps grow, it’s always a piece we need. Nowadays people are familiar with the concepts of global store and component level states, as well as uni-directional data flow, which starts from the database and ends in screen pixels. There might be other ways, I just believe it’s the nearest one we can get.

For animations, it’s almost a state management problem. The main difference is the state changes of animations is triggered by time and user actions, unlike component state changes which is only triggered by use actions. I want the power of defining animations just like writing a component. So such feature is built inside Quatrefoil.

One more thing is persistent data structure, which is essential to uni-directional data flow and optimizations of component tree rendering. I’m not repeating the details here.

Animation State

In React, animation is mostly handled in CSS. Well, I believe that’s wrong, it’s not obeying MVC patterns, where’s the animation state stored? In React Native projects, I see animation states stored in component state. That might better. I think we can do more, because animation state is like a loop and can be triggered frequently by time. So I use another state called instants to store it.

As I explained in Respo, component states is in a tree rather than in each components. The benefit is we can reuse the shouldComponentUpdate solution here to reduce duplicated computations by comparing the reference of collections or values. Now for an app there are 3 global states: Store, States, Instants. They consist the ‘M’ in MVC.

However implementing Instants is very tricky since the animations may trigger itself of an another animation. I can’t describe it with only text. Luckily the underneath theory of animations is still state machine manipulated by time, so there must be a way out.

Problems

There are also other difficulties in making it really work, for example:

Geometry is hard to patch No group-level opacity, scaling Not pure enough Performance

Object3D elements are not like DOM, they need to geometries, which is most easy to modify at runtime, at least not as easy as DOM APIs. I’m still need to learn Three.js to see if that works well.

And to build apps, CSS is still cool. I can mark a whole component with opacity 0.5 to create a fade-out. We need similar features in Three.js to make it easier.

Also in my codebase, there are drawbacks too. Virtual DOM based solution is relatively slow comes with its flexibilities. I don’t think this LUC optimization is enough. Also the side-effects inside rendering process makes me worried. There’s still a lot areas to explore.

Conclusion

I’m happy that my prototype is working. I made a playlist on Youtube to explain Quatrefoil. You may check it out:

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: ReactWebGLClojureCSSReact NativeUC
分页:12
转载请注明
本文标题:Attempt of making a virtual DOM for Three.js
本站链接:http://www.codesec.net/view/529867.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(20)