夺宝网站制作网站建设公开

接第一篇cesium FBO（一）渲染到纹理（RTT）原理的基础，再接着cesium FBO（二）渲染到Canvas，实现对FBO中的数据进行二次处理，实现灰度图效果。

知道怎么样渲染到FBO了，又知道如何从FBO显示到Canvas了，要进行灰度处理，事情就变的简单了，效果如下图左上角。

一、效果

二、实现

实现过程分为以下几步：

1.创建FPO

2.渲染到FBO

3.灰度处理FBO中的数据

4.从FBO读到Canvas

其中 1、2、4同上一篇文章，这里只展示第3步：

          //1）创建临时空间let flippedImgData = new ImageData(width, height);//2）垂直翻转for (let y = 0; y < height; y++) {for (let x = 0; x < width; x++) {let originalIndex = (y * width + x) * 4;let flippedIndex = ((height - 1 - y) * width + x) * 4;flippedImgData.data[flippedIndex] = imageData.data[originalIndex];flippedImgData.data[flippedIndex + 1] = imageData.data[originalIndex + 1];flippedImgData.data[flippedIndex + 2] = imageData.data[originalIndex + 2];flippedImgData.data[flippedIndex + 3] = imageData.data[originalIndex + 3];}}//3）计算灰度值for (let i = 0; i < flippedImgData.data.length; i += 4) {let gray = 0.299 * flippedImgData.data[i] + 0.587 * flippedImgData.data[i + 1] + 0.114 * flippedImgData.data[i + 2];flippedImgData.data[i] = gray;flippedImgData.data[i + 1] = gray;flippedImgData.data[i + 2] = gray;}//4）缩放并绘制到Canvas上const canvas = document.getElementById('DeepCanvas');canvas.width = 300;  // 目标宽度canvas.height = 200; // 目标高度const context2d = canvas.getContext('2d');const tempCanvas = document.createElement('canvas');tempCanvas.width = width;tempCanvas.height = height;const tempCtx = tempCanvas.getContext('2d');tempCtx.putImageData(flippedImgData, 0, 0);// 绘制并缩放到目标尺寸context2d.drawImage(tempCanvas,0, 0, width, height,    // 源图像位置和尺寸0, 0, canvas.width, canvas.height // 目标位置和尺寸);

主要分为四个步骤，注释已经很清楚了，你已经拿到一帧画面的数据（RGB）了，想怎么玩就怎么玩，如高斯模糊、红外效果等。