如上所述,我想通过光线追踪将 3D 场景渲染到 2D 平面上。最终我想将它用于体积渲染,但我正在努力解决这里的基础问题。我有一个 three.js 场景,其观察平面连接到相机(当然在它前面)。
设置:
然后(在着色器中)我通过平面中的每个点(250x250)从相机拍摄光线。平面后面是 41x41x41 的体积(本质上是一个立方体)。如果光线穿过立方体,则光线穿过的观察平面中的点将被渲染为红色,否则该点将被渲染为黑色。不幸的是,这仅在您从正面看立方体时才有效。这是示例:http ://ec2-54-244-155-66.us-west-2.compute.amazonaws.com/example.html
如果你尝试从不同的角度看立方体(你可以用鼠标移动相机),那么我们不会像我们想要的那样在观察平面上渲染一个立方体,而是一个侧面有一些奇怪像素的正方形。
这是光线追踪的代码:
顶点着色器:
bool inside(vec3 posVec){
bool value = false;
if(posVec.x <0.0 ||posVec.x > 41.0 ){
value = false;
}
else if(posVec.y <0.0 ||posVec.y > 41.0 ){
value = false;
}
else if(posVec.z <0.0 ||posVec.z > 41.0 ){
value = false;
}
else{
value = true;
}
return value;
}
float getDensity(vec3 PointPos){
float stepsize = 1.0;
float emptyStep = 15.0;
vec3 leap;
bool hit = false;
float density = 0.000;
// Ray direction from the camera through the current point in the Plane
vec3 dir = PointPos- camera;
vec3 RayDirection = normalize(dir);
vec3 start = PointPos;
for(int i = 0; i<STEPS; i++){
vec3 alteredPosition = start;
alteredPosition.x += 20.5;
alteredPosition.y += 20.5;
alteredPosition.z += 20.5;
bool insideTest = inside(alteredPosition);
if(insideTest){
// advance from the start position
start = start + RayDirection * stepsize;
hit = true;
}else{
leap = start + RayDirection * emptyStep;
bool tooFar = inside(leap);
if(tooFar){
start = start + RayDirection * stepsize;
}else{
start = leap;
}
}
}
if(hit){
density = 1.000;
}
return density;
}
void main() {
PointIntensity = getDensity(position);
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
片段着色器:
varying float PointIntensity;
void main() {
//Rays that have traversed the volume (cube) should leave a red point on the viewplane, Rays that just went through empty space a black point
gl_FragColor= vec4(PointIntensity, 0.0, 0.0, 1.0);
}
完整代码: http: //pastebin.com/4YmWL0u1
相同的代码但正在运行: http ://ec2-54-244-155-66.us-west-2.compute.amazonaws.com/example.html
如果有人对我在这里做错了什么有任何提示,我会很高兴
编辑:
我用 Mark Lundin 提出的更改更新了示例,但不幸的是,在移动相机时我仍然只得到一个红色方块(虽然侧面没有奇怪的像素):
mat4 uInvMVProjMatrix = modelViewMatrix *inverseProjectionMatrix;
inverseProjectionMatrix 是作为统一传递给着色器的 Three.js 相机属性 projectionMatrixInverse。然后为视平面中的每个点调用 unproject 函数及其 uv 坐标。
新代码在这里:
并在这里运行:
http://ec2-54-244-155-66.us-west-2.compute.amazonaws.com/example.html
要查看相机是否实际移动,您可以按 x、y、z 来获取当前相机的 x、y、z 坐标。