WebGL初步上手

最新推荐文章于 2024-01-30 13:45:33 发布

VIP文章一只即将工作的前端开发兔

最新推荐文章于 2024-01-30 13:45:33 发布

阅读量285

点赞数

本文链接：https://blog.csdn.net/weixin_44078610/article/details/107145048

版权

什么是WebGL

先来看一段官方解释：

WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5 元素中使用。这种一致性使API可以利用用户设备提供的硬件图形加速。

简单理解就是WebGL这个技术，可以实现3D的效果展现在2D的屏幕上，展现出很绚丽的效果

使用webGL一般分为以下几个步骤
1.设置WebGL的上下文环境
2.给WebGL的上下文环境添加2D内容
3.在WebGL中使用着色器(shader)去赋予颜色
4.用WebGL让对象动起来
5.使用WebGL创建3D物体
6.在WebGL中使用纹理贴图(texture)
7.在WebGL上下文环境中模拟灯光效果.
8.展示如何让纹理贴图动起来; 在此例中, 会投射一个Ogg格式的视频在一个旋转立方体的各个面上.

基于只是简单上手，所以只写了1,2部分，话不多说，代码撸一波

为了使用 WebGL 进行 3D 渲染，你首先需要一个 canvas 元素
<body>
    <canvas width="500" height="500" id="oCanvas"></canvas>
</body>

<!-- 顶点着色器源码 --> 
    <script type="notjs" id="vertex">
     
        void main(){
   
            // 顶点位置
            gl_Position = vec4(0,0,0,1);
            // 像素大小
            gl_PointSize = 10.0

最低0.47元/天解锁文章

一只即将工作的前端开发兔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebGL初步上手

什么是WebGL先来看一段官方解释：WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5 元素中使用。这种一致性使API可以利用用户设备提供的硬件图形加速。简单理解就是WebGL这个技术，可以实现3D的效果展现在2D的屏幕上，展现出很绚丽的效果使用webGL一般分为以下几个步骤1.设置WebGL的上下文环境
复制链接

扫一扫