WebGL学习笔记七点一
第六章讲的是一些GL的一些语法，前面已经涉及，学习时直接跳过，来看第七章，第七章是真正意义的三维立体的出现，其实图形绘制方法是差不多的，就是Z坐标此时不再为0，所以很容易能构造出一些立体图形，但是立体图形涉及了一些其它概念。
正射投影：就是没有那种越远越小的效果，立体感没有那么强。
其中涉及的知识有：视点，就是相当于你的眼睛坐标位置，当然实际上你的眼睛看屏幕时时不经常动的，在这里说成眼睛原理上说的过去也容易理解所以不较真了。观察目标点：这个看书上概念没看懂，推断出是这个意思，就是将被观察物体看成一个点，通过视点和被观察点才能确定视线，因为通常我们都是改变视点，所以被观察点设为一个changzhi就行这样就可以确定看的角度了。再加上一个正向的参数，就是你的眼睛的上下左右怎么个姿势看的。这个容易理解通过这些就能可以从不同角度看物体了立体效果也出来了，通过封装好的函数setLookAt(eye_X,eye_Y,eye_Z,atX,at_Y,at_Z,up,up,up);可以实现但是美中不足的是我们经常换着换着角度就发现物体应该呈现的部分缺了，恭喜你要学新知识了，那就是截面的概念，说直白些就是将你看的物体放在一个矩形空间中通过，前后左右上下确定横截面的大小通过前后截的坐标可以实现你的视线无死角了，可以通过setOrtho(0,0,0,0,0,0);封装好的函数可以直接调用实现。有旋转效果的自己尝试尝试 地址：
看效果：
代码如下：
<html>
<head>
<title>LookAtTrianglesWithKeys_ViewVolume.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="js/cuon-matrix.js"></script>
<script src="js/cuon-utils.js"></script>
<script src="js/webgl-debug.js"></script>
<script src="js/webgl-utils.js"></script>
<script type="text/javascript">
var VSHADER_SOURCR=
'attribute vec4 a_Position;\n'+
//'uniform mat4 u_ModelViewMatrix;\n'+
'uniform mat4 u_ProjMatrix;\n'+//设置前后截面的参数
'uniform mat4 u_ViewMatrix;\n'+
'attribute vec4 a_Color;\n'+
'varying vec4 v_Color;\n'+
'void main(){\n'+
'gl_Position=u_ProjMatrix*u_ViewMatrix*a_Position;\n'+
'v_Color=a_Color;\n'+
'}\n';
var FSHADER_SOURCE=
'precision mediump float;\n'+
'varying vec4 v_Color;\n'+
'void main(){\n'+
'gl_FragColor=v_Color;\n'+
'}';
function main(){
var canvas=document.getElementById("webgl");
var nearFar=document.getElementById("nearFar");
var gl=getWebGLContext(canvas);
if(!gl){
console.log("上下文获取失败！！");
}
if(!initShaders(gl,VSHADER_SOURCR,FSHADER_SOURCE)){
console.log("着色器初始化失败！！");
}
gl.clearColor(0,0,0,1);
var n=initVertexBuffer(gl);
var u_ViewMatrix=gl.getUniformLocation(gl.program,'u_ViewMatrix');//获取位置
var viewMatrix=new Matrix4();
//viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0);//shi'dian
document.οnkeydοwn=function(event){
keydwon(event,gl,n,u_ViewMatrix,viewMatrix);
};
var u_ProjMatrix=gl.getUniformLocation(gl.program,'u_ProjMatrix');//获取位置
var projMatrix=new Matrix4();
projMatrix.setOrtho(-1, 1, -1, 1, 0, 4);
gl.uniformMatrix4fv(u_ProjMatrix,false,projMatrix.elements);
draw(gl,n,u_ViewMatrix,viewMatrix);
/*var modelMatrix =new Matrix4();
modelMatrix.setRotate(-10, 0, 0, 1);
var modelViewMatrix=viewMatrix.multiply(modelMatrix);//让两个矩阵相乘
var modelViewMatrix=new Matrix4();
modelViewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0).rotate(10, 0, 0, 1);
gl.uniformMatrix4fv(u_ModelViewMatrix,false,modelViewMatrix.elements); */
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES,0,n);
}
function initVertexBuffer(gl){
var verticesTexcoords=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,1,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 n=9;
var vertexColorBuffer=gl.createBuffer();
if(!vertexColorBuffer){
console.log("缓冲区创建失败！！");
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,verticesTexcoords,gl.STATIC_DRAW);
var SIZE=verticesTexcoords.BYTES_PER_ELEMENT;
//alert(SIZE);
var a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,SIZE*6,0);
gl.enableVertexAttribArray(a_Position);
var a_Color=gl.getAttribLocation(gl.program,'a_Color');
gl.vertexAttribPointer(a_Color,3,gl.FLOAT,false,6*SIZE,3*SIZE);
gl.enableVertexAttribArray(a_Color);
return n;
}
var g_eyeX=0.2,g_eyeY=0.25,g_eyeZ=0.25;
function keydwon(event,gl,n,u_ViewMatrix,viewMatrix){
//alert(event.keyCode);
switch(event.keyCode){
case 39:g_eyeX+=0.01;
break;
case 37:g_eyeX-=0.01;
break;
}
//else{return;}
draw(gl,n,u_ViewMatrix,viewMatrix);
}
function draw(gl,n,u_ViewMatrix,viewMatrix){
//alert();
viewMatrix.setLookAt(g_eyeX,g_eyeY,g_eyeZ,0,0,0,0,1,0);
gl.uniformMatrix4fv(u_ViewMatrix,false,viewMatrix.elements);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES,0,n);
//math.round()将数据转为整数
}
</script>
</head>
<body οnlοad="main()">
<canvas width="400" height="400" id="webgl"></canvas>
<p id="nearFar">显示近裁截面和远裁截面</p>
</body>
</html>
转载于:https://www.cnblogs.com/xizhenghe/p/5862642.html
WebGL学习笔记七点一相关推荐
- WebGL学习笔记（3）
根据上篇笔记,在对3D对象可进行普通的控制后,以及学习了http://hiwebgl.com的教程第10章内容:世界模型的载入以及控制镜头移动,经过多次调试矩阵代码,已经可以实现在世界中旋转镜头/控制 ...
- WebGL学习笔记（二）
目录 绘制多个顶点 使用缓冲区对象 类型化数组 使用drawArrays()函数绘制图形 图形的移动 图形的旋转 图形的缩放 绘制多个顶点 使用缓冲区对象 创建缓冲区对象 var vertexBuff ...
- WebGL学习笔记（基础知识篇）
WEBGL基础知识介绍 1.场景(scene) 场景如其名,即显示3D空间内物体的容器,就好比一个箱子是一个3D场景. 2.坐标系: webgl使用笛卡尔坐标系(宽度.高度和深度),我们也可以指定使用 ...
- WebGL学习笔记（4）
本篇笔记加强了上篇笔记示例代码的程序,实现了使用nodejs-websocket来广播每个玩家的坐标数据并在同一个世界模型中进行多人在线交互. websocket服务端: 安装nodejs与npm,创 ...
- WebGL学习笔记 第三章绘制和变换三角形
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
- 【带着canvas去流浪（11）】Three.js入门学习笔记
[摘要] three.js 入门学习笔记 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 资料推荐及建议 1.官方文档 很详细,但是API部分单独 ...
- pythonsze_python学习笔记二 数据类型（基础篇）
Python基础 对于Python,一切事物都是对象,对象基于类创建 不同类型的类可以创造出字符串,数字,列表这样的对象,比如"koka".24.['北京', '上海', '深圳' ...
- 《张萌：高效能人士的自我管理》学习笔记
作为职场高效能人士,张萌以丰富的理论实践经验.帮助你在管理自我.职场发展上寻求更多的可能. 学习笔记如下: 第一部分:效率系统篇 人生效率公式=(梦想-现状)/可奋斗时间 努力之前一定要想明白:第一, ...
最新文章
- 更简单的调试Release版本Optimize code的.NET程序集
- matlab 向量模量,有限元分析简单实例之平面矩形薄板（matlab）
- valorant皮肤怎么获得_王者荣耀狂铁特工战影上线时间 狂铁新皮肤特工战影怎么获得...
- PHP从零开始--错误处理函数
- 笔记本电脑如何保养_电脑温度一高就“翻脸”，电脑小白该如何解决？学会少花冤枉钱...
- 简述数学建模的过程_【数学建模的基本工作流程】作业帮
- scroll jquery
- blog推荐 - Sources of Insight
- 前端代码审查工具_前端代码审查中应检查的内容
- 网页截图怎么截一整张_电脑网页页面太长怎么截图 长网页滚动截图的两种方法...
- Flutter实现网易音乐登录页的波纹效果
- 第三方SDK开发入门
- 如何快速搭建一个像“天猫精灵”的智能语音助手？
- Mac上安装R语言运行环境及RStudio [超详细!~]
- buck电路 dac stm32_嵌入式设计-基于STM32F334的BUCK同步降压数字电源设计-电路城论坛 - 电子工程师学习交流园地...
- 带孔的打印纸怎么设置_oki打印机打印带孔纸如何缩小纸张间距
- 程序员们该活动活动了 ，北京的同行们给你们推荐点北京好玩的地方
- HTML5菜鸟入门指导：简介、平台搭建、示例演示
- dbeaver的连接超时(Connection timed out: connect)
- python邮件模块_python 邮件模块