分类 front-end 中的文章

深入学习Three.js核心对象之(三)Material

分析构成模型对象的另一个重要元素:Material(材质)。

主要介绍:

  • Material的属性及WebGLRenderer的处理: 属性分类、预处理宏与自定义标记
  • 部分属性解读(Todo): 融合属性、深度测试、模板测试、裁剪、多边形偏移等
……

阅读全文

深入学习Three.js核心对象之(二)Geometry

分析构成模型对象的重要元素之一:Geometry(几何体)。

主要介绍:

  • Geometry的属性: 基础属性与动画属性
  • Geometry的方法: 基础变换、Mesh与顶点合并、点面法线、包围盒/球计算
  • BufferGeometry 与 DirectGeometry(Todo)
……

阅读全文

深入学习Three.js核心对象之(一)Object3D

从底层对象开始,看看Threejs如果利用图形学知识,通过各种数据对象构建场景,最终通过渲染器绘制出来。

先来看看最基础的Object3D对象,内容包含:

  • 官方demo引入: 主要对象分析
  • Object3D的属性: 位置、欧拉角、四元数、变换矩阵等
  • Object3D的变换: 以世界空间或模型空间为参考系的基础变换
……

阅读全文

Canvas2D渲染库简析:(三)Pixi

fabric和konva主要是用于实现编辑器的场景,而Pixi则是一个高性能2D动画渲染库,通常用于一些H5的小游戏或可交互页面。

本次通过以下几个方面来对其进行分析:

  • WebGL与Canvas渲染器
  • 资源加载器与纹理
  • 场景、精灵与图形对象
  • 变换、交互及动画处理
……

阅读全文

Canvas2D渲染库简析:(二)Konva

与古老的Fabric相比,Konva的使用更为便捷,性能更加优益,这些得益于其内部的种种设计,本次通过以下几个方面来对其进行分析:

  • 基础元素及上下文的扩展
  • 图形变换处理(变换计算及独立的图形控制器)
  • 光标交互处理(基于像素的目标检测)
  • 层级渲染处理
……

阅读全文

Canvas2D渲染库简析:(一)Fabric

了解Canvas2D渲染功能实现与设计,在使用时知其所以然,在创造时有所借鉴。从以下这四个方面来分析Fabric.js

  • 对象模型处理(使用及设计实现)
  • 图形变换处理(canvas与object变换)
  • 光标交互处理(目标检测事件处理)
  • 画布与对象渲染处理(多层结构多阶段绘制)
……

阅读全文