注:文章译自http://wgld.org/,原作者杉本雅広(doxas).文章中假设有我的额外说明.我会加上[lufy:],另外,鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家指正. 本次的demo的执行结果 各种各样的光照 上次,以及上上次,介绍了通过顶点着色器来实现光照效果. 最開始介绍了从平行光源发出的光.上次介绍了平行光源的缺点.以及相应这个缺点的方法,就是环境光源. 这次是光照处理的第三篇.进一步介绍反射光照. 反射光和它的名字一样,就是模拟光的反射.通过反射光.…
注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指正. 本次的demo的执行结果 着色方法 上次介绍了反射光,反射光是实现光泽的必不可少的概念,到此为止,主要的光照效果都已经封装完成了. 光照的效果主要就是扩散光,环境光和反射光三种方法,灵活运用这三种光照,应该就能实现非常逼真的照明效果了. 前几篇一直在说光照,这次略微换个视点,看一下着色,着色是…
注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上[lufy:].另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指正. 本次的demo的执行结果 点光源 上次介绍了高氏着色和补色着色. 使用补色着色的手法.能够渲染更加自然的阴影.3D效果更加真实.可是会有计算量比較大的缺点. 这个仅仅能case by case,依据不同的情况来处理了.是个挺烦人的地方. 那么,这次,还是讲光源.我貌似听到了"不会吧......…
注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指正. 本次的demo的执行结果 照亮世界 上次绘制了一个像甜甜圈一样的圆环体模型,尽管没有涉及特别的新知识,可是也算成功的绘制出了3D模型了吧. 那么,这次来看一下光. 光在3D渲染中有非常多种类和用法.想把光研究透彻.也是非常不easy的. 现实世界中我们能看到物体,是由于物体反射的光进入我们的眼…
年2月)HTML5依旧处于草案阶段. HTML5支持网页端的多媒体功能和画布功能,追加了非常多全新的更合理的Tag标签.各个浏览器也都在逐渐的完好这些新的特性. Canvas对象表示一个 HTML画布元素.如它的名字一样,它定义了一个API支持脚本化client来绘制图形或是图片,能够通过javascript来操作这些API.当然WebGL也是利用canvas来实现的.只是在此之前,先来简单的说明一下canvas. 年底,HTML5将成为一种完整的成品标准. canvas标签的基础知识 canv…
前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用webgl画出一个三角形. 效果图: 在WebGL入门教程(一)-初识webgl中,知道如何绘制一个点 //绘制一个点 gl.drawArrays(gl.POINTS, 0, 1); 但是图形是有多个点组成,那么就应该考虑如何绘制多个点,WebGL提供了一种很方便的机制,缓冲区对象(buffer obje…
DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改DataGrid 的选择模式. SelectionUnit的选择模式. 成员名称   说明 Cell 选择单元格.单击单元格选中单元格. 单击任何行或列标题不执行. FullRow 选择全行. 单击单元格或行标题可以选择整行. CellOrRowHeader 可选择单元格,也可以通过点击行首选择全行…
Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集. 但是千万不要在一个模态框上重叠另一个模态框.要想同时支持多个模态框,需要自己写额外的代码来实现. 首先我们要引入CSS文件和JS文件(bootstrap需要jQuery的支持) <link href="bootstrap.min.css" rel="styleshee…
前面文章: 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…