使用 webgl 2.0、延迟着色、帧缓冲区对具有三角形网格的场景进行光线追踪
Ray Tracing a scene with triangle meshes with webgl 2.0, deferred shading, framebuffers
在我原来的 post 被其他堆栈溢出用户标记为 "too broad" 之后。我将用更少的行重新表述我的问题。我已经在 shadertoy 中实现了一个光线行进器，并且我了解所有关于光线-对象相交的数学知识。我想下一步用网格进行光线追踪。我发现这样做需要通过延迟渲染和帧缓冲区来完成（2 次渲染，一次用于几何，另一次用于照明计算，光线追踪）并且交叉点将发生在光线-三角形交叉点。
当然，我会 post 在接下来的几周内编写一些代码，因为我将开始实施它。我将需要一些具体的帮助，但到那时我将不胜感激，以便现在浪费时间搜索网络。这就是为什么我 post 在这里..
原始 post 已被标记 "too broad"
这是我第一次 post 堆栈溢出。我的目标是编写一个带有网格对象的光线追踪器。
到目前为止，我唯一完成的事情就是制作了一个带有球体和平面的光线追踪器。这是通过前向渲染完成的，同时在片段着色器中创建所有几何体（这很容易产生球体和平面）。
在我进行了所有研究之后，我终于找到了解决方案。这是通过延迟着色技术实现的，您可以在其中创建几何体并将其作为纹理传递给 G 缓冲区，然后在第二次传递中开始计算光照和光线追踪。
我正在寻求指导，因为我花了很多 days/months(3-4) 来得出这个结论，因为我既不熟悉着色器也不熟悉图形库。
我的问题如下：
1) 这种方法正确吗？
2) 第二，有人可以引导我到三角形路口吗？
术语三角形相交并不是指射线-三角形相交的数学和过程；我知道。我不知道的是在第一个交叉点之后，如何检查下一次碰撞，如何测试下一个三角形。我需要以什么方式传递 G 缓冲区中的顶点以便遍历它们并检查交叉点（一些示例 glsl 代码很容易理解）？
这是我为了得出那个结论而阅读的link
- https://www.opengl.org/discussion_boards/showthread.php/200487-Ray-intersection-with-GLSL
- https://www.imgtec.com/blog/five-steps-to-adding-ray-tracing-to-an-opengl-es-based-deferred-lighting-system/
- https://learnopengl.com/Advanced-Lighting/Deferred-Shading
- GPU PRO 6 书，第 351-368 页
如果我在堆栈溢出社区中遗漏了任何 link，请在此处 post 他们。
如果有任何与答案相关的答案，我将不胜感激。
提前谢谢你。
我也是自找的，一时难以下手。但这很容易。
你需要将你的网格数据打包成一个RGB(A)纹理
然后将其打包到片段着色器中
关于这项技术的一些非常好的 pfds，这里是一个例子：
http://www.cs.harvard.edu/~sjg/papers/gim.pdf
纹理布局示例：
使用 RGB（Alpha 通道可用于材质索引）
colums colums colums
| 0 | 1 | 2
| R G B | R G B | R G B
|-------------|-----------|-----------
rows| 1 0 0 | |
CPU 边：
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB32F, dataLenght/channels, 1, 0, gl.RGB, gl.FLOAT, meshVerts);
texImage2D reference
GPU 端：
texelFetch(uMeshData, ivec2(vertIndex, 0), 0);
texelFetch reference
一些Resources/LINKS:
用 C++ 编写，但实际上与#version 300 es glsl 着色器的对话并不遥远：
scratchapixel
OpenGL Development Cookbook 有一些 expampels 读取对象到图像到片段
the source on github
我个人认为这是网上最好的 pathtracer：
凭我的一点知识，我可以看出这个人把 Physically Based Rendering 这本书读到了最后
这是了解 concept of computer graphics 的非常好的教程
UPDATE/EDIT:
Peter Shirleys Raytracing in a Weekend 免费下载
我自己的小尝试
(() => {
'use strict';
// vertex
const vs = `#version 300 es\nin vec2 p;out vec2 vuv;void main(){gl_Position = vec4(vuv = p, 0, 1);}`;
// fragment
const fs = `#version 300 es\n
precision highp float;
precision highp int;
precision highp sampler2D;
in vec2 vuv;
uniform float time;
uniform vec2 Res, mouse;
uniform sampler2D uMeshData;
uniform int vertsCount;
layout(location = 0) out lowp vec4 fragColor;
struct Ray {
vec3 orig, dir;
}R_;
mat4 rotate() {
float x = mouse.x, y=mouse.y+sin(time*2.),z=0.;
float a = sin(x), b = cos(x), c = sin(y), d = cos(y), e = sin(z), f = cos(z), ac = a * c, bc = b * c;
return mat4(d * f, d * e, -c, 0.0, ac * f - b * e, ac * e + b * f, a * d, 0.0, bc * f + a * e, bc * e - a * f, b * d, 0.0, 0.0, 0.0, 0.0, 1.0);
}
// https://github.com/Jojendersie/gpugi/blob/5d18526c864bbf09baca02bfab6bcec97b7e1210/gpugi/shader/intersectiontests.glsl#L63
bool isTriangle(Ray ray, in vec3 p0, in vec3 p1, in vec3 p2, out vec3 N) {
vec3 e0 = p1 - p0, e1 = p0 - p2;
N = cross(e1, e0);
vec3 e2 = (1.0 / dot(N, ray.dir)) * (p0 - ray.orig);
vec3 i = cross(ray.dir, e2);
vec3 b = vec3(0.0, dot(i, e1), dot(i, e0));
b.x = 1.0 - (b.z + b.y);
return (dot(N, e2) > 1e-8) && all(greaterThanEqual(b, vec3(0.0)));
}
void Camera(out Ray ray, vec3 lookAt, vec3 up, float angle, float aspect) {
vec3 g = normalize(lookAt - ray.orig);
vec3 u = normalize(cross(g, up));
vec3 v = normalize(cross(u, g));
u = u * tan(radians(angle * .5));
v = v * tan(radians(angle * .5)) / aspect;
ray.dir = normalize(g + ray.dir.x * u + ray.dir.y * v);
}
void main() {
vec3 SceneCol = vec3(0.5);
vec3 hit = vec3(0.);
vec4 a = vec4(0.0), b = vec4(0.0), c = vec4(0.0);
R_ = Ray(vec3(0.0, 0.0, 3.0), vec3(vuv, -1.));
Camera(R_, vec3(0., 0., 1.), vec3(0., 1., 0.), 90.0, (Res.x / Res.y));
float mindist = -1000.0;
// here comes this importend part unpack the texture
for (int i = 0; i < vertsCount; i += 3)
{
a = rotate() * texelFetch(uMeshData, ivec2(i, 0), 0);
b = rotate() * texelFetchOffset(uMeshData, ivec2(i, 0), 0, ivec2(1, 0));
c = rotate() * texelFetchOffset(uMeshData, ivec2(i, 0), 0, ivec2(2, 0));
if (isTriangle(R_, a.xyz, b.xyz, c.xyz, hit))
{
float z = hit.z;
if (z > mindist) {
mindist = z;
SceneCol.rgb = vec3(hit.x, hit.y, 1. - (hit.x - hit.y));
};
}
}
vec3 sky = vec3(0.5, 0.25, 0.1) * (-R_.dir.y - 0.1);
fragColor.rgb = SceneCol + sky;
fragColor.a = 1.0;
}`;
const canvas = document.getElementById('c');
const gl = canvas.getContext('webgl2', {
alpha: !1,
depth: !1,
stencil: !1,
antialias: !1,
premultipliedAlpha: !1,
presereDrawingBuffer: !1,
failIfMajorPerformanceCaveat: !1
});
const { width, height } = canvas.getBoundingClientRect();
gl.canvas.width = width;
gl.canvas.height = height;
// init
const P = gl.createProgram();
const Fp = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(Fp, fs);
gl.compileShader(Fp);
if (!gl.getShaderParameter(Fp, gl.COMPILE_STATUS)) throw '! F r a g: ' + gl.getShaderInfoLog(Fp);
gl.attachShader(P, Fp);
const Vp = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(Vp, vs);
gl.compileShader(Vp);
if (!gl.getShaderParameter(Vp, gl.COMPILE_STATUS)) throw '! V e r t: ' + gl.getShaderInfoLog(Vp);
gl.attachShader(P, Vp);
// link use program
gl.linkProgram(P);
gl.useProgram(P);
// uniform location
const time_loc = gl.getUniformLocation(P, 'time');
const res_loc = gl.getUniformLocation(P, 'Res');
const uLvertices = gl.getUniformLocation(P, 'vertsCount');
const uLSr = gl.getUniformLocation(P, 'uMeshData');
const mouse_loc = gl.getUniformLocation(P, 'mouse');
// free resources
gl.detachShader(P, Fp);
gl.detachShader(P, Vp);
gl.deleteProgram(P);
// fullscreen quad
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Int8Array([-3, 1, 1, -3, 1, 1]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.BYTE, !1, 0, 0);
gl.bindVertexArray(null);
// bind texture
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
// blender 2.79 Icosphere
// export -> *.raw (needs to be enable first under settings)
const verts = [
0.000000, 0.000000, -1.000000, 0.425323, -0.309011, -0.850654, -0.162456, -0.499995, -0.850654,
0.723607, -0.525725, -0.447220, 0.425323, -0.309011, -0.850654, 0.850648, 0.000000, -0.525736,
0.000000, 0.000000, -1.000000, -0.162456, -0.499995, -0.850654, -0.525730, 0.000000, -0.850652,
0.000000, 0.000000, -1.000000, -0.525730, 0.000000, -0.850652, -0.162456, 0.499995, -0.850654,
0.000000, 0.000000, -1.000000, -0.162456, 0.499995, -0.850654, 0.425323, 0.309011, -0.850654,
0.723607, -0.525725, -0.447220, 0.850648, 0.000000, -0.525736, 0.951058, -0.309013, 0.000000,
-0.276388, -0.850649, -0.447220, 0.262869, -0.809012, -0.525738, 0.000000, -1.000000, 0.000000,
-0.894426, 0.000000, -0.447216, -0.688189, -0.499997, -0.525736, -0.951058, -0.309013, 0.000000,
-0.276388, 0.850649, -0.447220, -0.688189, 0.499997, -0.525736, -0.587786, 0.809017, 0.000000,
0.723607, 0.525725, -0.447220, 0.262869, 0.809012, -0.525738, 0.587786, 0.809017, 0.000000,
0.723607, -0.525725, -0.447220, 0.951058, -0.309013, 0.000000, 0.587786, -0.809017, 0.000000,
-0.276388, -0.850649, -0.447220, 0.000000, -1.000000, 0.000000, -0.587786, -0.809017, 0.000000,
-0.894426, 0.000000, -0.447216, -0.951058, -0.309013, 0.000000, -0.951058, 0.309013, 0.000000,
-0.276388, 0.850649, -0.447220, -0.587786, 0.809017, 0.000000, 0.000000, 1.000000, 0.000000,
0.723607, 0.525725, -0.447220, 0.587786, 0.809017, 0.000000, 0.951058, 0.309013, 0.000000,
0.276388, -0.850649, 0.447220, 0.688189, -0.499997, 0.525736, 0.162456, -0.499995, 0.850654,
-0.723607, -0.525725, 0.447220, -0.262869, -0.809012, 0.525738, -0.425323, -0.309011, 0.850654,
-0.723607, 0.525725, 0.447220, -0.850648, 0.000000, 0.525736, -0.425323, 0.309011, 0.850654,
0.276388, 0.850649, 0.447220, -0.262869, 0.809012, 0.525738, 0.162456, 0.499995, 0.850654,
0.894426, 0.000000, 0.447216, 0.688189, 0.499997, 0.525736, 0.525730, 0.000000, 0.850652,
0.525730, 0.000000, 0.850652, 0.162456, 0.499995, 0.850654, 0.000000, 0.000000, 1.000000,
0.525730, 0.000000, 0.850652, 0.688189, 0.499997, 0.525736, 0.162456, 0.499995, 0.850654,
0.688189, 0.499997, 0.525736, 0.276388, 0.850649, 0.447220, 0.162456, 0.499995, 0.850654,
0.162456, 0.499995, 0.850654, -0.425323, 0.309011, 0.850654, 0.000000, 0.000000, 1.000000,
0.162456, 0.499995, 0.850654, -0.262869, 0.809012, 0.525738, -0.425323, 0.309011, 0.850654,
-0.262869, 0.809012, 0.525738, -0.723607, 0.525725, 0.447220, -0.425323, 0.309011, 0.850654,
-0.425323, 0.309011, 0.850654, -0.425323, -0.309011, 0.850654, 0.000000, 0.000000, 1.000000,
-0.425323, 0.309011, 0.850654, -0.850648, 0.000000, 0.525736, -0.425323, -0.309011, 0.850654,
-0.850648, 0.000000, 0.525736, -0.723607, -0.525725, 0.447220, -0.425323, -0.309011, 0.850654,
-0.425323, -0.309011, 0.850654, 0.162456, -0.499995, 0.850654, 0.000000, 0.000000, 1.000000,
-0.425323, -0.309011, 0.850654, -0.262869, -0.809012, 0.525738, 0.162456, -0.499995, 0.850654,
-0.262869, -0.809012, 0.525738, 0.276388, -0.850649, 0.447220, 0.162456, -0.499995, 0.850654,
0.162456, -0.499995, 0.850654, 0.525730, 0.000000, 0.850652, 0.000000, 0.000000, 1.000000,
0.162456, -0.499995, 0.850654, 0.688189, -0.499997, 0.525736, 0.525730, 0.000000, 0.850652,
0.688189, -0.499997, 0.525736, 0.894426, 0.000000, 0.447216, 0.525730, 0.000000, 0.850652,
0.951058, 0.309013, 0.000000, 0.688189, 0.499997, 0.525736, 0.894426, 0.000000, 0.447216,
0.951058, 0.309013, 0.000000, 0.587786, 0.809017, 0.000000, 0.688189, 0.499997, 0.525736,
0.587786, 0.809017, 0.000000, 0.276388, 0.850649, 0.447220, 0.688189, 0.499997, 0.525736,
0.000000, 1.000000, 0.000000, -0.262869, 0.809012, 0.525738, 0.276388, 0.850649, 0.447220,
0.000000, 1.000000, 0.000000, -0.587786, 0.809017, 0.000000, -0.262869, 0.809012, 0.525738,
-0.587786, 0.809017, 0.000000, -0.723607, 0.525725, 0.447220, -0.262869, 0.809012, 0.525738,
-0.951058, 0.309013, 0.000000, -0.850648, 0.000000, 0.525736, -0.723607, 0.525725, 0.447220,
-0.951058, 0.309013, 0.000000, -0.951058, -0.309013, 0.000000, -0.850648, 0.000000, 0.525736,
-0.951058, -0.309013, 0.000000, -0.723607, -0.525725, 0.447220, -0.850648, 0.000000, 0.525736,
-0.587786, -0.809017, 0.000000, -0.262869, -0.809012, 0.525738, -0.723607, -0.525725, 0.447220,
-0.587786, -0.809017, 0.000000, 0.000000, -1.000000, 0.000000, -0.262869, -0.809012, 0.525738,
0.000000, -1.000000, 0.000000, 0.276388, -0.850649, 0.447220, -0.262869, -0.809012, 0.525738,
0.587786, -0.809017, 0.000000, 0.688189, -0.499997, 0.525736, 0.276388, -0.850649, 0.447220,
0.587786, -0.809017, 0.000000, 0.951058, -0.309013, 0.000000, 0.688189, -0.499997, 0.525736,
0.951058, -0.309013, 0.000000, 0.894426, 0.000000, 0.447216, 0.688189, -0.499997, 0.525736,
0.587786, 0.809017, 0.000000, 0.000000, 1.000000, 0.000000, 0.276388, 0.850649, 0.447220,
0.587786, 0.809017, 0.000000, 0.262869, 0.809012, -0.525738, 0.000000, 1.000000, 0.000000,
0.262869, 0.809012, -0.525738, -0.276388, 0.850649, -0.447220, 0.000000, 1.000000, 0.000000,
-0.587786, 0.809017, 0.000000, -0.951058, 0.309013, 0.000000, -0.723607, 0.525725, 0.447220,
-0.587786, 0.809017, 0.000000, -0.688189, 0.499997, -0.525736, -0.951058, 0.309013, 0.000000,
-0.688189, 0.499997, -0.525736, -0.894426, 0.000000, -0.447216, -0.951058, 0.309013, 0.000000,
-0.951058, -0.309013, 0.000000, -0.587786, -0.809017, 0.000000, -0.723607, -0.525725, 0.447220,
-0.951058, -0.309013, 0.000000, -0.688189, -0.499997, -0.525736, -0.587786, -0.809017, 0.000000,
-0.688189, -0.499997, -0.525736, -0.276388, -0.850649, -0.447220, -0.587786, -0.809017, 0.000000,
0.000000, -1.000000, 0.000000, 0.587786, -0.809017, 0.000000, 0.276388, -0.850649, 0.447220,
0.000000, -1.000000, 0.000000, 0.262869, -0.809012, -0.525738, 0.587786, -0.809017, 0.000000,
0.262869, -0.809012, -0.525738, 0.723607, -0.525725, -0.447220, 0.587786, -0.809017, 0.000000,
0.951058, -0.309013, 0.000000, 0.951058, 0.309013, 0.000000, 0.894426, 0.000000, 0.447216,
0.951058, -0.309013, 0.000000, 0.850648, 0.000000, -0.525736, 0.951058, 0.309013, 0.000000,
0.850648, 0.000000, -0.525736, 0.723607, 0.525725, -0.447220, 0.951058, 0.309013, 0.000000,
0.425323, 0.309011, -0.850654, 0.262869, 0.809012, -0.525738, 0.723607, 0.525725, -0.447220,
0.425323, 0.309011, -0.850654, -0.162456, 0.499995, -0.850654, 0.262869, 0.809012, -0.525738,
-0.162456, 0.499995, -0.850654, -0.276388, 0.850649, -0.447220, 0.262869, 0.809012, -0.525738,
-0.162456, 0.499995, -0.850654, -0.688189, 0.499997, -0.525736, -0.276388, 0.850649, -0.447220,
-0.162456, 0.499995, -0.850654, -0.525730, 0.000000, -0.850652, -0.688189, 0.499997, -0.525736,
-0.525730, 0.000000, -0.850652, -0.894426, 0.000000, -0.447216, -0.688189, 0.499997, -0.525736,
-0.525730, 0.000000, -0.850652, -0.688189, -0.499997, -0.525736, -0.894426, 0.000000, -0.447216,
-0.525730, 0.000000, -0.850652, -0.162456, -0.499995, -0.850654, -0.688189, -0.499997, -0.525736,
-0.162456, -0.499995, -0.850654, -0.276388, -0.850649, -0.447220, -0.688189, -0.499997, -0.525736,
0.850648, 0.000000, -0.525736, 0.425323, 0.309011, -0.850654, 0.723607, 0.525725, -0.447220,
0.850648, 0.000000, -0.525736, 0.425323, -0.309011, -0.850654, 0.425323, 0.309011, -0.850654,
0.425323, -0.309011, -0.850654, 0.000000, 0.000000, -1.000000, 0.425323, 0.309011, -0.850654,
-0.162456, -0.499995, -0.850654, 0.262869, -0.809012, -0.525738, -0.276388, -0.850649, -0.447220,
-0.162456, -0.499995, -0.850654, 0.425323, -0.309011, -0.850654, 0.262869, -0.809012, -0.525738,
0.425323, -0.309011, -0.850654, 0.723607, -0.525725, -0.447220, 0.262869, -0.809012, -0.525738,
];
const meshVerts = new Float32Array(verts);
const vertsLenght = meshVerts.length / 3;
gl.uniform1i(uLvertices, vertsLenght);
gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB32F, vertsLenght, 1, 0, gl.RGB, gl.FLOAT, meshVerts);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
// mouse click
let mousePosition = [0, 0];
gl.canvas.addEventListener('mousemove', (e) => {
if (!e.buttons) return;
if (e.buttons == 1) mousePosition = [e.clientX * .01, e.clientY * .01];
}, !1);
// animation
const draw = (clock) => {
clock *= 0.001;
gl.viewport(0.0, 0.0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(uLSr, 0);
gl.uniform1f(time_loc, clock);
gl.uniform2f(mouse_loc, mousePosition[0], mousePosition[1]);
gl.uniform2f(res_loc, width, height);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
requestAnimationFrame(draw);
};
requestAnimationFrame(draw);
})()
<canvas id="c"></canvas>
在我原来的 post 被其他堆栈溢出用户标记为 "too broad" 之后。我将用更少的行重新表述我的问题。我已经在 shadertoy 中实现了一个光线行进器，并且我了解所有关于光线-对象相交的数学知识。我想下一步用网格进行光线追踪。我发现这样做需要通过延迟渲染和帧缓冲区来完成（2 次渲染，一次用于几何，另一次用于照明计算，光线追踪）并且交叉点将发生在光线-三角形交叉点。
当然，我会 post 在接下来的几周内编写一些代码，因为我将开始实施它。我将需要一些具体的帮助，但到那时我将不胜感激，以便现在浪费时间搜索网络。这就是为什么我 post 在这里..
原始 post 已被标记 "too broad"
这是我第一次 post 堆栈溢出。我的目标是编写一个带有网格对象的光线追踪器。
到目前为止，我唯一完成的事情就是制作了一个带有球体和平面的光线追踪器。这是通过前向渲染完成的，同时在片段着色器中创建所有几何体（这很容易产生球体和平面）。
在我进行了所有研究之后，我终于找到了解决方案。这是通过延迟着色技术实现的，您可以在其中创建几何体并将其作为纹理传递给 G 缓冲区，然后在第二次传递中开始计算光照和光线追踪。
我正在寻求指导，因为我花了很多 days/months(3-4) 来得出这个结论，因为我既不熟悉着色器也不熟悉图形库。 我的问题如下：
1) 这种方法正确吗？ 2) 第二，有人可以引导我到三角形路口吗？ 术语三角形相交并不是指射线-三角形相交的数学和过程；我知道。我不知道的是在第一个交叉点之后，如何检查下一次碰撞，如何测试下一个三角形。我需要以什么方式传递 G 缓冲区中的顶点以便遍历它们并检查交叉点（一些示例 glsl 代码很容易理解）？
这是我为了得出那个结论而阅读的link
- https://www.opengl.org/discussion_boards/showthread.php/200487-Ray-intersection-with-GLSL
- https://www.imgtec.com/blog/five-steps-to-adding-ray-tracing-to-an-opengl-es-based-deferred-lighting-system/
- https://learnopengl.com/Advanced-Lighting/Deferred-Shading
- GPU PRO 6 书，第 351-368 页
如果我在堆栈溢出社区中遗漏了任何 link，请在此处 post 他们。
如果有任何与答案相关的答案，我将不胜感激。 提前谢谢你。
我也是自找的，一时难以下手。但这很容易。
你需要将你的网格数据打包成一个RGB(A)纹理
然后将其打包到片段着色器中
关于这项技术的一些非常好的 pfds，这里是一个例子：
http://www.cs.harvard.edu/~sjg/papers/gim.pdf
纹理布局示例：
使用 RGB（Alpha 通道可用于材质索引）
colums colums colums
| 0 | 1 | 2
| R G B | R G B | R G B
|-------------|-----------|-----------
rows| 1 0 0 | |
CPU 边：
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB32F, dataLenght/channels, 1, 0, gl.RGB, gl.FLOAT, meshVerts);
texImage2D reference
GPU 端：
texelFetch(uMeshData, ivec2(vertIndex, 0), 0);
texelFetch reference
一些Resources/LINKS:
用 C++ 编写，但实际上与#version 300 es glsl 着色器的对话并不遥远：
scratchapixel
OpenGL Development Cookbook 有一些 expampels 读取对象到图像到片段
the source on github
我个人认为这是网上最好的 pathtracer：
凭我的一点知识，我可以看出这个人把 Physically Based Rendering 这本书读到了最后
这是了解 concept of computer graphics 的非常好的教程
UPDATE/EDIT:
Peter Shirleys Raytracing in a Weekend 免费下载
我自己的小尝试
(() => {
'use strict';
// vertex
const vs = `#version 300 es\nin vec2 p;out vec2 vuv;void main(){gl_Position = vec4(vuv = p, 0, 1);}`;
// fragment
const fs = `#version 300 es\n
precision highp float;
precision highp int;
precision highp sampler2D;
in vec2 vuv;
uniform float time;
uniform vec2 Res, mouse;
uniform sampler2D uMeshData;
uniform int vertsCount;
layout(location = 0) out lowp vec4 fragColor;
struct Ray {
vec3 orig, dir;
}R_;
mat4 rotate() {
float x = mouse.x, y=mouse.y+sin(time*2.),z=0.;
float a = sin(x), b = cos(x), c = sin(y), d = cos(y), e = sin(z), f = cos(z), ac = a * c, bc = b * c;
return mat4(d * f, d * e, -c, 0.0, ac * f - b * e, ac * e + b * f, a * d, 0.0, bc * f + a * e, bc * e - a * f, b * d, 0.0, 0.0, 0.0, 0.0, 1.0);
}
// https://github.com/Jojendersie/gpugi/blob/5d18526c864bbf09baca02bfab6bcec97b7e1210/gpugi/shader/intersectiontests.glsl#L63
bool isTriangle(Ray ray, in vec3 p0, in vec3 p1, in vec3 p2, out vec3 N) {
vec3 e0 = p1 - p0, e1 = p0 - p2;
N = cross(e1, e0);
vec3 e2 = (1.0 / dot(N, ray.dir)) * (p0 - ray.orig);
vec3 i = cross(ray.dir, e2);
vec3 b = vec3(0.0, dot(i, e1), dot(i, e0));
b.x = 1.0 - (b.z + b.y);
return (dot(N, e2) > 1e-8) && all(greaterThanEqual(b, vec3(0.0)));
}
void Camera(out Ray ray, vec3 lookAt, vec3 up, float angle, float aspect) {
vec3 g = normalize(lookAt - ray.orig);
vec3 u = normalize(cross(g, up));
vec3 v = normalize(cross(u, g));
u = u * tan(radians(angle * .5));
v = v * tan(radians(angle * .5)) / aspect;
ray.dir = normalize(g + ray.dir.x * u + ray.dir.y * v);
}
void main() {
vec3 SceneCol = vec3(0.5);
vec3 hit = vec3(0.);
vec4 a = vec4(0.0), b = vec4(0.0), c = vec4(0.0);
R_ = Ray(vec3(0.0, 0.0, 3.0), vec3(vuv, -1.));
Camera(R_, vec3(0., 0., 1.), vec3(0., 1., 0.), 90.0, (Res.x / Res.y));
float mindist = -1000.0;
// here comes this importend part unpack the texture
for (int i = 0; i < vertsCount; i += 3)
{
a = rotate() * texelFetch(uMeshData, ivec2(i, 0), 0);
b = rotate() * texelFetchOffset(uMeshData, ivec2(i, 0), 0, ivec2(1, 0));
c = rotate() * texelFetchOffset(uMeshData, ivec2(i, 0), 0, ivec2(2, 0));
if (isTriangle(R_, a.xyz, b.xyz, c.xyz, hit))
{
float z = hit.z;
if (z > mindist) {
mindist = z;
SceneCol.rgb = vec3(hit.x, hit.y, 1. - (hit.x - hit.y));
};
}
}
vec3 sky = vec3(0.5, 0.25, 0.1) * (-R_.dir.y - 0.1);
fragColor.rgb = SceneCol + sky;
fragColor.a = 1.0;
}`;
const canvas = document.getElementById('c');
const gl = canvas.getContext('webgl2', {
alpha: !1,
depth: !1,
stencil: !1,
antialias: !1,
premultipliedAlpha: !1,
presereDrawingBuffer: !1,
failIfMajorPerformanceCaveat: !1
});
const { width, height } = canvas.getBoundingClientRect();
gl.canvas.width = width;
gl.canvas.height = height;
// init
const P = gl.createProgram();
const Fp = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(Fp, fs);
gl.compileShader(Fp);
if (!gl.getShaderParameter(Fp, gl.COMPILE_STATUS)) throw '! F r a g: ' + gl.getShaderInfoLog(Fp);
gl.attachShader(P, Fp);
const Vp = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(Vp, vs);
gl.compileShader(Vp);
if (!gl.getShaderParameter(Vp, gl.COMPILE_STATUS)) throw '! V e r t: ' + gl.getShaderInfoLog(Vp);
gl.attachShader(P, Vp);
// link use program
gl.linkProgram(P);
gl.useProgram(P);
// uniform location
const time_loc = gl.getUniformLocation(P, 'time');
const res_loc = gl.getUniformLocation(P, 'Res');
const uLvertices = gl.getUniformLocation(P, 'vertsCount');
const uLSr = gl.getUniformLocation(P, 'uMeshData');
const mouse_loc = gl.getUniformLocation(P, 'mouse');
// free resources
gl.detachShader(P, Fp);
gl.detachShader(P, Vp);
gl.deleteProgram(P);
// fullscreen quad
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Int8Array([-3, 1, 1, -3, 1, 1]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.BYTE, !1, 0, 0);
gl.bindVertexArray(null);
// bind texture
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
// blender 2.79 Icosphere
// export -> *.raw (needs to be enable first under settings)
const verts = [
0.000000, 0.000000, -1.000000, 0.425323, -0.309011, -0.850654, -0.162456, -0.499995, -0.850654,
0.723607, -0.525725, -0.447220, 0.425323, -0.309011, -0.850654, 0.850648, 0.000000, -0.525736,
0.000000, 0.000000, -1.000000, -0.162456, -0.499995, -0.850654, -0.525730, 0.000000, -0.850652,
0.000000, 0.000000, -1.000000, -0.525730, 0.000000, -0.850652, -0.162456, 0.499995, -0.850654,
0.000000, 0.000000, -1.000000, -0.162456, 0.499995, -0.850654, 0.425323, 0.309011, -0.850654,
0.723607, -0.525725, -0.447220, 0.850648, 0.000000, -0.525736, 0.951058, -0.309013, 0.000000,
-0.276388, -0.850649, -0.447220, 0.262869, -0.809012, -0.525738, 0.000000, -1.000000, 0.000000,
-0.894426, 0.000000, -0.447216, -0.688189, -0.499997, -0.525736, -0.951058, -0.309013, 0.000000,
-0.276388, 0.850649, -0.447220, -0.688189, 0.499997, -0.525736, -0.587786, 0.809017, 0.000000,
0.723607, 0.525725, -0.447220, 0.262869, 0.809012, -0.525738, 0.587786, 0.809017, 0.000000,
0.723607, -0.525725, -0.447220, 0.951058, -0.309013, 0.000000, 0.587786, -0.809017, 0.000000,
-0.276388, -0.850649, -0.447220, 0.000000, -1.000000, 0.000000, -0.587786, -0.809017, 0.000000,
-0.894426, 0.000000, -0.447216, -0.951058, -0.309013, 0.000000, -0.951058, 0.309013, 0.000000,
-0.276388, 0.850649, -0.447220, -0.587786, 0.809017, 0.000000, 0.000000, 1.000000, 0.000000,
0.723607, 0.525725, -0.447220, 0.587786, 0.809017, 0.000000, 0.951058, 0.309013, 0.000000,
0.276388, -0.850649, 0.447220, 0.688189, -0.499997, 0.525736, 0.162456, -0.499995, 0.850654,
-0.723607, -0.525725, 0.447220, -0.262869, -0.809012, 0.525738, -0.425323, -0.309011, 0.850654,
-0.723607, 0.525725, 0.447220, -0.850648, 0.000000, 0.525736, -0.425323, 0.309011, 0.850654,
0.276388, 0.850649, 0.447220, -0.262869, 0.809012, 0.525738, 0.162456, 0.499995, 0.850654,
0.894426, 0.000000, 0.447216, 0.688189, 0.499997, 0.525736, 0.525730, 0.000000, 0.850652,
0.525730, 0.000000, 0.850652, 0.162456, 0.499995, 0.850654, 0.000000, 0.000000, 1.000000,
0.525730, 0.000000, 0.850652, 0.688189, 0.499997, 0.525736, 0.162456, 0.499995, 0.850654,
0.688189, 0.499997, 0.525736, 0.276388, 0.850649, 0.447220, 0.162456, 0.499995, 0.850654,
0.162456, 0.499995, 0.850654, -0.425323, 0.309011, 0.850654, 0.000000, 0.000000, 1.000000,
0.162456, 0.499995, 0.850654, -0.262869, 0.809012, 0.525738, -0.425323, 0.309011, 0.850654,
-0.262869, 0.809012, 0.525738, -0.723607, 0.525725, 0.447220, -0.425323, 0.309011, 0.850654,
-0.425323, 0.309011, 0.850654, -0.425323, -0.309011, 0.850654, 0.000000, 0.000000, 1.000000,
-0.425323, 0.309011, 0.850654, -0.850648, 0.000000, 0.525736, -0.425323, -0.309011, 0.850654,
-0.850648, 0.000000, 0.525736, -0.723607, -0.525725, 0.447220, -0.425323, -0.309011, 0.850654,
-0.425323, -0.309011, 0.850654, 0.162456, -0.499995, 0.850654, 0.000000, 0.000000, 1.000000,
-0.425323, -0.309011, 0.850654, -0.262869, -0.809012, 0.525738, 0.162456, -0.499995, 0.850654,
-0.262869, -0.809012, 0.525738, 0.276388, -0.850649, 0.447220, 0.162456, -0.499995, 0.850654,
0.162456, -0.499995, 0.850654, 0.525730, 0.000000, 0.850652, 0.000000, 0.000000, 1.000000,
0.162456, -0.499995, 0.850654, 0.688189, -0.499997, 0.525736, 0.525730, 0.000000, 0.850652,
0.688189, -0.499997, 0.525736, 0.894426, 0.000000, 0.447216, 0.525730, 0.000000, 0.850652,
0.951058, 0.309013, 0.000000, 0.688189, 0.499997, 0.525736, 0.894426, 0.000000, 0.447216,
0.951058, 0.309013, 0.000000, 0.587786, 0.809017, 0.000000, 0.688189, 0.499997, 0.525736,
0.587786, 0.809017, 0.000000, 0.276388, 0.850649, 0.447220, 0.688189, 0.499997, 0.525736,
0.000000, 1.000000, 0.000000, -0.262869, 0.809012, 0.525738, 0.276388, 0.850649, 0.447220,
0.000000, 1.000000, 0.000000, -0.587786, 0.809017, 0.000000, -0.262869, 0.809012, 0.525738,
-0.587786, 0.809017, 0.000000, -0.723607, 0.525725, 0.447220, -0.262869, 0.809012, 0.525738,
-0.951058, 0.309013, 0.000000, -0.850648, 0.000000, 0.525736, -0.723607, 0.525725, 0.447220,
-0.951058, 0.309013, 0.000000, -0.951058, -0.309013, 0.000000, -0.850648, 0.000000, 0.525736,
-0.951058, -0.309013, 0.000000, -0.723607, -0.525725, 0.447220, -0.850648, 0.000000, 0.525736,
-0.587786, -0.809017, 0.000000, -0.262869, -0.809012, 0.525738, -0.723607, -0.525725, 0.447220,
-0.587786, -0.809017, 0.000000, 0.000000, -1.000000, 0.000000, -0.262869, -0.809012, 0.525738,
0.000000, -1.000000, 0.000000, 0.276388, -0.850649, 0.447220, -0.262869, -0.809012, 0.525738,
0.587786, -0.809017, 0.000000, 0.688189, -0.499997, 0.525736, 0.276388, -0.850649, 0.447220,
0.587786, -0.809017, 0.000000, 0.951058, -0.309013, 0.000000, 0.688189, -0.499997, 0.525736,
0.951058, -0.309013, 0.000000, 0.894426, 0.000000, 0.447216, 0.688189, -0.499997, 0.525736,
0.587786, 0.809017, 0.000000, 0.000000, 1.000000, 0.000000, 0.276388, 0.850649, 0.447220,
0.587786, 0.809017, 0.000000, 0.262869, 0.809012, -0.525738, 0.000000, 1.000000, 0.000000,
0.262869, 0.809012, -0.525738, -0.276388, 0.850649, -0.447220, 0.000000, 1.000000, 0.000000,
-0.587786, 0.809017, 0.000000, -0.951058, 0.309013, 0.000000, -0.723607, 0.525725, 0.447220,
-0.587786, 0.809017, 0.000000, -0.688189, 0.499997, -0.525736, -0.951058, 0.309013, 0.000000,
-0.688189, 0.499997, -0.525736, -0.894426, 0.000000, -0.447216, -0.951058, 0.309013, 0.000000,
-0.951058, -0.309013, 0.000000, -0.587786, -0.809017, 0.000000, -0.723607, -0.525725, 0.447220,
-0.951058, -0.309013, 0.000000, -0.688189, -0.499997, -0.525736, -0.587786, -0.809017, 0.000000,
-0.688189, -0.499997, -0.525736, -0.276388, -0.850649, -0.447220, -0.587786, -0.809017, 0.000000,
0.000000, -1.000000, 0.000000, 0.587786, -0.809017, 0.000000, 0.276388, -0.850649, 0.447220,
0.000000, -1.000000, 0.000000, 0.262869, -0.809012, -0.525738, 0.587786, -0.809017, 0.000000,
0.262869, -0.809012, -0.525738, 0.723607, -0.525725, -0.447220, 0.587786, -0.809017, 0.000000,
0.951058, -0.309013, 0.000000, 0.951058, 0.309013, 0.000000, 0.894426, 0.000000, 0.447216,
0.951058, -0.309013, 0.000000, 0.850648, 0.000000, -0.525736, 0.951058, 0.309013, 0.000000,
0.850648, 0.000000, -0.525736, 0.723607, 0.525725, -0.447220, 0.951058, 0.309013, 0.000000,
0.425323, 0.309011, -0.850654, 0.262869, 0.809012, -0.525738, 0.723607, 0.525725, -0.447220,
0.425323, 0.309011, -0.850654, -0.162456, 0.499995, -0.850654, 0.262869, 0.809012, -0.525738,
-0.162456, 0.499995, -0.850654, -0.276388, 0.850649, -0.447220, 0.262869, 0.809012, -0.525738,
-0.162456, 0.499995, -0.850654, -0.688189, 0.499997, -0.525736, -0.276388, 0.850649, -0.447220,
-0.162456, 0.499995, -0.850654, -0.525730, 0.000000, -0.850652, -0.688189, 0.499997, -0.525736,
-0.525730, 0.000000, -0.850652, -0.894426, 0.000000, -0.447216, -0.688189, 0.499997, -0.525736,
-0.525730, 0.000000, -0.850652, -0.688189, -0.499997, -0.525736, -0.894426, 0.000000, -0.447216,
-0.525730, 0.000000, -0.850652, -0.162456, -0.499995, -0.850654, -0.688189, -0.499997, -0.525736,
-0.162456, -0.499995, -0.850654, -0.276388, -0.850649, -0.447220, -0.688189, -0.499997, -0.525736,
0.850648, 0.000000, -0.525736, 0.425323, 0.309011, -0.850654, 0.723607, 0.525725, -0.447220,
0.850648, 0.000000, -0.525736, 0.425323, -0.309011, -0.850654, 0.425323, 0.309011, -0.850654,
0.425323, -0.309011, -0.850654, 0.000000, 0.000000, -1.000000, 0.425323, 0.309011, -0.850654,
-0.162456, -0.499995, -0.850654, 0.262869, -0.809012, -0.525738, -0.276388, -0.850649, -0.447220,
-0.162456, -0.499995, -0.850654, 0.425323, -0.309011, -0.850654, 0.262869, -0.809012, -0.525738,
0.425323, -0.309011, -0.850654, 0.723607, -0.525725, -0.447220, 0.262869, -0.809012, -0.525738,
];
const meshVerts = new Float32Array(verts);
const vertsLenght = meshVerts.length / 3;
gl.uniform1i(uLvertices, vertsLenght);
gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB32F, vertsLenght, 1, 0, gl.RGB, gl.FLOAT, meshVerts);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
// mouse click
let mousePosition = [0, 0];
gl.canvas.addEventListener('mousemove', (e) => {
if (!e.buttons) return;
if (e.buttons == 1) mousePosition = [e.clientX * .01, e.clientY * .01];
}, !1);
// animation
const draw = (clock) => {
clock *= 0.001;
gl.viewport(0.0, 0.0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(uLSr, 0);
gl.uniform1f(time_loc, clock);
gl.uniform2f(mouse_loc, mousePosition[0], mousePosition[1]);
gl.uniform2f(res_loc, width, height);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
requestAnimationFrame(draw);
};
requestAnimationFrame(draw);
})()
<canvas id="c"></canvas>