麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

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篇

相关阅读

麻辣GIS-Sailor

作者:

GIS爱好者,学GIS,更爱玩GIS。

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

手机阅读
公众号关注
B站关注
手机阅读
麻辣GIS微信公众号关注
最新GIS干货
麻辣GIS小破B站
有趣的技术视频
没有下文

留言板(小编看到第一时间回复)