Html5 canvas 在webgl中使用浮点图层合成图像

我尝试在浏览器中渲染图像，其构建方式如下：

一组矩形每个都填充有径向梯度（理想情况下为高斯梯度），但可以用几个停止点近似 每个矩形在放置到绘图区域之前都会进行旋转和平移

通过将矩形的所有强度求和并裁剪到绘图区域的尺寸，可以展平图像

对强度进行重新缩放，使最高强度为255，最低强度为0。理想情况下，我也可以应用某种伽马校正

最后绘制一幅图像，其中每个像素的颜色取自256色调色板

对于画布对象，我无法轻松做到这一点的原因是，我需要在浮点运算中工作，否则会失去精度。我事先不知道最大强度和最小强度是多少，所以我不能只画透明的矩形，希望最好

---

在webgl中有这样做的方法吗？如果是这样，我将如何执行此任务？

您可以使用常规画布执行此任务：

1检查您的矩形的最小/最大值，这样您就可以在该范围之外构建一个映射函数double->[0-255]

2在“打火机”模式下绘制矩形==添加组件值

3当多个矩形重叠时，可能会出现饱和度：如果是，则将映射范围加倍，然后转到2。 现在，如果没有饱和度，只需调整范围以使用画布的完整[0-255]范围，就完成了

由于此算法使用getImageData，因此在所有浏览器/设备上可能无法达到60 fps。但在桌面/Chrome上，每秒10帧以上似乎是完全可能的

希望下面的代码能够澄清我的描述：

//无保护 //样板 var cv=document.getElementById'cv'； var ctx=cv.getContext'2d'； //矩形集合 var-rectCount=30； var rects=buildRandRectsrectCount； 迭代最大值； // ---------------------- 函数迭代最大值{ var limit=10；//回路保护 //基于rects min/max初始化min/max映射 更新映射； // 虽然是真的{ //使用当前贴图绘制场景 绘画场景； //从画布中获取最大int值 var max=getMax； 如果max==255{ //饱和？？最小-最大间隔的两倍 globalMax=globalMin+2*globalMax-globalMin； }否则{ //没有调味汁？只需调整最小-最大间隔 globalMax=globalMin+max/255*globalMax-globalMin； 绘画场景； 回来 } 限制-； 如果限制为0-255值 var globalMin=0； var globalMax=0； 函数映射值{ 返回0 | 255*值-globalMin/globalMax-globalMin； } //创建初始映射 函数更新映射{ globalMin=rects[0].min； globalMax=rects[0].max； 对于变量i=1；iglobalMax globalMax=thisRect.max； } } //随机矩形集合 函数buildRandRectsrectCount{ var rects=[]； 对于变量i=0；imax=data[i]； 如果max==255，则返回255； } 返回最大值； }

---

谢谢你的回答和代码，但是你如何处理数值稳定性呢？如果我有1000个重叠的矩形，每个都贡献一小部分呢？不客气。这只是学术上的“假设”，还是真的有可能？换句话说：你的应用程序应该有多大的矩形计数/动态范围？不，我不知道ct在每个像素上都有几千个重叠的矩形然后我想删除我的答案…你应该要么使用浮点webGL缓冲区哎哟！只为了显示第一个矩形，这是多么大的开销啊！更不用说浏览器支持问题了。要么用手在浮点32数组中绘制渐变矩形=>转换为ImageData=>在画布上绘制。可能是因为我是mo

---

We’我们精通Context2D，但我敢打赌我会在4小时内完成b，在4小时内完成a。。。天！！！更正确的是，我正在用JS逐像素地绘制所有内容，但仅用统一的颜色填充512x512图像就需要300毫秒的时间。。。