Virtual DOM在3D渲染中的应用 类ReactJS库的实现及3D应用 黄勇 DOMWebGL 黄勇 20062012: 武汉大学 5年前端开发经验 2016年8月加入酷家乐，花名佚名 HTML5工具前端负责人 设计并实现HTML5版本的家装设计工具 普通的3D程序 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( color: var cube = new THREE.Mesh( geometry, material ); / scene.add( cube ); / add camera.position.z = 5; var animate = function () requestAnimationFrame( animate ); cube.rotation.x += 0.1; / update cube.rotation.y += 0.1; renderer.render(scene, camera); ; 不便之处 命令式：手动的创建、添加和更新 组合性差 ReactJS 声明式 良好的可组合性 DOMWebGL ReactJS？ render()只能返回一个节点 多renderer不能共存 用来包裹自定义组件？ ReactJS？ With React: 30FPSWithout React: 60FPS 我们的解决方案 vdom + threejs 我们的解决方案 vdom + threejs 类ReactJS的实现vdom create, diff, patch 类ReactJS的实现vdom 类ReactJS的实现vdom 类ReactJS的实现vdom 类ReactJS的实现vdom 我们的解决方案 vdom + threejs 副作用 ThreeComponent DOMWebGL 回顾 使用virtual dom来描述视图结构 利用组件的副作用修改threejs对象，驱动WebGL 2D！ 使用virtual dom来描述视图结构 利用组件的副作用修改pixijs对象，驱动2D Canvas PixiComponent DOMWebGLCanvas 总结 Virtual DOM库的原理及实现 vdom + threejs vdom + pixijs 全局统一的编程体验