3

この後処理の例http://mrdoob.github.com/three.js/examples/webgl_postprocessing_dof.htmlを適応させて、被写界深度/ボケ効果を適用しました。フォーカス範囲 (またはそれを呼び出すことができるもの) を指定するにはどうすればよいですか?

カメラのファー プレーンが 10000 で、モデル サイズが 10 の場合、モデルの個々の部分に焦点を合わせることができませんでした。 （カメラとモデルの背面の間）、実際の関心領域。

カメラのファープレーンをできるだけ低く（シーンサイズとほぼ同じに）設定することに気付いた後、うまく機能したので、実際のモデルがどこにあるかに焦点を合わせることができます。

スカイボックスを追加したため、カメラのファー プレーン トリックを実行できなくなりました。そのため、カメラは、モデル サイズにかなり関連するファー プレーンを持つ必要があります。それは被写界深度を台無しにします。非常に近くまたは非常に遠くに焦点を合わせることができますが、調整可能な距離が大きすぎるため (スカイボックスまでずっと)、モデル全体が完全にぼやけているか、まったくぼやけていません。

焦点を当てたい領域がわかっている場合、コードでそれを指定するにはどうすればよいですか?

ここに私のセットアップコードがあります:

dof_material_depth = new THREE.MeshDepthMaterial();
dof_scene = new THREE.Scene();

dof_camera = new THREE.OrthographicCamera(SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2,  SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
dof_camera.position.z = 100;

dof_scene.add( dof_camera );

var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
dof_rtTextureDepth = new THREE.WebGLRenderTarget(SCREEN_WIDTH, SCREEN_HEIGHT, pars );
dof_rtTextureColor = new THREE.WebGLRenderTarget(SCREEN_WIDTH, SCREEN_HEIGHT, pars );

dof_bokeh_shader = THREE.BokehShader;

dof_bokeh_uniforms = THREE.UniformsUtils.clone(dof_bokeh_shader.uniforms );
dof_bokeh_uniforms[ "tColor" ].value = dof_rtTextureColor;
dof_bokeh_uniforms[ "tDepth" ].value = dof_rtTextureDepth;
dof_bokeh_uniforms[ "focus" ].value = 1.1;
dof_bokeh_uniforms[ "aspect" ].value = SCREEN_WIDTH / SCREEN_HEIGHT;

dof_materialBokeh = new THREE.ShaderMaterial( {
  uniforms: dof_bokeh_uniforms,
  vertexShader: dof_bokeh_shader.vertexShader,
  fragmentShader: dof_bokeh_shader.fragmentShader
 });

 dof_quad = new THREE.Mesh( new THREE.PlaneGeometry(SCREEN_WIDTH, SCREEN_HEIGHT), dof_materialBokeh );

dof_quad.position.z = -500;
dof_scene.add(dof_quad );

そして、ここにレンダリング部分があります:

renderer.render(scene, camera, dof_rtTextureColor, true );

scene.overrideMaterial = dof_material_depth;
renderer.render(scene, camera, dof_rtTextureDepth, true );

dof_scene.overrideMaterial = null;
render(dof_scene, dof_camera );

var delta = 0.01;
composerScene.render( delta);

編集：

深度マテリアルをレンダリングする直前にカメラのファー プレーンを低く設定し、コンポジットをレンダリングする前に通常の状態に戻すことで、望ましい結果を得ることができました。

renderer.render(scene, camera, dof_rtTextureColor, true );

var oldfar = camera.far; // this goes to skybox
camera.far = scenesize; // this goes to just behind the model

scene.overrideMaterial = dof_material_depth;
renderer.render(scene, camera, dof_rtTextureDepth, true );

camera.far = oldfar;

dof_scene.overrideMaterial = null;
render(dof_scene, dof_camera );

var delta = 0.01;
composerScene.render( delta);

これは完璧に機能します。ただし、私はWebGLL / 3Dプログラミング全般にまったく慣れていないので、質問を開いたままにしておきます.

4

0 に答える 0