Raster Layer 迁移到 Device API

[lzxue]

[English Template / 英文模板]

🤔 这个变动的性质是？

• 新特性提交
• 日常 bug 修复
• 站点、文档改进
• 演示代码改进
• 组件样式/交互改进
• TypeScript 定义更新
• 包体积优化
• 性能优化
• 功能增强
• 国际化改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 工作流程
• 版本更新
• 其他改动（是关于什么的改动？）

🔗 相关 Issue

#2144

💡 需求背景和解决方案

📝 更新日志

语言	更新描述
🇺🇸 英文
🇨🇳 中文

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• Changelog 已提供或无须提供

---

[lzxue]

TODO

• Raster 浮点数据纹理
• Raster RGB 浮点数纹理

纹理可能有bug @xiaoiver

[xiaoiver]

调用 setImageData 设置纹理数据时：

WebGL1 报错：

Failed to execute 'texImage2D' on 'WebGLRenderingContext': Overload resolution failed.

WebGL2 报错：

WebGL: INVALID_OPERATION: texImage2D: no bound PIXEL_UNPACK_BUFFER

[xiaoiver]

更新 @antv/g-device-api 到 1.4.6

rastersingleband 在 WebGL 1 / 2 下均已验证。

之前关于 Luminance 的用法存在一些问题。LUMINANCE 对应 type 应为 UNSIGNED_BYTE 而非 FLOAT，这样在 Shader 中拿到的才是 [0, 255] 之间的值。可参考：https://webglfundamentals.org/webgl/lessons/webgl-data-textures.html

this.texture = createTexture2D({
  data: new Uint8Array(data),
  width,
  height,
  format: gl.LUMINANCE,
  type: gl.UNSIGNED_BYTE, // 不应该传 gl.FLOAT
  alignment: 1, // 每次读取一个值
});

mask 需要在另外的 PR 中实现。

[xiaoiver]

WebGL 2 下 multiband 例子还有点问题，报错信息如下：

[.WebGL-0x138004fc400] GL_INVALID_OPERATION: Invalid internal format 0x1907.

[xiaoiver]

raster rgb 已修复，更新 @antv/g-device-api 到 1.4.7 即可：
https://github.com/antvis/g-device-api/releases/tag/1.4.7

相关 ISSUE：antvis/g-device-api#102