Java教程

webGL入门(1)

本文主要是介绍webGL入门(1)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.什么是webGL?

webgl就是在网页上绘制和渲染图形(3D图形),并允许用户与之进行交互;

2.我为什么学webGL?

游戏开发中优化性能，它在web上可以开发直接查看效果，便于转化到游戏开发中理解。

3.最简单的webGL程序(清空绘图区)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03 绘制和变换</title>
</head>
<body onl oad="main()">
    <canvas id = "webgl",width = "400" , height="400"></canvas>
    <script src="libs/webgl-utils.js"></script>
    <script src="libs/webgl-debug.js"></script>
    <script src="libs/cuon-utils.js"></script>
    <script src = "RotateTriangle.js"></script> 
</body>
</html>

<RotateTriangle.js>

function main() {
    // 获取 <canvas> 元素
    var canvas = document.getElementById('webgl');

    // 获取WebGL渲染上下文
    var gl = getWebGLContext(canvas);
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    // 指定清空<canvas>的颜色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    // 清空<canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);
}

上面引用的库地址:https://gitee.com/JingEra/web-gl-common-library，请自行下载。
当然你如果不想用封装好的库你可以自己写，下面我也放一个参考项目吧。地址:https://gitee.com/JingEra/web-gl-common-library/tree/master/03
我是因为封装好的库在看书学习过程中有些方法调用比较方便。

4.理解

好像没什么好解释的，主要就是：
在这里插入图片描述

这篇关于webGL入门(1)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航