首页 > 代码库 > webgl 绘制三角形 2.1

webgl 绘制三角形 2.1

2024-09-03 18:48:56   218人阅读

我的娘噶， 我真的学的太慢了， webgl,不行得加快脚楽。

技术分享

上节课就是随便介绍了一下webgl， 这节课的知识特别的多呢。 感觉得分为两次讲呢。

你就随着我的脚步慢慢走吧。

一 、首先，介绍一下，webgl里面的 坐标系。右手坐标系。不说了，直接上图

 

              技术分享

　　这就不用介绍了吧, 伸出你的右手比划一下，Z轴是穿出你的屏幕的，刺向你的哦， 不要眨眼， 不会伤害你的眼睛， 不过温馨提示，注意休息眼睛哦。

二 、 介绍两个shader, 与显卡GPU有关

1.vertexShader: 顶点shader, 以后我们就这样称呼了。

<script id = "shader-vs">
    attribute vec3 v3Position;
    void main(void){
        gl_Position = vec4(v3Position, 1.0);
    }
</script>

2.fragmentShader: 片段shader。



<script id = "shader-fs">
    void main(void){
        //指定三角形的颜色
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
</script>


 


 注意 ： 3维世界里面， 点划线，线画面，再构成我们形态各异的立体， 最小单元是点哦。 不过我们以后所建立的模型是由三角形筑成的。


技术分享


看到了咩，都是三角形构成了一只兔子哦。


三、 创建一个可执行程序


programObject = webgl.createProgram(); 


 然后关联两个shader.


四、 创建一个三角缓冲区


triangleBuffer = webgl.createBuffer();  这个缓冲区是在显卡里分派的， 将顶点数据存储到缓冲区里。 

五、 
webgl 绘制三角形 2.1






























        

            
                
                  
                
                

                    联系

                    我们