javascript - 如何在 Three.js 中比较像素

标签 javascript three.js webgl

我在 Three.js 中有两个纹理,我想在像素级别进行比较。但我不知道该怎么做。 Three.js 文档没有回答我的问题。事实上,有些类没有记录。

为了简洁起见,我想计算 2 个图像的不同程度(以计算我的遗传算法中的适应度值)。

编辑:我被告知应该提供更多信息。我们开始吧。

一个纹理来自使用“loadTexture”加载的图像:

        referenceTexture = THREE.ImageUtils.loadTexture('images/tia1.jpg'); //256px*256px image

获得另一个场景时,我将一些多边形添加到第二个场景,然后将该场景渲染为纹理:

var bufferScene = new THREE.Scene();
var bufferTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter,format: THREE.RGBAFormat});
bufferScene.add(triangle) //This is a bucle in the real code.
renderer.setSize(256,256);
requestAnimationFrame( render );
renderer.render(bufferScene, camera, bufferTexture);

提前谢谢您。

最佳答案

您可以将每个纹理附加到渲染目标,然后调用 renderer.readRenderTargetPixels 来获取每个纹理的像素,然后进行比较。

或者

您可以使用着色器将这两个纹理渲染到另一个渲染目标,该着色器可以区分这两个纹理,然后使用 renderer.readRenderTargetPixels 从该渲染目标中读取像素

关于javascript - 如何在 Three.js 中比较像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40214353/

相关文章:

javascript - 如何在 Three.js 中处理动画模型?

javascript - 使用 raycaster 选择 gltf 的特定元素并添加事件监听器

javascript - MySQL 的 %LIKE% 子句的 JavaScript 等价物是什么?

javascript - Chrome 为元素添加不显示

javascript - Three.js - 它有顶点索引着色吗?

three.js - 将带有纹理的简单模型从 Blender 导出到 Three.js

javascript - 使用自定义间隔将 Three.Js 场景渲染为动画 GIF 文件

image-processing - WebGL 地球 : how to make clouds

javascript - Socket.IO 不使用后备方法

php - 用文本填充的 div 之间的复杂垂直间距