Three.js顶点颜色数据插值计算_three.js在hsl空间中插值顶点颜色

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
每个顶点设置一种颜色

你可以在上节课代码更改为下面代码设置，你可以看到几何体的六个顶点分别渲染为几何体设置的顶点颜色数据。
var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象
//类型数组创建顶点位置position数据
var vertices = new Float32Array([
  0, 0, 0, //顶点1坐标
  50, 0, 0, //顶点2坐标
  0, 100, 0, //顶点3坐标
  0, 0, 10, //顶点4坐标
  0, 0, 100, //顶点5坐标
  50, 0, 10, //顶点6坐标
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标
// 设置几何体attributes属性的位置position属性
geometry.attributes.position = attribue;
//类型数组创建顶点颜色color数据
var colors = new Float32Array([
  1, 0, 0, //顶点1颜色
  0, 1, 0, //顶点2颜色
  0, 0, 1, //顶点3颜色
  1, 1, 0, //顶点4颜色
  0, 1, 1, //顶点5颜色
  1, 0, 1, //顶点6颜色
]);
// 设置几何体attributes属性的颜色color属性
geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB
//材质对象
var material = new THREE.PointsMaterial({
  // 使用顶点颜色数据渲染模型，不需要再定义color属性
  // color: 0xff0000,
  vertexColors: THREE.VertexColors, //以顶点颜色为准
  size: 10.0 //点对象像素尺寸
});
// 点渲染模式  点模型对象Points
var points = new THREE.Points(geometry, material); //点模型对象
scene.add(points); //点对象添加到场景
材质属性.vertexColors
 
你可以看到上面案例的材质代码和前面稍有不同，原来是通过材质的颜色属性color设置模型颜色，而本案例并没有这样设置，而是设置了材质属性.vertexColors。 
var material = new THREE.PointsMaterial({
  // 使用顶点颜色数据渲染模型，不需要再定义color属性
  // color: 0xff0000,
  vertexColors: THREE.VertexColors, //以顶点颜色为准
  size: 10.0 //点对象像素尺寸
});
关于材质的属性.vertexColors可以查看Material文档介绍，属性.vertexColors的默认值是THREE.NoColors，这也就是说模型的颜色渲染效果取决于材质属性.color，如果把材质属性.vertexColors的值设置为THREE.VertexColors,threejs渲染模型的时候就会使用几何体的顶点颜色数据geometry.attributes.color。 
属性缓冲区对象BufferAttribute
 
Threejs提供的接口BufferAttribute目的是为了创建各种各样顶点数据，比如顶点颜色数据，顶点位置数据，然后作为几何体BufferGeometry的顶点位置坐标属性BufferGeometry.attributes.position、顶点颜色属性BufferGeometry.attributes.color的值。 
缓冲类型几何体BufferGeometry除了顶点位置、顶点颜色属性之外还有其他顶点属性，后面课程都会讲解到。关于BufferGeometry更多属性和方法可以查看文档BufferGeometry。 
如果你把几何体作为网格模型Mesh或者线模型Line构造函数的参数，你会发现渲染出渐变的彩色效果。 
之所以出现渐变是因为Threejs通过底层WebGL进行渲染的时候会对顶点的颜色数据进行插值计算。颜色插值计算简单点说，比如一条直线的端点1设置为红色，端点2设置为蓝色，整条直线就会呈现出从点1到红色点2的蓝色颜色渐变，对于网格模型Mesh而言，就是三角形的三个顶点分别设置一个颜色，三角形内部的区域像素会根据三个顶点的颜色进行插值计算。 
插值计算示意图 
                    顶点颜色数据插值计算本文是Three.js电子书的2.2节上节课自定义几何体给大家介绍了一个顶点位置坐标概念，本节课给大家介绍一个新的几何体顶点概念，就是几何体顶点颜色。通常几何体顶点位置坐标数据和几何体顶点颜色数据都是一一对应的，比如顶点1有一个顶点位置坐标数据，也有一个顶点颜色数据，顶点2同样也有一个顶点位置坐标数据，也有一个顶点颜色数据…每个顶点设置一种颜色你可以在上节课代码更改...
				总序材质和几何体构成网格，决定几何体是否像金属，透明与否，已经是否显示成线框。
MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框
MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体
MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体
材质的共有属性材质虽然可能有不同的分类，但是都是材质啊，还是有共
直线模型对象
两个顶点确定一条直线，构造函数THREE.Vector3()可以用来创建一个顶点位置，下面代码中Vector3(10,0,0)表示三维笛卡尔坐标系中顶点坐标(10,0,0), vertices是几何体对象的顶点坐标属性，从Javascript语言的角度看vertices是数组对象，push()是Javascript语言支持的方法， 用于给数组增加元素。
				颜色插值指的是给出两个 RGB 颜色值，两个颜色之间的值通过插值函数计算得到。线性渐变是添加到 SVG 图形上的过滤器，只需给出两端的颜色值即可。1. 颜色插值在【高级 - 第 5.0 章】里已经提到了颜色插值，在这里做一个例子。先定义颜色插值函数如下，var a = d3.rgb(255,0,0);	//红色
var b = d3.rgb(0,255,0);	//绿色
var compu...
				通过canvas可以协助我们做很多颜色计算的辅助，比如颜色转换，渐变颜色计算。
对于颜色转换，之前写过一篇文章：《通过canvas转换颜色为RGBA格式及性能问题》
, 读者可以查阅该篇文章来了解。
本文着重讲解渐变计算颜色的插值计算。
计算任意两个颜色的插值
实际应用中通常要计算两个颜色的之间插值结果，比如计算“red”和“green” 之间的插值。 比较通用的方法就是首先通过《通过canvas转换颜色为RGBA格式及性能问题》中提到的方法把颜色转换成RGBA格式，由于RGBA格式是都是数字的形式，可以直
  bayer数据是包含rgb的一维矩阵数据，因此对于每个像素点而言，需要用周围像素点插值得到其他两个通道的值。
  一般由于绿色分量较好，会优先插值r/b点的绿色分量，然后插值g点的r/b分量。
2 汉密尔顿插值算法有何优势？
  汉密尔顿插值算法通过同色一阶梯度和异色二阶差分，考虑了插值的方向判断，并用了颜色插值的方法减少轮廓边缘的色差。
3 汉密尔顿插值算法有何劣势？
  毕竟1997年的算法，首先该算法对于密集纹理区的方向判断效果不佳，其次插值...
        var geometry = new THREE.Geometry();
         * vertexColors: false 关闭使用点颜色来生成线的颜色，这个值默认是false，如果设置为true，那么后面设置的color将不起作用
         * ...
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="js/three.js"></script>
</head>
<script>
上周学习shader遇到了一个小问题，希望可以帮助有同样困惑的同学，也对自己的学习进行一个记录。
最近几个月一直在断断续续学习Unity的shader相关知识，希望通过冯乐乐女神的《unityshader入门精要》入个门，不过工作时间比较紧张，只能在周末有一点进度。
上周末学到第十三章的全局雾效的时候，遇到了一个怎么也想不通的问题：
生成全局雾效时需要对每个像素的位置进行世界坐标重建，为了重建世界坐标，又需要获得每个像素相对于摄像机的一条射线，完整公式如下：
worldPo
				👼学习本节课的重点是建立顶点的概念。如果你建立了顶点的概念，那么对于你深入理解学习 Three.js 很有帮助。类型化数组😋可以直接调用 BoxGeometry 直接创建一个立方体几何体，调用 SphereGeometry 创建一个球体几何体。
下面代码通过 Threejs 引擎的BufferGeometry和BufferAttribute两个 API 自定义了一个具有六个顶点数据的几何体。
三个点为一组渲染出三角形
可以把上面的点连接起来
一个立方体网格模型，有 6 个面，每个面至少两个三角形拼成一个..
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色区域中间的值获取</title>
    <style>
        .div{
				要显示`THREE.Line`的每个顶点的不同颜色，可以使用`THREE.BufferGeometry`和`THREE.LineBasicMaterial`，并将颜色数据传递给几何体的`color`属性。以下是一个简单的例子：
```javascript
// 创建一个包含顶点坐标和颜色的数组
var positions = [
  0, 0, 0, 1, 0, 0,
  1, 1, 1, 0, 1, 0,
  2, 2, 2, 0, 0, 1
// 创建一个几何体并将顶点坐标数组传入
var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
// 将颜色数据传递给几何体的color属性（每个顶点对应一个颜色）
geometry.addAttribute('color', new THREE.Float32BufferAttribute([
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
], 3));
// 创建一个材质
var material = new THREE.LineBasicMaterial({vertexColors: THREE.VertexColors});
// 创建一个线对象并将几何体和材质传入
var line = new THREE.Line(geometry, material);
// 将线对象添加到场景中
scene.add(line);
在这个例子中，我们创建了一个包含3个顶点的数组，并将它们传入一个`THREE.BufferGeometry`。接着，我们将颜色数据传递给几何体的`color`属性，并使用`THREE.LineBasicMaterial`创建一个材质，并设置`vertexColors`为`THREE.VertexColors`。最后，我们创建了一个`THREE.Line`对象并将几何体和材质传入。最终，我们将线对象添加到场景中。
每个顶点设置一种颜色

材质属性`.vertexColors`

属性缓冲区对象`BufferAttribute`
