个人中心
gpt4 book ai didi

javascript - 从 WebGL Canvas 读取似乎工作不一致

转载 作者：行者123 更新时间：2023-12-04 03:34:24 25 4
gpt4 key购买 nike

<分区>

我遇到了这种非常奇怪的情况，我试图从 WebGL Canvas 中读取像素，但没有成功。然后我写了同一个程序的另一个版本，只是没有类，出于某种原因它在这里工作。也许我犯了一些非常基本的错误，但我真的看不出这两者之间的(语义)区别。

在下面的片段中，我(Linux 5.11.15-arch1-2 上的 Firefox 88.0)看到控制台打印 128 和 0，128 源于类外部的代码，这似乎是正确的，因为着色器正在绘制每个像素和 channel 为 0.5，0 来自类内部的代码。

[编辑] 我已经看到了 this问题，但他们谈论的是读取必须发生在与平局相同的事件中，据我所知，这对于我的两个案例(连续两行)都是正确的。他们还在谈论屏幕上的 Canvas ，而我渲染到帧缓冲区，不确定这是否会有所不同，但我认为帧缓冲区更持久。

class Gpgpu {
  constructor(w, h, vs, fs, ans, uns) {
    this.gl = document.createElement("canvas").getContext("webgl");
    this.gl.canvas.width = w;
    this.gl.canvas.height = h;
    this.gl.viewport(0, 0, w, h);
    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.gl.createFramebuffer());
    this.out = new Uint8Array(w * h * 4);
  }
  spg(vs, fs, ans, uns) {
    let p = this.gl.createProgram();
    for (let ss of [
      { t: this.gl.VERTEX_SHADER, d: vs },
      { t: this.gl.FRAGMENT_SHADER, d: fs }
    ]) {
      let s = this.gl.createShader(ss.t);
      this.gl.shaderSource(s, ss.d);
      this.gl.compileShader(s);
      this.gl.attachShader(p, s);
    }
    this.gl.linkProgram(p);
    this.gl.useProgram(p);
    this.als = {};
    for (let an of ans) {
      this.als[an] = {
        l: this.gl.getAttribLocation(p, an),
        b: this.gl.createBuffer()
      };
    }
    this.uls = {};
    for (let un of uns) {
      this.uls[un] = this.gl.getUniformLocation(p, un);
    }
  }
  sad(n, ads) {
    this.n = n;
    for (let an in ads) {
      let al = this.als[an];
      let ad = ads[an];
      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, al.b);
      this.gl.bufferData(
        this.gl.ARRAY_BUFFER,
        Float32Array.from(ad),
        this.gl.STATIC_DRAW
      );
      this.gl.enableVertexAttribArray(al.l);
      this.gl.vertexAttribPointer(al.l, 2, this.gl.FLOAT, false, 0, 0);
    }
  }
  drw() {
    this.gl.drawArrays(this.gl.TRIANGLES, 0, this.n);
  }
}

class Cloth {
  constructor(w, h) {
    this.gpu = new Gpgpu(w, h);
    this.tex = this.gpu.gl.createTexture();
    this.gpu.spg(
      document.getElementById("vs").innerHTML,
      document.getElementById("fs").innerHTML,
      ["a_position"],
      []
    );
    this.gpu.sad(6, {
      a_position: [-1, -1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1]
    });
    this.gpu.gl.bindTexture(this.gpu.gl.TEXTURE_2D, this.tex);
    this.gpu.gl.texImage2D(
      this.gpu.gl.TEXTURE_2D,
      0,
      this.gpu.gl.RGBA,
      w,
      h,
      0,
      this.gpu.gl.RGBA,
      this.gpu.gl.UNSIGNED_BYTE,
      null
    );
  }
  t() {
    this.gpu.gl.framebufferTexture2D(
      this.gpu.gl.FRAMEBUFFER,
      this.gpu.gl.COLOR_ATTACHMENT0,
      this.gpu.gl.TEXTURE_2D,
      this.tex,
      0
    );
    this.gpu.drw();
    this.gpu.gl.readPixels(
      0,
      0,
      this.w,
      this.h,
      this.gpu.gl.RGBA,
      this.gpu.gl.UNSIGNED_BYTE,
      this.gpu.out
    );
    console.log(this.gpu.out[0]);
  }
}

const w = 10;
const h = 10;
const gpu = new Gpgpu(w, h);
const tex = gpu.gl.createTexture();

gpu.spg(
  document.getElementById("vs").innerHTML,
  document.getElementById("fs").innerHTML,
  ["a_position"],
  []
);
gpu.sad(6, {
  a_position: [-1, -1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1]
});
gpu.gl.bindTexture(gpu.gl.TEXTURE_2D, tex);
gpu.gl.texImage2D(
  gpu.gl.TEXTURE_2D,
  0,
  gpu.gl.RGBA,
  w,
  h,
  0,
  gpu.gl.RGBA,
  gpu.gl.UNSIGNED_BYTE,
  null
);
gpu.gl.framebufferTexture2D(
  gpu.gl.FRAMEBUFFER,
  gpu.gl.COLOR_ATTACHMENT0,
  gpu.gl.TEXTURE_2D,
  tex,
  0
);
gpu.drw();
gpu.gl.readPixels(0, 0, w, h, gpu.gl.RGBA, gpu.gl.UNSIGNED_BYTE, gpu.out);
console.log(gpu.out[0]);

new Cloth(10, 10).t();
<script type="x-shader/x-vertex" id="vs">
  attribute vec4 a_position;
              
  void main() {
    gl_Position = a_position;
  }
</script>
<script type="x-shader/x-fragment" id="fs">precision highp float;
  void main() {
    gl_FragColor = vec4(0.5, 0.5, 0.5, 0.5);
  }
</script>

25 4 0
文章推荐： php - 从 Eloquent 集合中删除不匹配的条件记录
文章推荐： groovy - 使用 XmlSlurper 和 findAll 的嵌套 GPath 表达式
文章推荐： r - 检测不同数据框中的字符串，从 R 中的列返回值
文章推荐： docker - 如何在 Amazon AWS EC2 Windows 上使用 Windows 容器运行 Docker Desktop(或者这不可能)？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com