start webGL!

♦ 4月 22, 2012 ♦ Leave Your Comment

为了参加 HTML5 contest 开始学习 webGL 啦! 教程来自 HiWebGl 网站~

关于浏览器对 webgl 的支持问题,详情请戳这里 → http://www.scriptlover.com/static/1483-%E6%B5%8F%E8%A7%88%E5%99%A8-WebGL

学习时发现从第五章开始, chrome 的显示出现问题,原因是从第五章的demo开始使用纹理,在 win7 下的解决方案是右键单击 chrome 的快捷方式,在目标框的路径后加入参数 -allow-file-access-from-files, 用设置好的快捷方式打开chrome,网络的 demo 就可以正常显示了.但是在本地的 demo 直接打开仍然显示不正常,解决方法是将 html 文件拖动到设置好的 chrome 快捷方式上,用设置好的参数打开,就可以正常显示了.

另外火狐浏览器本来在我电脑上可以正常显示所有的 demo, 但是重装系统以后不知道为什么所有 demo 都打不开了,出现”can’t initialize webgl”的提示,解决方法是在地址栏输入 about:config ,然后将 webgl.force-enabled 设置为true, 将 webgl.disabled 设置为 false (默认).查了下,是因为 firefox 升级把参数改掉了, force-enabled 的作用好像是” ignore the blacklist “(意思是我的显卡被列入黑名单了吗=___=!).

而且 firefox 的3D方式查看网页的功能也不见了.调出来的方法戳这里,也是要改参数(我的显卡是被赤果果的鄙视了啊摔) → http://blog.alphatr.com/firefox-11-3d-webpage.html, 根据参数设置推断这个功能应该也是 webgl 实现的 .

——————————————————傲娇的分割线———————————————————

下面是学习心得.据说 webGL 继承自 openGL2.0.由于之前学过 DX 而没学过 openGL ,所以学习的时候会与 DX 对应.同样经历的可以参考下….

webGL 使用硬件加速渲染,于是要写 shader, 使用 GLSL ,和 dx 的 HLSL 差不多 .

shader 分为 顶点着色器 vertex shader 和 片元着色器 fragment shader (这个跟dx的pixel shader 差不多,我还是喜欢 pixel 这个叫法).下面贴下一段示例:

<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;
    attribute vec2 aTextureCoord;

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    varying vec2 vTextureCoord;

    void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vTextureCoord = aTextureCoord;
    }
</script>

 

<script id="shader-fs" type="x-shader/x-fragment">

    precision mediump float;

    varying vec2 vTextureCoord;

    uniform sampler2D uSampler;

    void main(void) {
        gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
    }
</script>

shader 里的 attribute 值就相当于HLSL里的 Input 值, uniform 相当于 const 常量,这些值都来自于javascript, varying 相当于 output , varying 值从顶点着色器输出到片元着色器,然后片元着色器进行处理后 gl_FragColor 输出的就是每个像素的颜色值了.

通过html5的 canvas 标签可以很方便的将 webGL 的显示结果像一张图片一样的嵌入网页:

<canvas id="lesson05-canvas" style="border: none;" width="500" height="500"></canvas>

————————————————-???————————————————————————

写的东西被批评了T___T,不写了….