8

オブジェクトに環境マッピングを行う方法を理解しようとしています。設定は次のとおりです。

ティーポット

ティーポットの表面に周囲を反映させるにはどうすればよいですか？つまり、ティーポットが灰色の色合いである代わりに、その表面はその環境を反映している必要があるため、チェッカーボードをその表面にマッピングする必要があります。

これは私が達成しようとしていることの例ですが、Three.jsを使用しており、自分でこれを実行したいと考えています（これはクラス用です）。

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

これは意味がありますか？どうすれば始められますか？

ファローアップ

宿題を終えた後、この質問に答えました：https ://stackoverflow.com/a/10093646/196921 。リンクとコードについては回答を参照してください:)

4

2 に答える 2

12

ここでこのティーポットの良い例を見つけました...

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ページにあるので、ソースを表示するだけです。

于 2012-04-10T17:36:46.410 に答える
2

反射オブジェクトをレンダリングするための基本的なアプローチは次のとおりです。

  1. カメラをオブジェクトの中心に配置し、そのオブジェクトの周りの立方体の 6 つの面からのビューを表す 6 つのテクスチャにシーンをレンダリングします。
  2. 表面法線を横切って視線を反射し、それが立方体と交差する場所までトレースして、反射で見られる色を見つけるフラグメント シェーダーを作成します。

(私は実際にこれを自分で行ったことはありませんが、このようなチュートリアルを見たことがあります)。

于 2012-04-09T20:53:50.167 に答える