如何将顶点放置在固定像素中？答案

【问题标题】：How can i place a vertex in a fixed pixel?如何将顶点放置在固定像素中？
【发布时间】：2016-03-05 19:37:22
【问题描述】：

我正在尝试使用 Webgl 中的 gpu 并行容量进行一些计算。

在我正在制作的程序中，我必须将边界框划分为网格。

然后在每个顶点的顶点着色器中，我必须确定顶点的单元格。

拥有顶点的单元格，我必须确定 2D 位置，以便将结果保存为像素着色器中的颜色。

阅读图形管道以及视口的工作原理，我以某种方式实现了这一点，但我认为我没有将顶点放置在它对应的像素中。

我有一个有 47 个顶点的网格，我手动进行了计算，结果就是这个。

Manual

但是，着色器的输出是这样的：

With Shader

也许我错过了一些改变结果的管道步骤或计算。

顶点着色器：

<script id="VertexRTT" type="x-shader/x-vertex">
precision highp float;

uniform vec3 max; //Vertex with the Max values
uniform vec3 min; //Vertex with the Min values
uniform float Dim; //Number of Cells for axis
uniform float RTDim; //Dimension of the Frambuffer/Texture/Viewport
//RTDim = Math.floor(Math.sqrt(ownCubic(Dim)));

attribute vec3 VertexPos;

varying vec3 Color;


void main(void) {
    vec3 pos;

    //First i take the vertex from the min-max range to the 0-1 range
    float X = floor((VertexPos.x - min.x)*(Dim)/(max.x - min.x));

    //Because i can have a vertex in the index Dim i have to subtract 1 (because the indexes go from 0 to Dim-1)

    if( X == Dim)X=X-1.0;

    float Y = floor((VertexPos.y-min.y)*(Dim)/(max.y - min.y));

    if( Y == Dim)Y=Y-1.0;

    Y = Y * Dim;
    float Z = floor((VertexPos.z-min.z)*(Dim)/(max.z - min.z));

    if( Z == Dim)Z=Z-1.0;

    Z = Z*Dim*Dim;
    //Make the 3D index a 1D index
    float temp = X + Y + Z;

    //Make the 1D index a 2D index
    pos.y = floor(temp/RTDim);
    pos.x = temp - (pos.y * RTDim);
    pos.z = 0.1;
    // it seems that the vertex with index 0 are begin culled
    pos.x = pos.x +1.0;
    pos.y = pos.y +1.0;
    //Take from the 0-RTDim range to the -1 - 1 Range
    pos.x = ((pos.x / RTDim)*2.0) - 1.0;
    pos.y = ((pos.y / RTDim)*2.0) - 1.0;

    //Right now the Color is fixed
    Color = vec3(1.0,1.0,1.0);

    gl_Position = vec4(pos, 1.0);

    //I am drawing as POINTS
    gl_PointSize = 1.0;
}

视口：gl.viewport(0, 0, RTDim, RTDim);

我可以忽略什么？

【问题讨论】：

标签： three.js glsl webgl shader

【解决方案1】：

这几行可能是问题所在：

//Take from the 0-RTDim range to the -1 - 1 Range
pos.x = ((pos.x / RTDim)*2.0) - 1.0;
pos.y = ((pos.y / RTDim)*2.0) - 1.0;

要写入单个像素，您需要将视口坐标 (gl_Position) 直接放在像素中心。

考虑写入视口范围为 (-1, 1) 的 2 x 2 纹理

您应该将纹素映射到视口坐标，如下所示

(0, 0) 到 (-0.5, -0.5)

(0, 1) 到 (-0.5, 0.5)

(1, 0) 到 (0.5, -0.5)

(1, 1) 到 (0.5, 0.5)

以下代码将纹素映射到视口坐标

//the width of the texture, in pixels
float RTDim; 
//the texel in range (0, RTDim - 1)
vec2 texel;

vec2 viewportCoords = ((texel + 0.5) / RTDim) * 2.0 - 1.0;

【讨论】：