WebGL学习笔记之颜色取值

在上文《WebGL学习笔记之认识WebGL上下文》里介绍了画一个长方形，可能你会发现绘制颜色的时候和普通的RGB或者RGBA不一样，全是0啊1啊之类的，这是怎么回事？

WebGL的颜色表示

传统的前端开发使用的RBG颜色都是0-255的取值，但WebGL不一样，为啥？因为“遗传”。WebGL他爹OpenGL就是这样的，颜色分量取0-1。所以一个通常的WebGL颜色表示是这样的：

 gl.clearColor(0, 1, 0, 1);

Green分量取值为1，所以是绿色。

转换方法

怎样把CSS的颜色转成WebGL的颜色？也很简单:

1. 将css的rgba用正则获取出四个参数
2. 将三个颜色除以255，透明度不用变

在线工具

https://airtightinteractive.com/util/hex-to-glsl/

分享几个工具函数（十六进制转WebGL颜色）

function glToHex(glslStr) {
  glslStr = glslStr.replace('vec3(', '');
  glslStr = glslStr.replace(')', '');
  let arr = glslStr.split(',').map(Number);
  for (let val of arr) {
    if (val > 1 || val < 0) {
      return '';
    }
  }
  let col = new Color().fromArray(arr);
  return `#${col.getHexString()}`;
}

function hexToGL(hexStr) {
  console.log('hexToGL');
  //check if valid hex value
  if (/^#([0-9A-F]{3}){1,2}$/i.test(hexStr)) {
    let col = new Color(hexStr);
    let out = col.toArray().map((x) => {
      //to fixed 3
      let conv = Math.round(x * 1000) / 1000;
      //append missing periods
      if (conv.toString().indexOf('.') === -1) conv += '.';
      return conv;
    });
    return `vec3(${out})`;
  } else {
    return '';
  }
}

Web 3D GIS 之WebGL全部教程

全部文章见这里：新手的 Web 3D GIS 学习笔记之WebGL篇