如果不使用像 three.js 這樣的庫，我將如何在 webgl 中進行環境反射？

Question

我正在嘗試弄清楚如何將環境映射到 object。這是設置：

我怎樣才能讓茶壺的表面反映出它周圍的環境？ 所以我的意思是，茶壺不是那種灰色陰影，它的表面應該反映它的環境，所以它應該將棋盤映射到它的表面上。

這是我想要完成的示例，但它使用Three.js ，我想自己完成（這是一個班級）。

http://aerotwist.com/tutorials/create-your-own-environment-maps/demo/

這有意義嗎？ 我將如何開始？

---

跟進

我在完成作業后回答了這個問題： https://stackoverflow.com/a/10093646/196921 。 請參閱鏈接和代碼的答案:)

Answer 1

我在這里找到了這個茶壺的一個很好的例子......

https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/google/shiny-teapot/index.html

通過查看源代碼，我找到了我要找的東西：

function loadCubeMap(base, suffix) {
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

    var faces = [["posx.png", gl.TEXTURE_CUBE_MAP_POSITIVE_X],
                 ["negx.png", gl.TEXTURE_CUBE_MAP_NEGATIVE_X],
                 ["posy.png", gl.TEXTURE_CUBE_MAP_POSITIVE_Y],
                 ["negy.png", gl.TEXTURE_CUBE_MAP_NEGATIVE_Y],
                 ["posz.png", gl.TEXTURE_CUBE_MAP_POSITIVE_Z],
                 ["negz.png", gl.TEXTURE_CUBE_MAP_NEGATIVE_Z]];
    for (var i = 0; i < faces.length; i++) {
        var face = faces[i][1];
        var image = new Image();
        image.onload = function(texture, face, image) {
            return function() {
                gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
                gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
                gl.texImage2D(face, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
            }
        } (texture, face, image);
        image.src = faces[i][0];
    }
    return texture;
}

...和示例片段着色器（它比我需要的環境反射映射更多）...

precision mediump float;
const float bumpHeight = 0.2;

uniform sampler2D normalSampler;
uniform samplerCube envSampler;

varying vec2 texCoord;
varying vec3 worldEyeVec;
varying vec3 worldNormal;
varying vec3 worldTangent;
varying vec3 worldBinorm;

void main() {
    vec2 bump = (texture2D(normalSampler texCoord.xy).xy * 2.0 - 1.0) * bumpHeight;
    vec3 normal = normalize(worldNormal);
    vec3 tangent = normalize(worldTangent);
    vec3 binormal = normalize(worldBinorm);
    vec3 nb = normal + bump.x * tangent + bump.y * binormal;
    nb = normalize(nb);
    vec3 worldEye = normalize(worldEyeVec);
    vec3 lookup = reflect(worldEye nb);
    vec4 color = textureCube(envSampler, lookup);  // <--- this was the aha! line
    gl_FragColor = color;
}

結果出來有點酷...

歡迎訪問http://hristo.oskov.com/projects/cs418/mp3/ 查看。 源代碼就在那里……代碼很爛所以請不要評判我:)這是主要的 JS 文件： http://hristo.oskov.com/projects/cs418/mp3/js/mp3 .js 。 着色器位於 index.html 頁面中，因此只需查看源代碼即可。

Answer 2

渲染反射 object 的基本方法是：

1. 將相機放在 object 的中心，將場景渲染到六個紋理上，代表 object 周圍立方體的六個面的視圖。
2. 編寫一個片段着色器，反射穿過表面法線的視線，並追蹤到與立方體相交的位置，以找到在反射中看到的顏色。

（我自己從來沒有真正做過這個，但我看過 這樣的教程）。