- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
为什么我从WebGLRenderingContext.readPixels()
获得的imageData颠倒了?
我尝试做以下事情:
var gl = renderer.domElement.getContext("webgl")
var pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
var imageData = new ImageData(Uint8ClampedArray.from(pixels), gl.drawingBufferWidth, gl.drawingBufferHeight);
ctx.putImageData(imageData, 0, 0);
ctx.putImageData
之后使用scale,如下所示:
ctx.scale(1, -1);
最佳答案
如果要复制到2D Canvas 上进行翻转,则不妨跳过readPixels
。只需使用drawImage
var dstX = 0;
var dstY = 0;
var dstWidth = ctx.canvas.width;
var dstHeight = ctx.canvas.height;
ctx.drawImage(gl.canvas, dstX, dstY, dstWidth, dstHeight);
var gl = document.querySelector("#webgl").getContext("webgl");
var ctx = document.querySelector("#two_d").getContext("2d");
// fill webgl canvas with red on top and blue on bottom
gl.enable(gl.SCISSOR_TEST);
for (var y = 0; y < 15; ++y) {
var v = y / 14;
gl.scissor(0, y * 10, 300, 10);
gl.clearColor(v, 0, 1 - v, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
}
// copy it to 2d canvas
var dstX = 0;
var dstY = 0;
var dstWidth = ctx.canvas.width;
var dstHeight = ctx.canvas.height;
ctx.drawImage(gl.canvas, dstX, dstY, dstWidth, dstHeight);
canvas {
margin: 1em;
border: 1px solid black;
}
<canvas id="webgl"></canvas>
<canvas id="two_d"></canvas>
gl.readPixels
(您无意将它们放入2d Canvas 中,那么您只需翻转字节即可
var width = gl.drawingBufferWidth;
var height = gl.drawingBufferHeight
var pixels = new Uint8Array(width * height * 4);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
var halfHeight = height / 2 | 0; // the | 0 keeps the result an int
var bytesPerRow = width * 4;
// make a temp buffer to hold one row
var temp = new Uint8Array(width * 4);
for (var y = 0; y < halfHeight; ++y) {
var topOffset = y * bytesPerRow;
var bottomOffset = (height - y - 1) * bytesPerRow;
// make copy of a row on the top half
temp.set(pixels.subarray(topOffset, topOffset + bytesPerRow));
// copy a row from the bottom half to the top
pixels.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
// copy the copy of the top half row to the bottom half
pixels.set(temp, bottomOffset);
}
var gl = document.querySelector("#webgl").getContext("webgl");
var ctx = document.querySelector("#two_d").getContext("2d");
// fill webgl canvas with red on top and blue on bottom
gl.enable(gl.SCISSOR_TEST);
for (var y = 0; y < 15; ++y) {
var v = y / 14;
gl.scissor(0, y * 10, 300, 10);
gl.clearColor(v, 0, 1 - v, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
}
var width = gl.drawingBufferWidth;
var height = gl.drawingBufferHeight
var pixels = new Uint8Array(width * height * 4);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
var halfHeight = height / 2 | 0; // the | 0 keeps the result an int
var bytesPerRow = width * 4;
// make a temp buffer to hold one row
var temp = new Uint8Array(width * 4);
for (var y = 0; y < halfHeight; ++y) {
var topOffset = y * bytesPerRow;
var bottomOffset = (height - y - 1) * bytesPerRow;
// make copy of a row on the top half
temp.set(pixels.subarray(topOffset, topOffset + bytesPerRow));
// copy a row from the bottom half to the top
pixels.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
// copy the copy of the top half row to the bottom half
pixels.set(temp, bottomOffset);
}
// This part is not part of the answer. It's only here
// to show the code above worked
// copy the pixels in a 2d canvas to show it worked
var imgdata = new ImageData(with, height);
imgdata.data.set(pixels);
ctx.putImageData(imgdata, 0, 0);
canvas {
margin: 1em;
border: 1px solid black;
}
<canvas id="webgl"></canvas>
<canvas id="two_d"></canvas>
关于canvas - 如何翻转WebGLRenderingContext.readPixels()的结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41969562/
首先,感谢您的出色工作,我在使用 three.js 的过程中获得了很多乐趣。 我试图找到一个反复出现的问题的答案,.WebGLRenderingContext: GL ERROR :GL_INVALI
window.WebGLRenderingContext 和 canvas.getContext('experimental-webgl') 有什么区别? 我搜索了很多,但找不到答案。 提前致谢 最佳
我注意到似乎有两种方法可以查询功能是否启用:isEnabled 和getParameter。 isEnabled 似乎是实际上检查功能是否启用的正确方法,但我试图理解调用 getParameter 的
我正在处理一个 WebGL 项目,我所有的纹理都渲染得很好。当我想实现一个立方体贴图时,我开始收到这种类型的错误。WebGLRenderingContext.texImage2D 的参数 9 未在所有
我已经升级到 Visual Studio 2015 Community with Typescript 1.5 Beta。我收到以下错误。 Type 'CanvasRenderingContext2D
我正在将 ThreeJS 用于我正在开发的应用程序,特别是 WebGL 渲染器。大约一个半星期前它运行良好,但是当我今天回来工作时,尝试在 Chrome 中运行我的应用程序时出现此错误: 未捕获的类型
我最近开始使用/学习 ThreeJS,但我一直无法将纹理加载到 planeMesh 上。这是我现在为飞机准备的东西: var characterTexture = new THREE.ImageUti
假设我们可以从 CanvasRenderingContext2D 获取 ImageData。 var element = document.getElementById('someCanvas');
本文整理了Java中com.google.gwt.webgl.client.WebGLRenderingContext.getShaderParameteri()方法的一些代码示例,展示了WebGLR
本文整理了Java中com.google.gwt.webgl.client.WebGLRenderingContext.getParameterb()方法的一些代码示例,展示了WebGLRenderi
本文整理了Java中com.google.gwt.webgl.client.WebGLRenderingContext.getUniformv()方法的一些代码示例,展示了WebGLRendering
本文整理了Java中com.google.gwt.webgl.client.WebGLRenderingContext.toJsArray()方法的一些代码示例,展示了WebGLRenderingCo
本文整理了Java中com.google.gwt.webgl.client.WebGLRenderingContext.getBufferParameter()方法的一些代码示例,展示了WebGLRe
本文整理了Java中com.google.gwt.webgl.client.WebGLRenderingContext.getProgramParameteri()方法的一些代码示例,展示了WebGL
本文整理了Java中com.google.gwt.webgl.client.WebGLRenderingContext.getExtension()方法的一些代码示例,展示了WebGLRenderin
本文整理了Java中com.google.gwt.webgl.client.WebGLRenderingContext.getActiveAttrib()方法的一些代码示例,展示了WebGLRende
本文整理了Java中com.google.gwt.webgl.client.WebGLRenderingContext.getActiveUniform()方法的一些代码示例,展示了WebGLRend
本文整理了Java中com.google.gwt.webgl.client.WebGLRenderingContext.getTexParameter()方法的一些代码示例,展示了WebGLRende
本文整理了Java中com.google.gwt.webgl.client.WebGLRenderingContext.isFramebuffer()方法的一些代码示例,展示了WebGLRenderi
本文整理了Java中com.google.gwt.webgl.client.WebGLRenderingContext.uniform2f()方法的一些代码示例,展示了WebGLRenderingCo
我是一名优秀的程序员,十分优秀!