网页高性能图形编程（一）01——WebGL用户在页面中绘制和渲染3D图形 & 使用webgl绘制图形

最新推荐文章于 2024-07-11 15:31:14 发布

viceen

最新推荐文章于 2024-07-11 15:31:14 发布

阅读量901

点赞数 1

分类专栏：可视化文章标签： WebGL 3D图形 JavaScript GLSL ES 移动终端

本文链接：https://blog.csdn.net/weixin_44867717/article/details/119283188

版权

可视化专栏收录该内容

130 篇文章 79 订阅

订阅专栏

页面高性能图形编程

课程目标：

掌握在页面中使用WebGL绘制3D展示效果的图形。

第1章-课程介绍

01-学什么

WebGL 解决了用户在页面中绘制和渲染 3D 图形的功能，且使用户通过页面与三维图形交互成为可能，这项技术将在下一代开发用户易用直观界面中发挥重要的作用。在接下的几年，WebGL技术将广泛地应用于电子设备的移动终端，包括平板、手机设备，因此，WebGL 技术的学习显的特别重要。

WebGL能做什么？

02-技术栈

HTML、HTML5
JavaScript
GLSL ES语言

03-课程安排

第1章课程介绍
第2-5章基础知识点说明
第6章回顾总结

04-学习前提

HTML
CSS
JavaScript

第2章-初识WebGL

01-手动绘制一个WebGL图形

在这里插入图片描述

实现的步骤：

添加一个画布元素
获取到画布元素的基于webgl上下文环境对象
使用对象中的API实现图形绘制

实例-使用webgl绘制图形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <canvas id="cvs"
            width="200"
            height="200"
            style="border: dashed 1px red">
        你的浏览器不支持画布元素
    </canvas>
    <script type="text/javascript">
        //获取画布元素
        var cvs=document.getElementById("cvs");
        //获取到元素的上下文环境对象
        var gl=cvs.getContext('webgl');

        //设置绘制图形填充的颜色
        gl.clearColor(1.0, 0.0, 0.0, 1.0);

        //调用缓存中值填充图形
        gl.clear(gl.COLOR_BUFFER_BIT);
    
    </script>
</body>
</html>