个人中心
gpt4 book ai didi

javascript - WebGL 在像素级别混合颜色

转载 作者：行者123 更新时间：2023-12-04 01:09:06 24 4
gpt4 key购买 nike

我想编写一个小程序来计算例如素数。我的想法是使用 webgl/threejs 将代表质数(基于坐标)的所有像素着色为白色，其余为黑色。我的问题是 webgl 以某种方式混合了像素级别的颜色(如果黑色 Canvas 中间有一个白色像素，它会与环境混合，并且该白色像素周围的像素变为灰色)。遇到这个问题，我无法正确识别白色和黑色像素。
我的问题:如何告诉 webgl 或 canvas 在不混合的情况下为每个像素使用正确的颜色？
这是一个演示，我将每个第二个像素着色为白色:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ProjectLaGPU</title>
</head>
<body>
    <script id="vertex-shader" type="x-shader/x-vertex">
        uniform float u_start;

        varying float v_start;

        void main() {
            v_start = u_start;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    </script>
    <script id="fragment-shader" type="x-shader/x-fragment">
        varying float v_start;

        void main () {
            if (int(gl_FragCoord.x)%2==0 && int(gl_FragCoord.y)%2==0) {
                gl_FragColor = vec4(1, 1, 1, 1);
            } else {
                gl_FragColor = vec4(0, 0, 0, 1);
            }
        }
    </script>
    <script src="https://threejs.org/build/three.js"></script>
    <script src="main.js"></script>
</body>
</html>
/* main.js */
async function init() {
    const scene = new THREE.Scene();
    const camera = new THREE.OrthographicCamera(-.5, .5, .5, -.5, -1, 1);
    const renderer = new THREE.WebGLRenderer({
        preserveDrawingBuffer: true,
        powerPreference: "high-performance",
        depth: false,
        stencil: false
    });

    const geometry = new THREE.PlaneGeometry();
    const material = new THREE.ShaderMaterial({
        uniforms: {
            u_start: { value: 0.5 },
        },
        vertexShader: document.getElementById("vertex-shader").innerText,
        fragmentShader: document.getElementById("fragment-shader").innerText,
      });
    const mesh = new THREE.Mesh(geometry, material);
    renderer.setSize(1000, 1000);
    document.body.appendChild(renderer.domElement);
    scene.add(mesh)
    renderer.render(scene, camera);
}

init();

最佳答案

接受的答案是不正确的，只能靠运气……换句话说，如果它对您有用，那么您很幸运，您的机器/浏览器/操作系统/当前设置似乎可以正常工作。更改设置，切换到另一个浏览器/操作系统/机器，它将不起作用。
这里有很多问题被混为一谈
1. 获得不模糊的 Canvas
要获得不模糊的 Canvas ，您必须做两件事
关闭浏览器的过滤
在 Chrome/Edge/Safari 中，您可以使用 canvas { image-rendering: pixelated; } 来做到这一点在 Firefox 上 canvas { image-rendering: crisp-edges; }请注意 pixelated比 crisp-edges 更适合这种情况.根据规范，鉴于此原始图像
original-image
并将其显示为默认算法的 3 倍大小取决于浏览器，但典型示例可能如下所示
enter image description herepixelated看起来像这样
pixelated-stylecrisp-edges看起来像这样
crisp-edges-style
但请注意，用于绘制图像的实际算法并未由规范 🤬 定义，因此目前 firefox 恰好对 crisp-edges 使用最近邻过滤。并且不支持pixelated .因此你应该指定 pixelated最后所以它覆盖 crisp-edges如果存在
Canvas 有 2 种尺寸。它的绘图缓冲区大小( Canvas 中的像素数)和它的显示大小(由 CSS 定义)。但是 CSS 大小以 CSS 像素计算，然后按当前 devicePixelRatio 缩放。 .这意味着如果您没有放大或缩小并且您的设备带有 devicePixelRatio那不是 1.0 并且您的绘图缓冲区大小与您的显示大小相匹配，那么 Canvas 将被缩放到匹配 devicePixelRatio 所需的大小。 .所以，image-rendering CSS 样式将用于决定缩放的方式。
例子

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-.5, .5, .5, -.5, -1, 1);
const renderer = new THREE.WebGLRenderer();

const geometry = new THREE.PlaneBufferGeometry();
const material = new THREE.ShaderMaterial({
  vertexShader: document.getElementById("vertex-shader").innerText,
  fragmentShader: document.getElementById("fragment-shader").innerText,
});
const mesh = new THREE.Mesh(geometry, material);
document.body.appendChild(renderer.domElement);
scene.add(mesh)
renderer.render(scene, camera);
canvas { 
  image-rendering: crisp-edges;
  image-rendering: pixelated;  /* pixelated is more correct so put that last */
}
<script src="https://cdn.jsdelivr.net/npm/three@0.123/build/three.js"></script>

<script id="vertex-shader" type="x-shader/x-vertex">
        void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
        void main () {
            if (int(gl_FragCoord.x)%2==0 && int(gl_FragCoord.y)%2==0) {
                gl_FragColor = vec4(1, 1, 1, 1);
            } else {
                gl_FragColor = vec4(0, 0, 0, 1);
            }
        }
</script>

关闭抗锯齿。
Three.js 为你做这件事
2. 在 Canvas 上获得 1 个像素 = 在屏幕上获得 1 个像素
这就是所谓的 setPixelRatio正在尝试做。它似乎对你有用只是运气。换句话说，当您尝试在不同的机器或不同的浏览器上运行您的代码时，它可能无法正常工作。
问题是为了设置 Canvas 的绘图缓冲区的大小，以便它匹配 1 到 1 将使用多少像素来显示 Canvas ，您必须询问浏览器“您使用了多少像素”。
原因是例如，假设您有一个设备像素比 (dpr) 为 3 的设备。让我们将窗口设置为 100 个设备像素宽。 33.3333 CSS 像素宽。如果你看 window.innerWidth ( which you should never do anyway ) 它将报告 33 个 CSS 像素。如果你再乘以 3 的 dpr，你会得到 99，但实际上浏览器可能/将绘制 100。
要询问实际使用的尺寸，您必须使用 ResizeObserver 并让它通过 devicePixelContentBoxSize 报告使用的确切大小 

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-.5, .5, .5, -.5, -1, 1);
const renderer = new THREE.WebGLRenderer();

const geometry = new THREE.PlaneBufferGeometry();
const material = new THREE.ShaderMaterial({
  vertexShader: document.getElementById("vertex-shader").innerText,
  fragmentShader: document.getElementById("fragment-shader").innerText,
});

const mesh = new THREE.Mesh(geometry, material);

function onResize(entries) {
  for (const entry of entries) {
    let width;
    let height;
    let dpr = window.devicePixelRatio;
    if (entry.devicePixelContentBoxSize) {
      // NOTE: Only this path gives the correct answer
      // The other 2 paths are an imperfect fallback
      // for browsers that don't provide anyway to do this
      width = entry.devicePixelContentBoxSize[0].inlineSize;
      height = entry.devicePixelContentBoxSize[0].blockSize;
      dpr = 1; // it's already in width and height
    } else if (entry.contentBoxSize) {
      if (entry.contentBoxSize[0]) {
        width = entry.contentBoxSize[0].inlineSize;
        height = entry.contentBoxSize[0].blockSize;
      } else {
        width = entry.contentBoxSize.inlineSize;
        height = entry.contentBoxSize.blockSize;
      }
    } else {
      width = entry.contentRect.width;
      height = entry.contentRect.height;
    }
    // IMPORTANT! You must pass false here otherwise three.js
    // will mess up the CSS!
    renderer.setSize(Math.round(width * dpr), Math.round(height * dpr), false);
    renderer.render(scene, camera);
  }
}

const canvas = renderer.domElement;
const resizeObserver = new ResizeObserver(onResize);
try {
  // because some browers don't support this yet
  resizeObserver.observe(canvas, {box: 'device-pixel-content-box'});
} catch (e) {
  resizeObserver.observe(canvas, {box: 'content-box'});
}
document.body.appendChild(renderer.domElement);
scene.add(mesh)
renderer.render(scene, camera);
html, body, canvas {
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.123/build/three.js"></script>

<script id="vertex-shader" type="x-shader/x-vertex">
        void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
        void main () {
            if (int(gl_FragCoord.x)%2==0 && int(gl_FragCoord.y)%2==0) {
                gl_FragColor = vec4(1, 1, 1, 1);
            } else {
                gl_FragColor = vec4(0, 0, 0, 1);
            }
        }
</script>

任何其他方法只会在某些时候起作用。
为了证明它，这里是使用 setPixelRatio 和 window.innerWidth 与使用 ResizeObserver 的方法 

function test(parent, fn) {
  const scene = new THREE.Scene();
  const camera = new THREE.OrthographicCamera(-.5, .5, .5, -.5, -1, 1);
  const renderer = new THREE.WebGLRenderer();

  const geometry = new THREE.PlaneBufferGeometry();
  const material = new THREE.ShaderMaterial({
    vertexShader: document.getElementById("vertex-shader").innerText,
    fragmentShader: document.getElementById("fragment-shader").innerText,
  });

  const mesh = new THREE.Mesh(geometry, material);
  fn(renderer, scene, camera);
  parent.appendChild(renderer.domElement);
  scene.add(mesh)
  renderer.render(scene, camera);
}

function resizeOberserverInit(renderer, scene, camera) {
  function onResize(entries) {
    for (const entry of entries) {
      let width;
      let height;
      let dpr = window.devicePixelRatio;
      if (entry.devicePixelContentBoxSize) {
      // NOTE: Only this path gives the correct answer
      // The other 2 paths are an imperfect fallback
      // for browsers that don't provide anyway to do this
        width = entry.devicePixelContentBoxSize[0].inlineSize;
        height = entry.devicePixelContentBoxSize[0].blockSize;
        dpr = 1; // it's already in width and height
      } else if (entry.contentBoxSize) {
        if (entry.contentBoxSize[0]) {
          width = entry.contentBoxSize[0].inlineSize;
          height = entry.contentBoxSize[0].blockSize;
        } else {
          width = entry.contentBoxSize.inlineSize;
          height = entry.contentBoxSize.blockSize;
        }
      } else {
        width = entry.contentRect.width;
        height = entry.contentRect.height;
      }
      // IMPORTANT! You must pass false here otherwise three.js
      // will mess up the CSS!
      renderer.setSize(Math.round(width * dpr), Math.round(height * dpr), false);
      renderer.render(scene, camera);
    }
  }

  const canvas = renderer.domElement;
  const resizeObserver = new ResizeObserver(onResize);
  try {
    // because some browers don't support this yet
    resizeObserver.observe(canvas, {box: 'device-pixel-content-box'});
  } catch (e) {
    resizeObserver.observe(canvas, {box: 'content-box'});
  }
}

function innerWidthDPRInit(renderer, scene, camera) {
  renderer.setPixelRatio(window.deivcePixelRatio);
  renderer.setSize(window.innerWidth, 70);
  window.addEventListener('resize', () => {
    renderer.setPixelRatio(window.deivcePixelRatio);
    renderer.setSize(window.innerWidth, 70);
    renderer.render(scene, camera);
  });
}

test(document.querySelector('#innerWidth-dpr'), innerWidthDPRInit);
test(document.querySelector('#resizeObserver'), resizeOberserverInit);
body {
  margin: 0;
}
canvas {
  height: 70px;
  display: block;
}
#resizeObserver,
#resizeObserver>canvas {
  width: 100%;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.123/build/three.js"></script>

<script id="vertex-shader" type="x-shader/x-vertex">
        void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
        void main () {
            if (int(gl_FragCoord.x)%2==0 && int(gl_FragCoord.y)%2==0) {
                gl_FragColor = vec4(1, 1, 1, 1);
            } else {
                gl_FragColor = vec4(0, 0, 0, 1);
            }
        }
</script>
<div>via window.innerWidth and setPixelRatio</div>
<div id="innerWidth-dpr"></div>
<div>via ResizeObserver</div>
<div id="resizeObserver"></div>

尝试放大浏览器或尝试不同的设备。

关于javascript - WebGL 在像素级别混合颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65423254/

24 4 0
文章推荐： reactjs - 使用 Angular 10 添加 swagger-UI
文章推荐： sql - 基于两列创建数字规则
文章推荐： c++ - 通过正则表达式隐藏/折叠/暗淡任意代码行(例如隐藏日志记录)
文章推荐： python-3.x - pip3 安装了一个违反需求说明符的依赖版本
行者123
个人简介

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

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