- 博客(16)
- 资源 (8)
- 收藏
- 关注
原创 07 WebGL使用attribute变量
我们将位置信息从javascript程序中传给顶点着色器。有两种方式可以做到这点:attribute变量和uniform变量attribute变量传输的是与顶点相关的数据uniform变量传输的是对于所有顶点都相同(或与顶点无法)的数据。思路:1.在顶点着色器中,声明attribute变量。2.将attribute变量赋值给gl_Position变量。3.向attribute变量传输数据。示例:案...
2017-04-27 23:09:46 2616
原创 06 WebGL的坐标系统
由于WebGL处理的是三维图形,所以它使用的是三维坐标系统(笛卡尔坐标系),具有x轴、y轴、z轴。三维坐标系统很容易理解,因为我们的世界也是三维的:具有宽度、高度和长度。在坐标系统中,轴的方向非常重要。WebGL采用的是右手坐标系,因为可以用右手来表示。如图:默认情况下WebGL和canvas的对应关系。canvas的中心点就是WebGL的(0.0,0.0,0.0)
2017-04-27 20:58:40 3882 1
原创 05 WebGL初始化着色器
初始化着色器函数initShaders()被定义在了cuon.util.js中使用:initShaders(gl, vshader, fshader);参数:gl 指定渲染的上下文vshader 指定顶点着色器程序代码(字符串)fshader 指定片元着色器程序代码(字符串)返回值:true 初始化着色器成功false 初始化着色器失败顶点
2017-04-26 23:54:25 1896 2
原创 04 WebGL绘图之着色器
WebGL不同于canvas 2D的绘图方式,WebGL需要去调用OpenGL的接口的着色器去绘图。所以,我们需要学习WebGL的着色器进行绘图。WebGL的着色器分为两种:1.顶点着色器(Vertex shader):顶点着色器是用来描述顶点特性(如位置、颜色等)的程序。顶点(Vertex)是指二维或三维空间中的一个点,比如二维或三维图形的端点或交点。2.片元着色器(Fragment shade...
2017-04-26 22:43:39 2585
原创 03 WebGL定义好的库的引用
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> Document 你的浏览器不支持WebGL,请更换新的浏览器 funct
2017-04-25 22:27:59 3061 5
原创 02 WebGL的引入及超简单使用
Document 你的浏览器不支持WebGL,请更换新的浏览器 function main() { //首先获取到canvas的dom对象 var canvas = document.getElementById("canvas"); //获取到WebGL的上下文 var gl = canvas.get
2017-04-25 21:50:17 3444
原创 01 什么是webgl
WebGL,是一项用来在网页上绘制和渲染复杂三维图形(3D图形),并允许用户与之进行交互的技术。优势:1.WebGL内嵌在浏览器中,不需要安装插件和库就可以直接在浏览器当中使用,最大优势。2.WebGL直接使用文本编辑器就可以去开发,不需要搭建开发环境。3.轻松跨平台,只要有浏览器就可以打开WebGL。4.WebGL的技术规范继承自免费和开源的OpenGL标准,而后者在计算机图
2017-04-25 21:25:45 7984
原创 nodejs express框架的快速安装
之前搞过一段时间的nodejs,后来由于注重前端,就放弃了一段时间的nodejs,最近需要搭建一个服务器,发现,自己连express安装都忘记了,而且百度一下发现连官网上说的都不怎么样。官网上只说了如何安装express,却没有讲将服务器搭建起来,这让新手怎么入门。所以我就写了这篇文章,一来是为了给自己做笔记,省得忘记,二来也是让大家和我一样快速入门,先把服务器搭建起来。下面开始,首先全局...
2017-04-25 16:28:16 1257
原创 使用Math.max和Math.min求数组的最大值和最小值
正常情况下,如果我们求数组的值,用到的就是for循环,如果在代码中经常求最大值和最小值的话,会显得代码很乱。所以,就考虑一中最简单的方法求最大值。使用Math里面自带的max和min方法function getMaxOfArray(numArray) { return Math.max.apply(null, numArray);}直接调用一下上面的函数,就会返回数组中最大的值。
2017-04-24 12:03:26 21294 5
原创 移动端解决两个andio不能同时播放的问题
备份一下解决方案,github上的,需要的时候自己来看https://github.com/pupunzi/jquery.mb.audio这里是一些demo:http://pupunzi.github.com/jquery.mb.audio/demo.htmlhttp://pupunzi.github.com/jquery.mb.audio/demo_queue.html
2017-04-20 10:10:01 2185
原创 移动端左划右划事件触发简单的代码
Title *{margin:0;padding:0;} ul li {height: 50px; box-sizing: border-box; list-style-type: none; border:1px solid #ccc;} 1 2 3 4 5 1 2 3
2017-04-18 16:13:12 6061 1
原创 解决window.colse()不管用的问题
如果你碰到了window.colse()不管用的问题,证明:你这个页面不是js打开的页面,所以骚年别再浪费时间了,浏览器给不了你这么大的权限,好好的研究点别的吧。我写这篇文章就是为了帮你们省点时间,你研究个十年八年也解决不了这个问题。
2017-04-18 10:12:02 963
转载 css3 矩阵 matrix
css3中的transform让我们操作变形变得很简单,诸如,translate–移动,scale–缩放,rotate–旋转,skew–斜切。这几个属性很方便,也很简单,但是其中matrix我们就不常使用了吧。-webkit-transform: matrix(1, 0, 0, 1, 100, 100)看到这样一句css,你也许很讨厌怎么一堆的数字,你也许斜视matrix–css也能搞出这货?这篇
2017-04-14 15:14:52 1865
原创 html5移动端触摸事件touch
移动端主要的触摸事件有三个:touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。touchend事件:当手指从屏幕上离开的时候触发。还有一个有待验证的:touchcancel事件:当系统停止跟踪触摸的时候触发。
2017-04-12 17:08:31 7812
转载 js数组的遍历方法filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()
filter(): 语法:var filteredArray = array.filter(callback[, thisObject]);参数说明:callback: 要对每个数组元素执行的回调函数。thisObject : 在执行回调函数时定义的this对象。//过滤掉小于
2017-04-07 16:24:38 18783
原创 js获取页面中的鼠标滚轮事件
附加事件其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件。 /*IE注册事件*/if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc);}Firefox使用addEventLis
2017-04-07 16:11:17 5984
Substance Painter 和 Unity 同步Standard
2023-09-22
InstantOC Dynamic Occlusion Culling LOD 3.0.0
2022-09-29
three.js开发指南-资源部分
2017-12-25
three.js开发指南-代码部分
2017-12-25
webpack配置es6+less开发环境
2017-11-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人