卜若的代码笔记-webgl系列-第二章：第一个webgl的demo

最新推荐文章于 2020-12-08 16:00:38 发布

卜若

最新推荐文章于 2020-12-08 16:00:38 发布

阅读量408

点赞数

分类专栏： webgl 文章标签： webgl

本文链接：https://blog.csdn.net/qq_37080133/article/details/100577269

版权

webgl 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

1.Webgl的组成：

1.1 canvas：

canvas是啥玩意？它是就是你的html里面去用于渲染的一块地方。

在JS里面时一个DOM元素，就非常像我们的Unity里面的GameObject对象的子类Canvas对象

1.2 Objects:

一个渲染常见RenderScene里面的组成元素比如一个圆柱体，一个球体，这种体就是Objects。

1.3 Lighting：

你能看到任何物体，都需要它。

1.4 Camera

Canvas以Viewport的角度去看待这个RenderWorld。

2 创建一个canvas

创建一个canvas
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id = "mainCanvas" width="500" height="500" style="border: 2px dotted blue;}"></canvas>
</body>
</html>

3 获得webgl的handle(句柄)

function getGLContext(){
    var gl = null;
    var canvas = document.getElementById("mainCanvas");
    if (canvas == null){
        alert("there is no canvas on this page");
        return;
    }
    var names = ["webgl",
        "experimental-webgl",
        "webkit-3d",
        "moz-webgl"];
    for (var i = 0; i < names.length; ++i) {
        try {
            gl = canvas.getContext(names[i]);
        }
        catch(e) {}
        if (gl) break;
    }
    if (gl == null){
        alert("WebGL is not available");
    }
    else{
        alert("Hooray! You got a WebGL context");
    }

    return gl;
}

4.webgl的状态机制：

webgl可以看做是一个种状态机，也就是说，你可以修改webgl里面的某种状态，在你下次修改之前，它会被固化。直到你再次修改它。

任何时候，你都可以去查看这种状态，以便于你能够去确定当前webgl的状态。

4.1 键值的捕获

window.onkeydown = checkKey;
function checkKey(ev){
    switch(ev.keyCode) {
        case 49: { // 1
            console.info("按下了1键");
            break;
        }
    }
}

4.2 第一个webgl_demo

function Color(r,g,b,a) {
    var color = {};
    color.r = r;
    color.g = g;
    color.b = b;
    color.a = a;
    return color;

}
function brush(gl,color) {
    gl.clearColor(color.r,color.g,color.b,color.a);
    gl.clear(gl.COLOR_BUFFER_BIT);

}

4.2 第一个webgl_demo_使用

window.onkeydown = checkKey;
function checkKey(ev){
    switch(ev.keyCode) {
        case 49: { // 1
            brush(gl, Color(0.3,0.3,0.3,1));
            break;
        }
    }

}

卜若

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
卜若的代码笔记-webgl系列-第二章：第一个webgl的demo

1.Webgl的组成：1.1 canvas：canvas是啥玩意？它是就是你的html里面去用于渲染的一块地方。在JS里面时一个DOM元素，就非常像我们的Unity里面的GameObject对象的子类Canvas对象1.2 Objects:一个渲染常见RenderScene里面的组成元素比如一个圆柱体，一个球体，这种体就是Objects。1.3 Lighting：...
复制链接

扫一扫