webGL第三课
来源:互联网 发布:非电气化铁路 知乎 编辑:程序博客网 时间:2024/06/06 11:00
添加纹理
添加颜色太单调,有时候需要在图形上添加纹理,比如一幅画,就用到了纹理特征。
为了让webGL可以访问我们指定的图像数据,需要将图像数据保存到webGL内部纹理对象中,步骤如下:
1. 创建纹理对象,使用createTexture()函数。
2. 将该纹理对象设置为相应纹理类型的当前操作对象;
3. 将指定的图像数据复制到该纹理对象对应的存储区,以使webGL内部能够访问到它。
4. 图像数据弄到webGL内部后,要给它打上标识。在片段着色器中,通过这个标识进行纹理访问。该标识称为纹理单元。分为两步操作:
1. 使用activeTexture()激活标识;
2. 使用bindTexture()函数,将指定的纹理对象关联到当前激活的纹理单元上。
5. 在顶点着色器中计算出顶点的纹理坐标。这里就是进行坐标转换,应该是将渲染坐标转换到范围为(0,0)到(1,1)的纹理坐标系上。
看了两个例子,发现,给图形上色或者给图形添加纹理,都是修改片段着色器中的gl_FragColor变量,所不同的是
给图形上色,是将颜色矩阵在顶点着色器中计算完成后,传给片段着色器,赋值给gl_FragColor;
给图形纹理,是将纹理坐标在顶点着色器中计算完成后,传给片段着色器,并赋值给gl_FragColor;
关于cross-origin错误
在将图片赋值给webGL时,如果直接打开html文件,则会出现这个错误!
原因是,javascript没有加载本地路径文件的权限,并且浏览器不让访问不同源的数据。比如,在www.lzw1.com网页上,要使用www.lzw2.com的资源,则也会出现错误。
解决方案是,在将所有网页和资源挂到网页服务器上。比如,我就将所有资源挂到了iis服务器上。这样,通过输入http://localhost/webGL/csdnExample3.html就可以正确加载图片了。
关于创建iis服务
之前想学习asp.net,所以了解了一下iis服务器,但是一直没用。今天想搭建一个用于webGL测试的网站,还是废了点事。
* 安装和启动iis服务器,很好弄,随便一片晚上文章就解决了。
* 我想将lzw.webgl.com绑定到我的电脑,这里卡了下。总结一下这个绑定步骤:
1. 新建站点,我命名为webGL,如下图所示进行输入。
2. 将域名关联到我的电脑。打开C:\Windows\System32\drivers\etc\hosts文件,将127.0.0.1 lzw.webgl.com这句话添加到最后。
3. 重启动一下webGL,浏览器输入http://lzw.webgl.com:8088/,即可访问网站了。
- webGL第三课
- webgl教程韩语版(第三课)
- [webGL学习]基于three.js构建WebGL实例第三讲
- WebGL 第八课 翻译
- WebGL 第七课 中文翻译
- webGL第二课
- webGL第四课
- WebGL
- WebGL
- WebGL
- webGL
- WebGL
- three js JavaScript编写的WebGL第三方库
- webGL第五课——屏幕坐标转到webGL坐标
- webgl教程韩语版(第一课)
- webgl教程韩语版(第一课)
- webgl教程韩语版(第二课)
- Learning WebGL第一课(日语)
- java.lang.IllegalStateException: getWriter() 异常(Filter时)
- 使用PHAsset获取相册中特定的图片
- [leetcode] 331. Verify Preorder Serialization of a Binary Tree
- Java制作计算机并实现基本运算
- setScaleType的各种情况
- webGL第三课
- sdut 1482 二元多项式
- Arithmetic problem | 求出 N 座大楼的外轮廓线
- gradle版本不一致,解决办法
- ssm(springMVC + spring+MyBatis) 小例
- 【杭电oj】1027 - Ignatius and the Princess II(STL - 全排列)
- 使用Maven搭建Struts2+Spring3+Hibernate4的整合开发环境
- 利用OpenCV读取大华网络摄像头
- FLASH禁止覆盖绝对定位 wmode="opaque"