Three.js: Beispielartefakte für WebGL-Spiegel

Erstellt am 17. Aug. 2017  ·  5Kommentare  ·  Quelle: mrdoob/three.js

Artefakte können reproduziert werden, indem die Kamera vergrößert und etwas bewegt wird.

https://threejs.org/examples/webgl_mirror.html

screen shot 2017-08-16 at 8 53 26 pm

Three.js Version
  • [x] Dev
  • [x] r86
Browser
  • [x] Chrome
Betriebssystem
  • [x] macOS
Bug

Hilfreichster Kommentar

@mrdoob Wenn Sie immer noch

//mirrorCamera.up.set( 0, - 1, 0 );
//mirrorCamera.up.applyMatrix4( rotationMatrix );
//mirrorCamera.up.reflect( normal ).negate();

mirrorCamera.up.set( 0, 1, 0 ).applyMatrix4( rotationMatrix ).reflect( normal );

Alle 5 Kommentare

Tatsächlich.
Siehe auch dieses Thema: https://github.com/mrdoob/three.js/issues/11885
Am Ende habe ich das Gefühl, dass der Spiegel nicht richtig implementiert ist.

Das Seitenverhältnis der Hauptkamera wird niemals auf die Spiegelkamera kopiert.

// "examples/Mirror.js" (lines 142-146)
mirrorCamera.near = camera.near;
mirrorCamera.far = camera.far;
mirrorCamera.updateMatrixWorld();
mirrorCamera.updateProjectionMatrix();

Sollte geändert werden zu:

mirrorCamera.updateMatrixWorld();
mirrorCamera.projectionMatrix.copy(camera.projectionMatrix);

Ich werde später eine PR dafür schicken!

Ein weiteres Problem mit dem Spiegel (und dem planaren Ozean) ist, dass es nicht zu funktionieren scheint, wenn logarithmicDepthBuffer aktiviert ist. Schräge Beschneidungen in der Nähe von Flugzeugen mit der Tiefe und ich habe nie eine Lösung dafür gefunden. Ich wünschte, WebGL hätte glClipPlane 😞

@vanruesc Ich habe mit dem Code

@mrdoob Wenn Sie immer noch

//mirrorCamera.up.set( 0, - 1, 0 );
//mirrorCamera.up.applyMatrix4( rotationMatrix );
//mirrorCamera.up.reflect( normal ).negate();

mirrorCamera.up.set( 0, 1, 0 ).applyMatrix4( rotationMatrix ).reflect( normal );

@ WestLangley Danke!

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen