如何将顶点放在固定像素中?

时间:2016-02-24 03:09:58

标签: three.js glsl webgl shader

我试图使用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);

我可以俯瞰什么?

1 个答案:

答案 0 :(得分:2)

这些行可能是问题所在:

//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)

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

//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;