注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指正. 坐标变换矩阵的基本功能 进行主要的3D渲染的时候,须要准备3个坐标变换矩阵,这个在之前的文章中说过非常多次了.第一个是模型变换矩阵,DirectX中叫做世界变换矩阵.模型变换矩阵影响的是所绘制的模型,模型的位置,模型的旋转,模型的放大和缩小等相关的情况.第二个是视图变换矩阵,简单来说,就是定义…

注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家指正. 这是本次的demo的运行结果 绘制流程 这次终于该绘制多边形了,之前的文章(十一,着色器的编译和连接)中介绍了HTML,顶点着色器和片段着色器,这次看一下javascript从開始到终于的所有处理. 假设前两篇文章介绍的内容全然理解的话,这次的内容也应该不难了.也许会有不easy理解的地方,…

Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集. 但是千万不要在一个模态框上重叠另一个模态框.要想同时支持多个模态框,需要自己写额外的代码来实现. 首先我们要引入CSS文件和JS文件(bootstrap需要jQuery的支持) <link href="bootstrap.min.css" rel="styleshee…

注:文章译自http://wgld.org/,原作者杉本雅広(doxas).文章中假设有我的额外说明.我会加上［lufy:］,另外,鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家指正. 本次的demo的执行结果 各种各样的光照 上次,以及上上次,介绍了通过顶点着色器来实现光照效果. 最開始介绍了从平行光源发出的光.上次介绍了平行光源的缺点.以及相应这个缺点的方法,就是环境光源. 这次是光照处理的第三篇.进一步介绍反射光照. 反射光和它的名字一样,就是模拟光的反射.通过反射光.…

注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］,另外.鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家指正. 本次的demo的执行结果 顶点缓存的反复利用 上一篇文章中,向多边形的三个顶点中加入了颜色这个新的顶点属性,给多边形涂抹了颜色.并且知道.使用新的VBO能够给对顶点属性进行自由的扩张. 那么.这次来挑战一下同一时候绘制多个模型.可是,不准备新的VBO.还利用上次的VBO.就是说,反复利用VB…

注:文章译自http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上［lufy:］.另外,鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指正. 本次的demo的执行结果 相应复杂的模型 上次,通过操作模型坐标变换矩阵,实现了多个模型的移动,旋转和放大缩小.可是.渲染的依旧是简单的三角形,是个构造及其简单的模型.可是实际中,用WebGL来绘制一个简单的三角形的机会是非常少见的.至少是个四角多边形吧,一般会是更复杂的模型.伴随着模型的复杂…

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指正. 本次的demo的执行结果 照亮世界 上次绘制了一个像甜甜圈一样的圆环体模型,尽管没有涉及特别的新知识,可是也算成功的绘制出了3D模型了吧. 那么,这次来看一下光. 光在3D渲染中有非常多种类和用法.想把光研究透彻.也是非常不easy的. 现实世界中我们能看到物体,是由于物体反射的光进入我们的眼…

注:文章译自http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外.鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家指正. 本次的demo的执行结果 添加顶点属性的个数 上次,最终绘制了一个三角形.可是仅仅绘制了一个纯白色的多边形. 这次.给多边形的顶点中加入颜色属性,基本上做的事情和上一篇文章一样,仅仅是略微添加点步骤而已. 首先,就像曾经多次反复的那样,顶点能够包括非常多种情报(參考:顶点缓存和基础).并且每个…

注意:文章翻译http://wgld.org/,原作者杉本雅広(doxas).文章中假设有我的额外说明.我会加上［lufy:］.另外.鄙人webgl研究还不够深入.一些专业词语,假设翻译有误.欢迎大家指正. 重复重复的东西 这已经是第11篇了,由于仅仅说了一些主要的东西.到如今为止连个多边形也没绘制出来.哎呀呀呀......不管怎么说吧.基础是非常重要的.那就在这些基础上.来绘制一个多边形吧.须要准备的知识都已经介绍过了.剩下的就是依照步骤開始绘制多边形.首先,来确认一下绘制的步骤.・从HTML…

前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用webgl画出一个三角形. 效果图: 在WebGL入门教程(一)-初识webgl中,知道如何绘制一个点 //绘制一个点 gl.drawArrays(gl.POINTS, 0, 1); 但是图形是有多个点组成,那么就应该考虑如何绘制多个点,WebGL提供了一种很方便的机制,缓冲区对象(buffer obje…

前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到纹理映射,他就是将一张真实图片贴到一个几何图像表面. 纹理图像:映射的这个图像称为纹理图像: 纹素:组成纹理图像的像素称为纹素: 纹理坐标:是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹素颜色: 效果图: 操作步骤: 1.创建HTML5 canvas 2.获取画布 canvas 的 ID 3…

前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canvas 2.获取画布 canvas 的 ID 3.获取WebGL 4.编译着色器 5.使用缓冲区对象向顶点传入多个顶点数据 6.绘制图像 以上1~3参考:http://www.cnblogs.com/bsman/p/6128447.html 4.编译着色器 改顶点着色器,片着色器 //顶点着色器程序 v…

前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(transformations)或者仿射变换(affine transformations). 1.移动 效果图: 1.1在WebGL入门教程(二)-webgl绘制三角形的基础上进行修改,原理就是,三个顶点的坐标(x,y,z)同时发生了变化,重新计算三个坐标值: //顶点着色器程序 var VSHADE…

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指正. 重要的用法 矩阵的计算方法,也不是什么特别奇怪复杂的东西,假设数学好好学习的话,没有基础也能够进行主要的矩阵计算.可是,假设不知道矩阵的加法和乘法运算的话,要进行略微复杂一些的矩阵计算是非常难的.DirectX也好,OpenGL也好,其实,假设你不能掌握矩阵的使用的话,编程会变得非常难的.可是…

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指正. 本次的demo的执行结果 着色方法 上次介绍了反射光,反射光是实现光泽的必不可少的概念,到此为止,主要的光照效果都已经封装完成了. 光照的效果主要就是扩散光,环境光和反射光三种方法,灵活运用这三种光照,应该就能实现非常逼真的照明效果了. 前几篇一直在说光照,这次略微换个视点,看一下着色,着色是…

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上［lufy:］.另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指正. 本次的demo的执行结果 点光源 上次介绍了高氏着色和补色着色. 使用补色着色的手法.能够渲染更加自然的阴影.3D效果更加真实.可是会有计算量比較大的缺点. 这个仅仅能case by case,依据不同的情况来处理了.是个挺烦人的地方. 那么,这次,还是讲光源.我貌似听到了"不会吧......…

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外.鄙人webgl研究还不够深入,一些专业词语.假设翻译有误.欢迎大家指正. 顶点属性的意思 上次的文章中,介绍了一下从着色器的生成,编译,到程序对象的生成和着色器的连接.这次,简单的说一下模型数据的定义和顶点属性的处理. 另外,介绍一下依据模型数据生成VBO的方法.VBO的使用要比生成难理解一些.可是不要操心,后面会慢慢说明.接下来看一下顶点属性.顶点属性,说的简单点…

效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGl 多缓冲区传递颜色和坐标(矩形)</title> </head> <body> <canvas id="myCanvas" width="500" height=…

效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGl 一个缓冲区传递颜色和坐标(矩形)</title> </head> <body> <canvas id="myCanvas" width="500" height…

一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二.WebGL采用H5中的<canvas>元素来定义绘图区域,然后通过JavaScript内嵌GLSL ES在canvas中绘制三维图形. canvas可以同时支持二维图形和三维图形,它不直接提供绘图方法,而是提供一种叫上下文(context)机制来绘制图形, 2.1使用canvas绘制二维空间步骤:…

注意:文章翻译http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外.鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指正. 必须准备的东西 上次介绍了3D画图的基础知识. 讲了一下由Z坐标的不同决定的两种坐标系.以及坐标变换的种类.这一次,说一说实际WebGL画图的时候必须准备的东西. 首先,HTML.javascript相关的基础知识就不解释了.假设,有不明确的单词或概念的话.请自己查一下. 我是觉得你有一定的…

用js绘制webGL的点: THREE.Vector3 = function ( x, y, z ) { //用THREE声明的变量都是全局变量.this.x = x || 0;this.y = y || 0;this.z = z || 0;}; 注意:"||"(或)运算符,就是当x=null或者undefine时,this.x的值应该取0. 定义个一点,通常使用: var point1 = new THREE.Vector3(); point1.set(4,8,9); //每个点都是…

最近搜罗了各种资料,发现WebGL中文网特别好用,很适合新手入门:http://www.hewebgl.com/article/getarticle/50 只需要下载好需要的所有包,然后用notepad 就可以开始写代码了, 运行代码我选择的Google Chrome,其实IE也是一样的,纯属个人信仰. 然后对于画cube的话,给出的代码已经非常清晰了: <!DOCTYPE html><html><head>    <title></title>…

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上［lufy:］,另外.鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指正. 不是让你到店前面排队 lufy:你一定奇怪.为什么叫这个题目,由于日语中的矩阵叫做"行列",所以作者就给读者们开了个玩笑.我就这么直接翻译了,大家知道什么意思即可了. 在3D渲染的世界里,会非常频繁的用到矩阵. 这里所说的矩阵,是数学里的矩阵.英语中叫做Matrix. 矩阵尽管听起来…

node.js介绍 javascript原本只是用来处理前端,Node使得javascript编写服务端程序成为可能.于是前端开发者也可以借此轻松进入后端开发领域.Node是基于Google的V8引擎封装的,并提供了一些编写服务器程序的常用接口,例如文件流的处理.Node的目的是提供一种简单的途径来编写高性能的网络程序. Node.js特性* 单线程* 非阻塞IO* Google V8* 事件驱动 node.js安装 对于在windows下的开发环境,node.js已经提供了windows安装包…

什么是WebGL? WebGL是一项使用JavaScript实现3D绘图的技术,浏览器无需插件支持,Web开发者就能借助系统显卡(GPU)进行编写代码从而呈现3D场景和对象. WebGL基于OpenGL ES 2.0,OpenGL ES 是 OpenGL 三维图形 API 的子集,针对手机.平板电脑和游戏主机等嵌入式设备而设计.浏览器内核通过对OpenGL API的封装,实现了通过JavaScript调用3D的能力.WebGL 内容作为 HTML5 中的Canvas标签的特殊上下文实现在浏览器中…

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］,另外.鄙人webgl研究还不够深入,一些专业词语,假设翻译有误.欢迎大家指正. 本次的demo的执行结果 多边形的外側,内側和遮挡剔除 上次介绍了索引缓存.以及使用IBO来画图,使用索引缓存能够循环利用反复的顶点,能够提高画图效率.这之后的文章,假设没有特殊的原因的话.基本上都会使用索引缓存,通过drawElements来画图. 这次来说一下遮挡剔除和深度測试,这是两个重…

服务端JavaScript 众所周知的,JavaScript是运行在浏览器的脚本语言,JavaScript通常作为客户端程序设计语言使用,以JavaScript写出的程序常在用户的浏览器上运行.直至Nodejs的出现,Node.js大部分基本模块都用JavaScript语言编写,Node.js的出现使JavaScript也能用于服务器端编程.Node.js含有一系列内置模块,使得程序可以脱离Apache HTTP Server或IIS,作为独立服务器运行. Node.js概况 Node.js允许…

1.js获取对象的绝对坐标 方法1: function getAbsPoint(e) { var x = e.offsetLeft, y = e.offsetTop; while(e=e.offsetParent) { x += e.offsetLeft; y += e.offsetTop; } alert("x:"+x+","+"y:"+y); } 方法2: function getAbsPoint(obj) { var x,y; oRect…

ExtJS6.0+快速入门+API下载地址 ExtAPI 下载地址如下,包含各个版本 http://docs.sencha.com/misc/guides/offline_docs.html 1.使用工具HBuilder 2.java 版本 8.0 3.extjs 版本 6.2.0 注意顺序 <!-- 描述:引入主题样式文件 --> <link rel="stylesheet" type="text/css" href="extjs\bu…