对数深度缓冲器+正交相机

2024-01-30

我正在尝试将对数深度缓冲区与正交相机一起使用，并遇到一些有趣的结果。我在这里构建了一个示例：http://jsfiddle.net/TheJim01/05up96m0/ http://jsfiddle.net/TheJim01/05up96m0/

左侧的渲染器（红结）使用标准线性深度缓冲区（1 to 1000）。选择透视或正交将使用选定的相机类型重新渲染场景，并且两者看起来都按预期工作。

右侧的渲染器（绿色结）使用对数深度缓冲区（1e-6 to 1e27）。与左侧示例一样，选择相机将使用该相机重新渲染场景。但在这种情况下，只有透视相机可以按预期工作。当选择“正交”时，结“解开”。看起来几乎根本没有考虑深度缓冲区。

是我用错了，还是有其他问题？

var WIDTH = 250,
  HEIGHT = 250,
  BACKGROUND = 0xcccccc;

var gl1 = new THREE.WebGLRenderer({
    antialias: true,
    logarithmicDepthBuffer: false
  }),
  gl2 = new THREE.WebGLRenderer({
    antialias: true,
    logarithmicDepthBuffer: true
  }),
  scene1 = new THREE.Scene(),
  scene2 = new THREE.Scene(),
  s1pCam = new THREE.PerspectiveCamera(
    28,
    WIDTH / HEIGHT,
    1,
    1000
  ),
  s1oCam = new THREE.OrthographicCamera(-1 * (WIDTH / HEIGHT),
    1 * (WIDTH / HEIGHT),
    1, -1,
    1,
    1000),
  aLight1 = new THREE.AmbientLight(0x333333),
  dLight1 = new THREE.DirectionalLight(0xffffff, 0.75);

s1pCam.position.set(0, 0, 100);
s1pCam.lookAt(scene1.position);
s1oCam.position.set(0, 0, 100);
s1oCam.lookAt(scene1.position);
dLight1.position.set(0, 0, 100);
dLight1.lookAt(new THREE.Vector3(0, 0, -1));

// calculate ortho frustum
var modelCenter = new THREE.Vector3(),
  tmpCamPosition = s1pCam.position.clone(),
  camTarget = new THREE.Vector3(),
  radFOV = (Math.PI / 180.) * s1pCam.fov;
modelCenter.sub(camTarget);
tmpCamPosition.sub(camTarget);
var projectedLocation = modelCenter.projectOnVector(tmpCamPosition);
var distance = tmpCamPosition.distanceTo(projectedLocation);
var halfHeight = Math.tan(radFOV / 2.) * distance;
var halfWidth = halfHeight * s1pCam.aspect;
s1oCam.left = -halfWidth;
s1oCam.right = halfWidth;
s1oCam.top = halfHeight;
s1oCam.bottom = -halfHeight;
s1oCam.zoom = s1pCam.zoom;
s1oCam.updateProjectionMatrix();

var s2pCam = s1pCam.clone(),
  s2oCam = s1oCam.clone(),
  aLight2 = aLight1.clone(),
  dLight2 = dLight1.clone();

s2pCam.near = 1e-6;
s2pCam.far = 1e27;
s2oCam.near = 1e-6;
s2oCam.far = 1e27;

scene1.add(s1pCam);
scene1.add(s1oCam);
scene1.add(aLight1);
scene1.add(dLight1);
scene1.add(new THREE.Mesh(new THREE.TorusKnotGeometry(10, 4, 100, 32), new THREE.MeshPhongMaterial({
  color: 'red'
})));

scene2.add(s2pCam);
scene2.add(s2oCam);
scene2.add(aLight2);
scene2.add(dLight2);
scene2.add(new THREE.Mesh(new THREE.TorusKnotGeometry(10, 4, 100, 32), new THREE.MeshPhongMaterial({
  color: 'green'
})));

document.getElementById("view1").appendChild(gl1.domElement);
document.getElementById("view2").appendChild(gl2.domElement);

gl1.setSize(WIDTH, HEIGHT);
gl1.setClearColor(BACKGROUND);

gl2.setSize(WIDTH, HEIGHT);
gl2.setClearColor(BACKGROUND);

gl1.render(scene1, s1pCam);
gl2.render(scene2, s2pCam);

function handleCameraChanges(e) {
  debugger;
  if (gl1 && e.target.id.indexOf("1") !== -1) {
    gl1.render(scene1, (e.target.id.indexOf("p") !== -1) ? s1pCam : s1oCam);
  } else if (gl2) {
    gl2.render(scene2, (e.target.id.indexOf("p") !== -1) ? s2pCam : s2oCam);
  }
}

document.getElementById("v1p").addEventListener("click", handleCameraChanges);
document.getElementById("v1o").addEventListener("click", handleCameraChanges);
document.getElementById("v2p").addEventListener("click", handleCameraChanges);
document.getElementById("v2o").addEventListener("click", handleCameraChanges);

.view {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js"></script>

<fieldset id="view1" class="view">
  <legend>Standard Depth Buffer</legend>
  <label><input id="v1p" type="radio" name="cameraMode1" checked />Perspective</label>
  <label><input id="v1o" type="radio" name="cameraMode1" />Orthographic</label><br>
</fieldset>

<fieldset id="view2" class="view">
  <legend>Logarithmic Depth Buffer</legend>
  <label><input id="v2p" type="radio" name="cameraMode2" checked />Perspective</label>
  <label><input id="v2o" type="radio" name="cameraMode2" />Orthographic</label><br></fieldset>

这个问题已经在 PR 中解决了17442 https://github.com/mrdoob/three.js/pull/17442，将于 r109 中发布。

r109于2019年9月30日发布 https://github.com/mrdoob/three.js/releases/tag/r109.

这是与上面完全相同的示例，使用 r109。感谢所有参与修复的人！

var WIDTH = 250,
  HEIGHT = 250,
  BACKGROUND = 0xcccccc;

var gl1 = new THREE.WebGLRenderer({
    antialias: true,
    logarithmicDepthBuffer: false
  }),
  gl2 = new THREE.WebGLRenderer({
    antialias: true,
    logarithmicDepthBuffer: true
  }),
  scene1 = new THREE.Scene(),
  scene2 = new THREE.Scene(),
  s1pCam = new THREE.PerspectiveCamera(
    28,
    WIDTH / HEIGHT,
    1,
    1000
  ),
  s1oCam = new THREE.OrthographicCamera(-1 * (WIDTH / HEIGHT),
    1 * (WIDTH / HEIGHT),
    1, -1,
    1,
    1000),
  aLight1 = new THREE.AmbientLight(0x333333),
  dLight1 = new THREE.DirectionalLight(0xffffff, 0.75);

s1pCam.position.set(0, 0, 100);
s1pCam.lookAt(scene1.position);
s1oCam.position.set(0, 0, 100);
s1oCam.lookAt(scene1.position);
dLight1.position.set(0, 0, 100);
dLight1.lookAt(new THREE.Vector3(0, 0, -1));

// calculate ortho frustum
var modelCenter = new THREE.Vector3(),
  tmpCamPosition = s1pCam.position.clone(),
  camTarget = new THREE.Vector3(),
  radFOV = (Math.PI / 180.) * s1pCam.fov;
modelCenter.sub(camTarget);
tmpCamPosition.sub(camTarget);
var projectedLocation = modelCenter.projectOnVector(tmpCamPosition);
var distance = tmpCamPosition.distanceTo(projectedLocation);
var halfHeight = Math.tan(radFOV / 2.) * distance;
var halfWidth = halfHeight * s1pCam.aspect;
s1oCam.left = -halfWidth;
s1oCam.right = halfWidth;
s1oCam.top = halfHeight;
s1oCam.bottom = -halfHeight;
s1oCam.zoom = s1pCam.zoom;
s1oCam.updateProjectionMatrix();

var s2pCam = s1pCam.clone(),
  s2oCam = s1oCam.clone(),
  aLight2 = aLight1.clone(),
  dLight2 = dLight1.clone();

s2pCam.near = 1e-6;
s2pCam.far = 1e27;
s2oCam.near = 1e-6;
s2oCam.far = 1e27;

scene1.add(s1pCam);
scene1.add(s1oCam);
scene1.add(aLight1);
scene1.add(dLight1);
scene1.add(new THREE.Mesh(new THREE.TorusKnotGeometry(10, 4, 100, 32), new THREE.MeshPhongMaterial({
  color: 'red'
})));

scene2.add(s2pCam);
scene2.add(s2oCam);
scene2.add(aLight2);
scene2.add(dLight2);
scene2.add(new THREE.Mesh(new THREE.TorusKnotGeometry(10, 4, 100, 32), new THREE.MeshPhongMaterial({
  color: 'green'
})));

document.getElementById("view1").appendChild(gl1.domElement);
document.getElementById("view2").appendChild(gl2.domElement);

gl1.setSize(WIDTH, HEIGHT);
gl1.setClearColor(BACKGROUND);

gl2.setSize(WIDTH, HEIGHT);
gl2.setClearColor(BACKGROUND);

gl1.render(scene1, s1pCam);
gl2.render(scene2, s2pCam);

function handleCameraChanges(e) {
  debugger;
  if (gl1 && e.target.id.indexOf("1") !== -1) {
    gl1.render(scene1, (e.target.id.indexOf("p") !== -1) ? s1pCam : s1oCam);
  } else if (gl2) {
    gl2.render(scene2, (e.target.id.indexOf("p") !== -1) ? s2pCam : s2oCam);
  }
}

document.getElementById("v1p").addEventListener("click", handleCameraChanges);
document.getElementById("v1o").addEventListener("click", handleCameraChanges);
document.getElementById("v2p").addEventListener("click", handleCameraChanges);
document.getElementById("v2o").addEventListener("click", handleCameraChanges);

.view {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>

<fieldset id="view1" class="view">
  <legend>Standard Depth Buffer</legend>
  <label><input id="v1p" type="radio" name="cameraMode1" checked />Perspective</label>
  <label><input id="v1o" type="radio" name="cameraMode1" />Orthographic</label><br>
</fieldset>

<fieldset id="view2" class="view">
  <legend>Logarithmic Depth Buffer</legend>
  <label><input id="v2p" type="radio" name="cameraMode2" checked />Perspective</label>
  <label><input id="v2o" type="radio" name="cameraMode2" />Orthographic</label><br></fieldset>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

threeJs

对数深度缓冲器+正交相机的相关文章

使用三个 JS 和 React JS 加载 GLTF 模型

我使用 React JS 加载从 sketchfab 下载的 GLTF 文件时遇到问题当我尝试在不使用React 使用常规index html和index js 的情况下执行此操作时它可以工作但是当我将代码带入React应用程序时它
在 React 中渲染 Three.js 元素？

我正在尝试制作一个渲染 Three js 场景的 React 组件但是每当我尝试安装组件而不是看到正在渲染的任何类型的场景时我只看到文本 object HTMLCanvasElement 正在显示这是我的组件 import Reac
Three.js：通过触摸和设备方向旋转相机

我正在使用 Threejs 制作一个 3D 项目它允许使用计算机设备的鼠标控制相机还允许使用触摸事件和智能手机的设备方向事件进行控制举个例子这个网站 http lacostewinter seeourwork cn en intro
使用 ThreeJS 获取球体纹理上的点击位置

目前我有一个带有纹理的球体它绕 y 轴旋转我还有在 3D 空间中单击的位置以及球体上的旋转位置我认为目标获取纹理上的位置例如我想获取我点击的图像的哪个方块参见示例球体和下图在实践中我不会使用此图像但我觉得这将是一个
Three.js 光线投射器可以与组相交吗？

我想知道我的光线投射器是否正在查看我已加载的 OBJ 由于从 Cinema4D 导出的方式我相信 OBJ 是一个具有 3 个子级的 THREE Group 而不是 THREE Object 我可以更改我的 raycaster 代码行来查找
Three.js 设置并读取相机外观向量

而不是使用camera rotation或lookAt 函数旋转相机我想将外观矢量直接传递给相机是否可以直接设置相机外观矢量以及是否可以从相机读取外观矢量相机没有外观矢量因此无法设置它但是您可以构造一个point通过将您的外观
Three.js ：face4 生成三角形而不是正方形

我正在尝试使用 tree js 自定义几何图形生成一个正方形但是这段代码 var cubeGeo new THREE Geometry cubeGeo vertices push new THREE Vector3 25 25 25 cu
在 Webpack 中使用 Three.js 以便我可以使用 OrbitControls 的正确方法是什么？

在我的 webpack 配置中 resolve alias three path resolve node modules three build three js OrbitControls path resolve node modul
使用文件 API 将资源加载到 Three.js 中

我想创建导入 3D 模型以在浏览器中查看的功能方法是使用File API http www html5rocks com en tutorials file dndfiles Three js 加载器在我托管的文件上运行良好我的理解是加
如何使用键盘和鼠标控制相机 - Three.js

我在 WEB GL 中有一个带有 Three js 的 3D 环境并且我曾经使用 Orbitcontrols js http codepen io nireno pen cAoGI http codepen io nireno pen c
如何在 Three.js 中进入全屏？

我已经尝试了数十种不同的方法几个小时但没有一个有效如下所示 document body addEventListener keydown function THREEx FullScreen request false 如何让Three
从matrix4()获取翻译

对于大多数 Three js 开发人员来说这可能看起来像是一个虚拟问题但是如何从转换矩阵中提取翻译呢实际上我手动提取它指向矩阵数组位置 12 13 14 提前致谢如果要从矩阵中提取平移分量请使用以下模式 var vec new
ThreeJS 动画光色

我制作了一个定向灯我想随着时间的推移改变颜色我正在阅读文档 http threejs org docs index html Reference Math Color 但仍然没有启动并运行在初始化之前我声明变量 var rmapped
三个JS，给纹理添加镜面反射（光泽）

我有一个纹理应用于 Three js 中的对象我想为其添加一些镜面反射或光泽我看到这样的例子 new THREE MeshPhongMaterial color 0x996633 specular 0x050505 shininess
三.js、PointerLock和碰撞检测

我正在开发一个 3D 虚拟家庭项目除了碰撞检测之外一切正常我使用 PointerLockControls 来控制相机和移动但我不确定如何检测每个可能方向的碰撞为简单起见我从与 0 0 0 上的简单立方体的向前和向后碰撞开始 ra
使用 Three.js 遮挡现实世界的对象

我在实验性增强现实网络浏览器中使用 Three js 该浏览器称为 Argon 本质上 Argon 使用高通的 Vuforia AR SDK 来跟踪手机摄像头中的图像和物体 Argon 将跟踪信息发送到 Javascript 中在 Jav
将 FBX 文件转换为 .gltf 后，模型非常小，为什么？

问题将 FBX 文件转换为 gltf 后模型非常小为什么我尝试用以下方法缩放模型frontObject scale set 1000 1000 1000 但我收到以下错误 TypeError Cannot read property
ThreeJS 我的 GLTF 在主机服务器上加载速度太慢？

我目前正在创建一个包含 3D Market Place 功能的网站唉我在实现这个网站的主要功能时遇到了麻烦这是网站阿尔法状态 https www openstring studios com https www openstring
Three.js 变换控件 - 如何仅显示两个箭头

我必须仅使用场景中的变换控件在 XY 方向上显示两个箭头或变换对象通常我会问您到目前为止尝试过什么但是没有关于此控件的文档如果您不知道自己在寻找什么那么它是一个相当复杂的对象需要深入研究考虑你有一个TranformContro
三种js更新纹理生成Canvas的最佳性能方式

I have THREE Points with THREE PointsMaterial As a map我使用生成的动态cavas image 我需要重新渲染canvas在每一帧上我的部分代码 function makeEnemyBa

随机推荐

根据特定标准删除重复项

我有一个看起来像这样的数据集 df lt structure list Claim Num c 500L 500L 600L 600L 700L 700L 100L 200L 300L Amount c NA 1000L NA 564L 0
Appengine 反向引用 - 需要复合索引吗？

我有一个最近开始抛出的查询 The built in indices are not efficient enough for this query and your data Please add a composite index fo
在 JavaScript 中重写或扩展闭包函数

只是想知道如何覆盖闭包函数的行为例如我怎样才能覆盖baz 下面的代码片段中的函数功能 var foo Hello var bar World function baz return foo bar 如果您在封闭区域之外则无法覆盖baz
getContext() 和 getActivity() 与 FragmentActivity

我需要将 getActivity 和 getContext 方法与 FragmentActivity 一起使用怎样制作呢我无法扩展 Fragment 类我现在不能这样做也许我可以选角或者其他什么需要在这堂课上做 public cl
错误 [HPM] 尝试代理请求 / 从 localhost:8000 到 http://localhost:4000 时发生错误 (ECONNREFUSED)

使用此 Starter 开发 Gatsby 应用程序https github com the road to react with firebase react gatsby firebase authentication https gi
连接到部署在 Kubernetes 中的 SQL Server Docker 容器时，用户 SA 登录失败

我正在关注有关微服务的教程https www youtube com watch v DgVjEo3OGBI https www youtube com watch v DgVjEo3OGBI 有时我使用以下 Yaml 文件在 Kuber
如何在 Excel 2010 for MAC 中安装/使用“Scripting.FileSystemObject”？

我在用Excel for Mac 2011其中 VBA 版本为 14 0 我正在尝试使用此代码来访问文件系统我知道它适用于 Windows Function qfil GetDirectory strDirectoryName As St
如何将列表/集合/数组作为参数值传递给 Apache QueryRunner？

有没有办法执行以下查询 select from table where field in 并传递一个列表集合数组作为值占位符我正在使用 Apache db commons 库中的 QueryRunner 肯定有用创建数组 http
从 android 的 socket.io 发送 JSON 数据

我用过https github com Gottox socket io java client https github com Gottox socket io java client用于android中的socket编程现在我正在接
如何在 OS X El Capitan 上安装 ngrok？

首先我尝试从网站下载 ngrok stable darwin amd64 zip 当我尝试通过终端解压缩时我得到 Archive Users User Downloads ngrok stable darwin amd64 zip En
以编程方式添加数据注释

我正在开发一个正在使用的 asp mvc3 应用程序 NET 4 但是我想使用的模型位于正在使用的类库中 NET 3 5并且无法改变我可以添加 NET 4 数据注释以编程方式更改控制器模型中的某些属性以获得一些简单的验证创建您自己的 M
Kotlin MutableStateFlow.collect 正在删除值

我有一个 Android 应用程序在其中我尝试使用协程流来替换现有的 Otto EventBus 使用我自己的事件总线库 https github com cren90 Kotlin Flow Event Bus 在设置 MutableS
使用pyqt5生成SVG文件

我想使用 pyqt5 使用 Python 绘制一些简单的矢量图像到目前为止我已经成功使用以下代码生成了图像 import sys from PyQt5 QtCore import from PyQt5 QtGui import from
为什么我的图标没有出现在 IE7/8 中？

感兴趣的页面 https www gsb yourbank com test https www gsb yourbank com test ICO 文件 https www gsb yourbank com test favicon ic
C# 问题 - 如何将页面 URL 和 Href 转换为绝对 URL/URI？

如何在 C 中将页面 URL 和 Href 转换为绝对 URL URI 即我正在扫描给定 PageURI 处的网页并且在 HTML 中具有带有 HREF 的链接节点并且希望将此 HREF 转换为有效的绝对 URI 背景请注意我遇到
jquery从iframe内容访问iframe id

我正在尝试用 jquery 做一些事情我有这样的代码 1 html 在2 html文件中我正在尝试访问 iframe 容器 id 2 html文件内容
Java（Android）WebSocket客户端库[关闭]

Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案有一些库可以以不引人注目的方式实现 WebSocket 的使用显然有很多库但我真正寻找的是一个现代的小型库我通常可以在 Andro
jQuery的ajax功能在Android PhoneGap应用程序中不起作用

我想在移动应用程序中通过ajax访问开放API 它在iPhone中工作正常但在Android PhoneGap应用程序中不起作用 returning error gt error message null typeerror Result
如何在 selenium 中使用无头 Chrome 启用 JavaScript

import requests from bs4 import BeautifulSoup from selenium import webdriver from selenium webdriver common keys import
对数深度缓冲器+正交相机

我正在尝试将对数深度缓冲区与正交相机一起使用并遇到一些有趣的结果我在这里构建了一个示例 http jsfiddle net TheJim01 05up96m0 http jsfiddle net TheJim01 05up96m0 左侧

对数深度缓冲器+正交相机

对数深度缓冲器+正交相机 的相关文章

随机推荐

热门标签

对数深度缓冲器+正交相机的相关文章