基本形式

浏览器的可视化形式及性能比较：

形式 传统dom绘制 canvas svg webgl
影响因素 绘制图形数量和大小 绘制图形数量和大小
1. 渲染次数draw call
很多图形可以批量渲染，以及其它优化手段可以降低dc
2. 着色器执行的次数，
3. 着色器运算的复杂度
结果 r10只要不超过 500 个都可以达到 60fps，1000 个左右其实也能达到 50fps，就算要绘制大约 3000 个图形，也能够保持在可以接受的 24fps 以上
3000左右元素是一般电脑极限		 r10，30000个合批渲染帧率仍能达到60
r200，3000个左右仍能保持30fps以上，相比于canvas还是有5x+的性能提升
比较 说实话不怎么样 比canvas要慢一些
元素数量的影响更大		 最快
浏览器自然优化
硬件特性 利用了gpu的并行性

该例子是每帧在画布上随机位置渲染随机颜色、特定大小、若干数量小球，看帧率情况。
ref：
说实话，相比于游戏引擎等级的渲染，浏览器端环境依然是弟弟。
游戏引擎和电影工业等级的渲染技术，在浏览器确实是降维打击。
浏览器端的渲染api还是在操作系统的层级之上，相比原生还有更大的层次损失。

svg

path

svg的绘画路径取决于svg元素的d属性：

基础

颜色

颜色的表示方式包括但不限于：

  1. rgb
    实际上rgb对用户并不是很友好，尤其是涉及到渐变和补间的时候。
    调整有很多，比如gamma修正
  2. hsv
    通过色相、饱和度、亮度三个维度来表示颜色，通过转换算法可以和rgb一一对应

    3D

    Three.js

    基本使用需要nodejs加载web服务器，不然很多资源加载模块都不能正常工作。

    文字渲染

    首先读取字体.typeface.json文件
    1. fontLoader.load('font.typeface.json', function ( font ) {
    2.  fontRes = font;
    3. });
    然后通过THREE.TextGeometry("Learning Three.js", options)新建text对象，然后加入进去
    将文字保存为图片格式，再将其当作一张蒙皮材质，贴到某个物体上

    3D基础知识

    欧拉角与四元数

    欧拉角也可以用于表示三维空间物体的旋转。
    但是会出现万象死锁的现象。
    点击查看【bilibili】
    3B1B的视频以一种投影的方式讲了四元数是怎样的。
    如果将二维的单位圆投影到一维直线，

    渲染管线

    点击查看【bilibili】

    shader

    点击查看【bilibili】

    法线贴图

    点击查看【bilibili】

是一种通过RGB贴图，给一个平面材质，在不加顶点的情况下，附加凹凸感的功能：
贴图的RGB值映射到像素点法向的xyz分量，0~255映射到-1~1。
自己看一张图，法向的正方向：x正方向是图右侧，y正方向是图上侧，z正方向是指向你的方向
详情见文章：
免费法线贴图转换：https://cpetry.github.io/NormalMap-Online/