【WebGL学习笔记（二）：WebGL坐标系及基础几何概念】的更多相关文章

webgl学习笔记二-绘图多点

写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象,可以一次性地向着色器传入多个顶点的数据.缓存区对象是webgl系统的一块内存区域. 绘制多个点的流程 这里重点介绍缓冲区对象使用步骤 创建缓冲区对象 gl.createBuffer() 绑定缓冲区对象 gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer); 将数据写…

WebGL学习笔记二——绘制基本图元

webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代表图元类型. (1)gl.POINTS——点 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona…

WebGL学习笔记二

前一章就是第二章主要学的是通过WebGL实现先是在webGL内赋值,但是不实用后来通过定义attribute和uniform存储限定符来将javascript中的数据传到webGL中,大致的流程是1.在js中定义存储限定符2,在js中获取canvas 在js中获取隐藏浏览器兼容性的上下文环境3.将定义的带有存储限定符的参数和上下文环境通过初始化函数进行参数初始化4.在js中获取相应的定以了存储限定符的变量的存储位置并赋值给js变量5.通过webGL函数将webGL位置和数据作为参数然后完成赋值6…

WebGL学习笔记（二）：WebGL坐标系及基础几何概念

WebGL使用的是正交右手坐标系,且每个方向都有可使用的值的区间,超出该矩形区间的图像不会绘制: x轴最左边为-1,最右边为1: y轴最下边为-1,最上边为1: z轴朝向你的方向最大值为1,远离你的方向最大值为-1: 注:这些值与Canvas的尺寸无关,无论Canvas的长宽比是多少,WebGL的区间值都是一致的. 如图: 向量 点积 p1.x * p2.x + p1.y * p2.y + p1.z * p2.z 两个向量的分量相乘之后再相加的结果,该结果和两个向量的夹角相关:两个向量的点积为0…

WebGL学习笔记（一）：理解基本概念和渲染管线

WebGL 是以 OpenGL ES 2.0 为基础的 3D 编程应用接口. 渲染管线(图形流水线) 渲染管线是指将数据从3D场景转换成2D图像,最终在屏幕上显示出来的总过程.它分为几个阶段:应用阶段.几何阶段和光栅阶段,关于这3个阶段的详细介绍可以点这里查看. 下面我们来仔细看看 WebGL 中的每个步骤: 1.顶点着色器 顶点着色器一般用来对模型的顶点进行矩阵变换,一般就是将模型的所有顶点乘于一个变换矩阵,使该模型位于相对于WebGL坐标系中的某个位置. 顶点着色器是可编程的,使用的语言是…

nodejs学习笔记<二> 使用node创建基础服务器

创建服务器的 server.js 内容. var http = require("http"); // 引用http模块 http.createServer(function(request,response){ // 设置HTTP头 // 参数设置:状态码 状态信息(可选) 解析类型 response.writeHead(200,'Miragefirefox',{'Content-Type': 'text/plain'}); response.write("你好,世界!&q…

ROS学习笔记二：ROS系统架构及概念

本文主要是了解ROS的系统架构.文件夹结构以及工作所需的核心文件. ROS系统架构主要被设计和划分为三部分,每一部分代表一个层级的概念:文件系统级(The filesystem level).计算图级(The computation graph level).开源社区级(The community level). 1 理解ROS文件系统级 与其他操作系统类似,一个ROS程序的不同组件要被放在不同的文件夹下.这些文件夹是根据功能的不同来对文件进行组织的: 功能包(Package):功能包是ROS中…

webgl学习笔记五-纹理

写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标信息 装配图形 : 片元着色器装配 光栅化 :显示在屏幕上的三角形是由片元(像素)组成的,所以还需要将图形转化为片元,这个过程被称为光栅化. 纹理图像:映射的这个图像称为纹理图像 纹素 : 组成纹理图像的像素称为纹素 纹理坐标 : 是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹素颜色: 纹理…

webgl学习笔记四-动画

写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘正方形,并且每次重绘时轻微地改变其角度. demo 吊下胃口 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>…

webgl学习笔记三-平移旋转缩放

写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation, 存储平移的坐标矢量. 顶点坐标位置 : gl_Position = a_Position + u_Translation 平移API : gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0); 2.demo html <!DOCTYPE html> <…