Question

我有一个闪烁THREE.Points的问题，取决于它们的UV坐标，如下面的代码中所示：http://codepen.io/anon/pen/qrdQeY?editors=0010

codepen中的代码尽可能缩小（171行），但总结一下我在做什么：

使用THREE.Points渲染精灵
BufferGeometry包含spritesheet索引和每个sprite的位置
带有自定义顶点和像素着色器的RawShaderMaterial，用于查找给定索引的精灵的UV坐标
带有4x4细胞的128x128px spritesheet包含精灵

以下是代码：

/// FRAGMENT SHADER ===========================================================
const fragmentShader = `
precision highp float;

uniform sampler2D spritesheet;

// number of spritesheet subdivisions both vertically and horizontally
// e.g. for a 4x4 spritesheet this number is 4
uniform float spritesheetSubdivisions;

// vParams[i].x = sprite index
// vParams[i].z = sprite alpha
varying vec3 vParams;

/**
 * Maps regular UV coordinates spanning the entire spritesheet
 * to a specific sprite within the spritesheet based on the given index,
 * which points into a spritesheel cell (depending on spritesheetSubdivisions
 * and assuming that the spritesheet is regular and square).
 */
vec2 spriteIndexToUV(float idx, vec2 uv) {
    float cols = spritesheetSubdivisions;
    float rows = spritesheetSubdivisions;

    float x = mod(idx, cols);
    float y = floor(idx / cols);

    return vec2(x / cols + uv.x / cols, 1.0 - (y / rows + (uv.y) / rows));
}

void main() {
    vec2 uv = spriteIndexToUV(vParams.x, gl_PointCoord);
    vec4 diffuse = texture2D(spritesheet, uv);

    float alpha = diffuse.a * vParams.z;
    if (alpha < 0.5) discard;

    gl_FragColor = vec4(diffuse.xyz, alpha);
}
`

// VERTEX SHADER ==============================================================
const vertexShader = `
precision highp float;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform float size;
uniform float scale;

attribute vec3 position;
attribute vec3 params; // x = sprite index, y = unused, z = sprite alpha
attribute vec3 color;

varying vec3 vParams;

void main() {
    vParams = params;

    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_Position = projectionMatrix * mvPosition;
    gl_PointSize = size * ( scale / - mvPosition.z );
}
`

// THREEJS CODE ===============================================================

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({canvas: document.querySelector("#mycanvas")});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xf0f0f0)

const pointGeometry = new THREE.BufferGeometry()
pointGeometry.addAttribute("position", new THREE.BufferAttribute(new Float32Array([
  -1.5, -1.5, 0,
  -0.5, -1.5, 0,
  0.5, -1.5, 0,
  1.5, -1.5, 0,

  -1.5, -0.5, 0,
  -0.5, -0.5, 0,
  0.5, -0.5, 0,
  1.5, -0.5, 0,

  -1.5, 0.5, 0,
  -0.5, 0.5, 0,
  0.5, 0.5, 0,
  1.5, 0.5, 0,

  -1.5, 1.5, 0,
  -0.5, 1.5, 0,
  0.5, 1.5, 0,
  1.5, 1.5, 0,
]), 3))

pointGeometry.addAttribute("params", new THREE.BufferAttribute(new Float32Array([
  0, 0, 1,    // sprite index 0 (row 0, column 0)
  1, 0, 1,    // sprite index 1 (row 0, column 1)
  2, 0, 1,    // sprite index 2 (row 0, column 2)
  3, 0, 1,    // sprite index 3 (row 0, column 4)

  4, 0, 1,    // sprite index 4 (row 1, column 0)
  5, 0, 1,    // sprite index 5 (row 1, column 1)
  6, 0, 1,    // ...
  7, 0, 1,

  8, 0, 1,
  9, 0, 1,
  10, 0, 1,
  11, 0, 1,

  12, 0, 1,
  13, 0, 1,
  14, 0, 1,
  15, 0, 1
]), 3))

const img = document.querySelector("img")
const texture = new THREE.TextureLoader().load(img.src);

const pointMaterial = new THREE.RawShaderMaterial({
  transparent: true,
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
  uniforms: {
    spritesheet: {
      type: "t",
      value: texture
    },
    spritesheetSubdivisions: {
      type: "f",
      value: 4
    },
    size: {
      type: "f",
      value: 1
    },
    scale: {
      type: "f",
      value: window.innerHeight / 2
    }
  }
})

const points = new THREE.Points(pointGeometry, pointMaterial)
scene.add(points)

const render = function (timestamp) {
  requestAnimationFrame(render);


  camera.position.z = 5 + Math.sin(timestamp / 1000.0)

  renderer.render(scene, camera);
};

render();

// resize viewport
window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

如果您有Nvidia卡，您会看到三个精灵在相机时闪烁沿Z轴来回移动。集成英特尔图形芯片问题不会发生。

我不确定如何解决这个问题。受影响的紫外线坐标似乎是随机的。我会感激任何指示。

Answer 1

spriteIndexToUV（）函数内的mod（）/ floor（）计算会导致某些星座出现问题（当spriteindex是spritesheetSubdivisions的倍数时）。

我可以通过用小epsilon调整cols变量来修复它：

vec2 spriteIndexToUV(float idx, vec2 uv) 
{
  float cols = spritesheetSubdivisions - 1e-6; // subtract epsilon
  float rows = spritesheetSubdivisions;

  float x = mod(idx, cols);
  float y = floor(idx / cols);

  return vec2(x / cols + uv.x / cols, 1.0 - (y / rows + (uv.y) / rows));
}

PS：那个codepen的东西很酷，不知道这个存在： - ）

编辑：这样写它可能更好/更清楚：

float cols = spritesheetSubdivisions;
float rows = spritesheetSubdivisions;

float y = floor ((idx+0.5) / cols);
float x = idx - cols * y;

这样，我们完全清楚地板操作中的任何关键情况 - 再加上我们摆脱了mod（）调用。

至于为什么floor (idx/4)有时会产生0而不是1当idx 应该正好是4.0时，我只能推测varying vec3 vParams受到df$x <- paste(df$n, "-", df$s)的影响当它从顶点着色器进入片段着色器阶段时进行一些插值，从而导致片段着色器看到例如3.999999而不是4.0。

闪烁的THREE.Points基于相机位置和纹理坐标，但仅限于Nvidia卡

1 个答案: