1.demo效果

如上图，这个demo中三个不同颜色的三角形展示在三维坐标中。

2.相关知识点

2.1 视点、视线、观察点、上方向

视点指的是观察者所处的位置。视线的起点，用(eyeX, eyeY, eyeZ)表示
观察目标点 指被观察目标所在的点。用(atX, atY, atZ)表示
视线指的是从视点出发指向观察目标点的射线。
上方向 最终绘制在屏幕上的影像中的向上的方向，它的存在是应为仅仅依靠视点和观察目标点，观察者还可以沿着视线方向旋转，可以联想一下，一个人观察一个物体只确定眼睛和观察的物体时，他的头可以向上向下向左向下偏转，为了固定观察者我们还需要指定观察者的上方向。上方向是具有三个分量的矢量，用(upX, upY, upZ)表示

2.2 创建视图矩阵

我们可以用视点、观察点、上方向者三个矢量创建一个 视图矩阵 ，这个视图矩阵会影响显示在屏幕上的视图，也就是会影响观察者观察到的场景，接下来我们看一下cuon-matrix.js 提供的 Matrix4.setLookAt() 函数

函数功能：根据视点（eyeX, eyeY, eyeZ）、观察点（atX, atY, atZ）、上方向（upX, upY, upZ）
创建视图矩阵，视图矩阵的类型是Matrix4，观察点映射到<canvas>的中心点
-----------------------------------------------------------------------------------
调用示例：Matrix4.setLookAt(eyeX, eyeY, eyeZ, atX, atY, atZ, upX, upY, upZ)
-----------------------------------------------------------------------------------
参数      eyeX, eyeY, eyeZ    指定视点atX, atY, atZ       指定观察点upX, upY, upZ      指定上方向，如果上方向是Y轴正方向，那么（upX,upY,upZ）就是（0,1,0）
-----------------------------------------------------------------------------------
返回值     无

3. demo代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title></title>
</head><body><!--通过canvas标签创建一个800px*800px大小的画布--><canvas id="webgl" width="800" height="800"></canvas><script type="text/javascript" src="./lib/cuon-matrix.js"></script><script>//顶点着色器var VSHADER_SOURCE = '' +'attribute vec4 a_Position;\n' + //声明attribute变量a_Position，用来存放顶点位置信息'attribute vec4 a_Color;\n' + //声明attribute变量a_Color，用来存放顶点颜色信息'uniform mat4 u_ViewMatrix;\n' + //声明uniform变量u_ViewMatrix，用来存放视图矩阵'varying vec4 v_Color;\n' + //声明varying变量v_Color，用来向片元着色器传值顶点颜色信息'void main(){\n' +'  gl_Position = u_ViewMatrix * a_Position;\n' + //将视图矩阵与顶点坐标相乘赋值给顶点着色器内置变量gl_Position'  v_Color = a_Color;\n' + //将顶点颜色信息传给片元着色器，'}\n';//片元着色器var FSHADER_SOURCE = '' +'#ifdef GL_ES\n' +' precision mediump float;\n' + // 设置精度'#endif\n' +'varying vec4 v_Color;\n' + //声明varying变量v_Color，用来接收顶点着色器传送的片元颜色信息'void main(){\n' +//将varying变量v_Color接收的颜色信息赋值给内置变量gl_FragColor' gl_FragColor = v_Color;\n' +'}\n';//初始化着色器函数function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) {//创建顶点着色器对象var vertexShader = gl.createShader(gl.VERTEX_SHADER);//创建片元着色器对象var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);//引入顶点、片元着色器源代码gl.shaderSource(vertexShader, VSHADER_SOURCE);gl.shaderSource(fragmentShader, FSHADER_SOURCE);//编译顶点、片元着色器gl.compileShader(vertexShader);gl.compileShader(fragmentShader);//创建程序对象programvar program = gl.createProgram();//附着顶点着色器和片元着色器到programgl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);//链接programgl.linkProgram(program);//使用programgl.useProgram(program);gl.program = program//返回程序program对象return program;}function init() {//通过getElementById()方法获取canvas画布var canvas = document.getElementById('webgl');//通过方法getContext()获取WebGL上下文var gl = canvas.getContext('webgl');//初始化着色器if (!initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log('初始化着色器失败');return;}// 设置canvas的背景色gl.clearColor(0.0, 0.0, 0.0, 1.0);//清空canvasgl.clear(gl.COLOR_BUFFER_BIT);//初始化顶点坐标和顶点颜色var n = initVertexBuffers(gl)//获取顶点着色器uniform变量u_ViewMatrix的存储地址var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix')if (!u_ViewMatrix) {console.log('获取u_ViewMatrix的存储地址失败！');return;}//初始化视图矩阵var viewMatrix = new Matrix4()//设置视点、视线和上方向viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0)//将视图矩阵传给顶点着色器uniform变量u_ViewMatrixgl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements)//绘制三角形gl.drawArrays(gl.TRIANGLES, 0, n)}//初始化顶点坐标和顶点颜色function initVertexBuffers(gl) {var verticesColors = new Float32Array([//最后面的三角形0.0, 0.5, -0.4, 0.4, 1.0, 0.4,-0.5, -0.5, -0.4, 0.4, 1.0, 0.4,0.5, -0.5, -0.4, 1.0, 0.4, 0.4,//中间的三角形0.5, 0.4, -0.2, 1.0, 0.4, 0.4,-0.5, 0.4, -0.2, 1.0, 1.0, 0.4,0.0, -0.6, -0.2, 1.0, 1.0, 0.4,//最前面的三角形0.0, 0.5, 0.0, 0.4, 0.4, 1.0,-0.5, -0.5, 0.0, 0.4, 0.4, 1.0,0.5, -0.5, 0.0, 1.0, 0.4, 0.4,]);//创建缓冲区对象var vertexColorBuffer = gl.createBuffer();if (!vertexColorBuffer) {console.log('创建缓冲区对象失败！')return -1}//将顶点坐标和顶点颜色信息写入缓冲区对象gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer)gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW)//获取类型化数组中每个元素的大小var FSIZE = verticesColors.BYTES_PER_ELEMENT//获取顶点着色器attribute变量a_Position的存储地址, 分配缓存并开启var a_Position = gl.getAttribLocation(gl.program, 'a_Position');gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0)gl.enableVertexAttribArray(a_Position)//获取顶点着色器attribute变量a_Color(顶点颜色信息)的存储地址, 分配缓存并开启var a_Color = gl.getAttribLocation(gl.program, 'a_Color');gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3)gl.enableVertexAttribArray(a_Color)// 解绑缓冲区对象gl.bindBuffer(gl.ARRAY_BUFFER, null);return verticesColors.length / 6}init()</script>
</body></html>

WebGL入门(十六)-三维视图模型原理，视点、视线、观察点、上方向相关推荐

WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失
三维视图正射投影矩阵 1.demo效果 2.相关知识点 2.1 正射投影 2.2 Matrix4.setOrtho()函数 3. demo代码 1.demo效果如上,通过上下键调整正投影矩阵参数fa ...
【Visual C++】游戏开发四十八浅墨DirectX教程十六三维地形系统的实现
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本系列文 ...
【Visual C++】游戏开发四十八浅墨DirectX教程十六三维地形系统的实现
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接:http://blog.csdn.net/zhmxy555/article/details/8685546 作者:毛星云(浅墨) ...
花书+吴恩达深度学习（十六）序列模型之双向循环网络 BRNN 和深度循环网络 Deep RNN
目录 0. 前言 1. 双向循环网络 BRNN(Bidirectional RNN) 2. 深度循环网络 Deep RNN 如果这篇文章对你有一点小小的帮助,请给个关注,点个赞喔~我会非常开心的~ 花 ...
第十六届全国大学生智能车竞赛线上比赛（广东+西南科技大学）成绩排名与获奖信息
§01 成绩与奖项下面是第十六届全国大学生智能车竞赛线上比赛成绩与奖项设置.线上比赛的队伍包括有广东省参赛队与西南科技大学 . 线上比赛奖项设置比例如下: 一等奖:参赛队伍20% 二等 ...
第十六届全国大学生智能车竞赛线上比赛监督裁判培训演练
简介: 第十六届全国大学生智能车竞赛组委会在8月18日下午进行线上比赛演练,主要是培训线上比赛远程监督员.参加演练的队伍包括沈阳航空航天大学双车组以及哈尔滨工业大学智能视觉组的队伍. 关键词: 智能 ...
第十六届全国大学生智能车竞赛线上全国总决赛裁判手册
简介: 2021年全国大学生智能车竞赛全国总决赛采用线上比赛的形式.本文给出了线上比赛裁判用于控制比赛流程与判罚与得分标准. 关键词: 智能车竞赛,裁判 §01 分工和职责在进行线上比赛过程, ...
从零开始学Pytorch（十六）之模型微调
微调在前面的一些章节中,我们介绍了如何在只有6万张图像的Fashion-MNIST训练数据集上训练模型.我们还描述了学术界当下使用最广泛的大规模图像数据集ImageNet,它有超过1,000万的图像 ...
第十六届全国大学生智能车竞赛线上赛点赛道审核 - 西部赛区
简介: 参加第十六届全国大学生智能车线上全国总决赛赛道设计与审核内容. 关键词: 智能车竞赛,线上比赛,赛道审核 §01 赛道审核一.阿坝师范学院 ▲ 图1.1.1 赛道设计与铺设图 ▲ 图1.1 ...

WebGL入门(十六)-三维视图模型原理，视点、视线、观察点、上方向

三维视图模型原理