(4)应用投影和相机视口

本文介绍了OpenGL ES中的投影变换和视图变换,包括透视投影、正投影、相机视口变换以及如何在Android环境下应用这些变换。投影变换通过glFrustum或gluPerspective定义视景体,视图变换利用gluLookAt指定相机位置。视口变换通过glViewport调整有效屏幕区域。在Android中,使用Matrix.frustumM和Matrix.setLookAtM计算投影和视图矩阵,确保在不同屏幕尺寸下正确显示物体。
摘要由CSDN通过智能技术生成

在OpenGL ES环境中,投影和相机视口使你绘制的对象以更接近物理对象的样子呈现,这是通过精确的数学坐标变换实现的。

  • 投影-这种变换跟据所在GLSurfaceView的宽和高调整对象的坐标。如果没有此变换,对象会被不规则的视口扭曲。投射变换一般只需要在OpenGLview创建或发生变化时调用,代码写在renderer的onSurfaceChanged()方法中。
  • 相机视口-此变换基于一个虚拟相机的位置调整对象的坐标。注意OpenGLES并没有定义一个真的相机对象,而是提供了一些工具方法变换绘制对象的显示来模拟一个相机。一个相机视口的变换可能只在创建GLSurfaceView时调用,或跟据用户动作动态调用。

一、OpenGL 理论基础—-变换

(1)投影变换:

投影变换的目的是定义一个视景体。视景体有两种用途。首先,视景体决定了一个物体是如何映射到屏幕上的(即通过透视投影还是正投影)。其次,视景体定义了哪些物体(物体的一部分)被裁剪到最终的图像之外。
1.透视投影
这里写图片描述
透视投影最显著的特征就是透视缩短,物体距离照相机越远,它在最终图像中看上去越小。
在OpenGL中,glFrustum()函数定义了一个平截头体,
void glFrustum(GLdouble left,GLdouble right,GLdouble bottom,GLdouble top,GLdouble near,GLdouble far);
创建一个表示透视视图平截头体的矩阵,并把它与当前矩阵相乘。平截头体的视景体是由这个函数的参数定义的:
(left,bottom,-near)和(right,top,-near)分别制定了近侧裁剪平面左上角和右下角的(x,y,z)坐标。near和far分别表示
从观察点到近侧和远侧裁剪平面的距离,它们的值应该是正的。
同时,也可以用gluPerspective()定义一个平截头体,
void gluPerspective(GLdouble fovy,GLdouble aspect,GLdouble near,GLdouble far);
创建一个表示透视视图平截头体的矩阵,并把它与当前矩阵相乘。fo

Three.js 是一个基于 WebGL 的 JavaScript 库,用于创建和展示复杂的 3D 和 2D 图形无需插件。Three.js 提供了多种内置对象、材质、光源等资源,简化了三维图形渲染的过程。 正投影相机是 Three.js 中的一种相机模型,它用于模拟二维空间中的平行投影效果,在三维场景中生成的图像保持线条平行性和相对大小不变。这种类型的相机适用于绘制建筑平面图、技术图纸或其他需要保持物体间精确比例的视图。以下是关于正投影相机的一些关键特性: ### 特点 1. **线性透视**:在正投影中,所有平行线在投影面上仍然保持平行,这使得物体的比例在整个视野内保持一致,非常适合绘制结构图和机械设计图。 2. **尺寸稳定性**:与透视投影相比,正投影下的物体不会因为距离的变化而改变其实际大小,这对于需要精确测量和标注的场景非常有用。 3. **无变形效果**:在正投影下,无论物体离相机有多远,它们的形状都不会发生扭曲变形,有助于保持物体的真实形态。 4. **易于理解和解释**:由于没有视觉上的深度错觉,用户能够更直接地理解所呈现的空间布局和结构,这对于工程、建筑设计等领域尤为重要。 ### 使用示例 假设我们想创建一个正投影相机并将其应用到一个 Three.js 场景中: ```javascript // 引入Three.js库 import * as THREE from 'three'; // 创建一个新的场景 const scene = new THREE.Scene(); // 设置背景颜色 scene.background = new THREE.Color(0xffffff); // 白色背景 // 创建摄像机实例 - 使用透视相机(通常情况正投影相机在Three.js中表示为透视相机而非一种特定的“正投影相机) const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 100); // 设置初始位置 // 创建渲染器实例 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 添加一个立方体作为场景的一部分 const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // 调整相机视口以适应场景的大小 camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); // 渲染场景并持续更新 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 在这个简单的例子中,我们首先导入了必要的 Three.js 文件,并创建了一个新的场景、摄像机以及一个立方体作为场景的内容。这里使用的是透视相机 `THREE.PerspectiveCamera` 类型的相机,它是 Three.js 默认提供的相机类型之一,尽管它默认配置的实际上是一种透视投影效果而不是纯正投影。对于真正的正投影效果,实际中并不常见于 Three.js 环境下,因为大多数图形处理需求涉及到视角变换和透视效果,以获得更真实的三维体验。然而,上述代码提供了一个基础框架,用于在 Three.js 中操作和渲染场景。 --- ### 相关问题: 1. 为什么在某些情况下选择正投影相机而非透视相机? 2. 怎样调整正投影相机的位置和视角以优化3D场景的表现? 3. 正投影相机如何影响物体的显示和交互,在设计过程中有哪些应用场景?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值