WebGL Api使用初探: 立方体

最新推荐文章于 2024-07-11 15:31:14 发布
最新推荐文章于 2024-07-11 15:31:14 发布
阅读量309 收藏 1
点赞数 1
分类专栏： Canvas与WebGL
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinold/article/details/102471396
版权

之前一直用ThreeJs来学习Web3D。但是随着深入学习，对原生的WebGL Api发生了兴趣。

WebGL Api使用初探: 立方体

网上有几个立方体的例子，不过都不完全，要么代码有问题，要么找不到外部js文件。

我就东拼西凑，整理出来一个完整的例子。

能找到原文的，留下了参考地址，不知道从哪参考来的，就不管了。

只引用了一个外部js文件cuon-matrix.js。本来想把cuon-matrix.js里需要用上的几行代码拿出来在一个文件中拼凑上去，然后把唯一的外部文件也想去掉来着，但是想来想去，算了。就这么用吧。

最初想法是不引用外部js的，全部在一个文件里拼出来。因为很多js文件不好找，对学习WebGL也没啥帮助。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            text-align: center;
        }
 
        #canvas {
            margin: 0;
        }
    </style>
    
    <script src="cuon-matrix.js"></script><!--https://blog-static.cnblogs.com/files/w-wanglei/cuon-matrix.js-->
</head>
<body onload="main()">
<canvas id="canvas" height="600" width="800"></canvas>
</body>
    <script id="VSHADER_SOURCE" type="x-shader/x-vertex">
       attribute vec4 a_Position;
       attribute vec4 a_Color;
       uniform mat4 u_ModelViewMatrix;
       varying vec4 v_Color;
       void main(){
          gl_Position = u_ModelViewMatrix * a_Position;
          v_Color = a_Color;
       }
    </script>
    <script id="FSHADER_SOURCE" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision mediump float;
        #endif
        varying vec4 v_Color;
        void main(){
           gl_FragColor = v_Color;
        }
    </script>
<script>
    //声明js需要的相关变量
    var canvas = document.getElementById('canvas');
    var names = ["webgl",
              "experimental-webgl",
              "webkit-3d", 
              "moz-webgl"];
    var gl = null;

    for (var i = 0; i < names.length; ++i) {
        try {
              gl = canvas.getContext(names[i]);
        } 
        catch(e) {}
        if (gl) break;
    }
    var jinprogram;
    function main() {
    
        if (!gl) {
            console.log("你的浏览器不支持WebGL");
            return;
        }
 
        //初始化着色器
        jinprogram = create_program()
 
        var n = initVertexBuffers(gl);
        if (n < 0) {
            console.log("无法创建缓冲区");
            return;
        }
 
        //设置视角矩阵的相关信息
        var u_ModelViewMatrix = gl.getUniformLocation(jinprogram, "u_ModelViewMatrix");
        if (u_ModelViewMatrix < 0) {
            console.log("无法获取矩阵变量的存储位置");
            return;
        }
 
        //设置底色
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
 
        //进入场景初始化
        draw(gl, n, u_ModelViewMatrix);
        
    }
    /*顶点着色器和片段着色器生成*/
    function create_shader(id) {
        // 用来保存着色器的变量
        var shader;

        // 根据id从HTML中获取指定的script标签
        var scriptElement = document.getElementById(id);

        // 如果指定的script标签不存在，则返回
        if (!scriptElement) {
            return;
        }

        // 判断script标签的type属性
        switch (scriptElement.type) {

            // 顶点着色器的时候
            case 'x-shader/x-vertex':
                shader = gl.createShader(gl.VERTEX_SHADER);//生成顶点着色器
                break;

            // 片段着色器的时候
            case 'x-shader/x-fragment':
                shader = gl.createShader(gl.FRAGMENT_SHADER);//生成片元着色器
                break;
            default :
                return;
        }

        // 将标签中的代码分配给生成的着色器
        gl.shaderSource(shader, scriptElement.text);

        // 编译着色器
        gl.compileShader(shader);

        // 判断一下着色器是否编译成功
        if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

            // 编译成功，则返回着色器
            return shader;
        } else {
            // 编译失败，弹出错误消息
            alert(gl.getShaderInfoLog(shader));
        }
    }
    function create_program() {
        // 程序对象的生成
        var program = gl.createProgram();

        // 向程序对象里分配着色器
        gl.attachShader(program, create_shader("VSHADER_SOURCE"));
        gl.attachShader(program, create_shader("FSHADER_SOURCE"));

        // 将着色器连接
        gl.linkProgram(program);

        // 判断着色器的连接是否成功
        if (gl.getProgramParameter(program, gl.LINK_STATUS)) {

            // 成功的话，将程序对象设置为有效
            gl.useProgram(program);

            // 返回程序对象
            return program;
        } else {

            // 如果失败，弹出错误信息
            alert(gl.getProgramInfoLog(program));
        }
    }
    function draw(gl, n, u_ModelViewMatrix) {
        //设置视角矩阵的相关信息（视点，视线，上方向）
        var viewMatrix = new Matrix4();
        viewMatrix.setLookAt(3, 3 , 7, 0, 0, 0, 0, 1, 0);
 
        //设置模型矩阵的相关信息
        var modelMatrix = new Matrix4();
        modelMatrix.setRotate(0, 0, 0, 1);
 
        //设置透视投影矩阵
        var projMatrix = new Matrix4();
        projMatrix.setPerspective(30,canvas.width/canvas.height,1,100);
 
        //计算出模型视图矩阵 viewMatrix.multiply(modelMatrix)相当于在着色器里面u_ViewMatrix * u_ModelMatrix
        var modeViewMatrix = projMatrix.multiply(viewMatrix.multiply(modelMatrix));
 
        //将试图矩阵传给u_ViewMatrix变量
        gl.uniformMatrix4fv(u_ModelViewMatrix, false, modeViewMatrix.elements);
 
        //开启隐藏面清除
        gl.enable(gl.DEPTH_TEST);
 
        //清空颜色和深度缓冲区
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
        //绘制图形
        gl.drawElements(gl.TRIANGLES,n,gl.UNSIGNED_BYTE,0);
 
    }
 
    function initVertexBuffers(gl) {
        // 创建一个立方体
        //    v6----- v5
        //   /|      /|
        //  v1------v0|
        //  | |     | |
        //  | |v7---|-|v4
        //  |/      |/
        //  v2------v3
        
        // a_Position
        /*
        var vertices = new Float32Array([   // 顶点的位置坐标数据
            1.0, 1.0, 1.0,  -1.0, 1.0, 1.0,  -1.0,-1.0, 1.0,   1.0,-1.0, 1.0,  // v0-v1-v2-v3 front
            1.0, 1.0, 1.0,   1.0,-1.0, 1.0,   1.0,-1.0,-1.0,   1.0, 1.0,-1.0,  // v0-v3-v4-v5 right
            1.0, 1.0, 1.0,   1.0, 1.0,-1.0,  -1.0, 1.0,-1.0,  -1.0, 1.0, 1.0,  // v0-v5-v6-v1 up
            -1.0, 1.0, 1.0,  -1.0, 1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0,-1.0, 1.0,  // v1-v6-v7-v2 left
            -1.0,-1.0,-1.0,   1.0,-1.0,-1.0,   1.0,-1.0, 1.0,  -1.0,-1.0, 1.0,  // v7-v4-v3-v2 down
            1.0,-1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0, 1.0,-1.0,   1.0, 1.0,-1.0   // v4-v7-v6-v5 back
        ]);
        //创建缓冲区对象
        initArrayBuffer(gl,vertices,3,gl.FLOAT, "a_Position");
        */
        // 下面的a_Position参考了
        // https://blog.csdn.net/hentailing/article/details/23671901
        var vertices = new Float32Array([
            //前
            1.0, 1.0, 1.0, 0.0, 0.8, 0.0,
            -1.0, 1.0, 1.0, 0.0, 0.8, 0.0,
            -1.0, -1.0, 1.0, 0.0, 0.8, 0.0,
            1.0, -1.0, 1.0, 0.0, 0.8, 0.0,
            //后
            1.0, 1.0, -1.0, 0.6, 0.9, 0.0,
            -1.0, 1.0, -1.0, 0.6, 0.9, 0.0,
            -1.0, -1.0, -1.0, 0.6, 0.9, 0.0,
            1.0, -1.0, -1.0, 0.6, 0.9, 0.0,
            //上
            1.0, 1.0, -1.0, 1.0, 1.0, 0.0,
            -1.0, 1.0, -1.0, 1.0, 1.0, 0.0,
            -1.0, 1.0, 1.0, 1.0, 1.0, 0.0,
            1.0, 1.0, 1.0, 1.0, 1.0, 0.0,
            //下
            1.0, -1.0, -1.0, 1.0, 0.5, 0.0,
            -1.0, -1.0, -1.0, 1.0, 0.5, 0.0,
            -1.0, -1.0, 1.0, 1.0, 0.5, 0.0,
            1.0, -1.0, 1.0, 1.0, 0.5, 0.0,
            //右
            1.0, 1.0, -1.0, 0.9, 0.0, 0.2,
            1.0, 1.0, 1.0, 0.9, 0.0, 0.2,
            1.0, -1.0, 1.0, 0.9, 0.0, 0.2,
            1.0, -1.0, -1.0, 0.9, 0.0, 0.2,
            //左
            -1.0, 1.0, -1.0, 0.6, 0.0, 0.6,
            -1.0, 1.0, 1.0, 0.6, 0.0, 0.6,
            -1.0, -1.0, 1.0, 0.6, 0.0, 0.6,
            -1.0, -1.0, -1.0, 0.6, 0.0, 0.6
        ]);
        //创建缓冲区对象
        var vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        var aVertexPosition = gl.getAttribLocation(jinprogram, "a_Position");
        gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 24, 0);
        gl.enableVertexAttribArray(aVertexPosition);
        
        
        // a_Color
        var colors = new Float32Array([     // 顶点的颜色
            0.4, 0.4, 0.4,  0.4, 0.4, 0.4,  0.4, 0.4, 0.4,  0.4, 0.4, 0.4,  // v0-v1-v2-v3 front(blue)
            0.9, 0.9, 0.9,  0.9, 0.9, 0.9,  0.9, 0.9, 0.9,  0.9, 0.9, 0.9,  // v0-v3-v4-v5 right(green)
            0.6, 0.6, 0.6,  0.6, 0.6, 0.6,  0.6, 0.6, 0.6,  0.6, 0.6, 0.6,  // v0-v5-v6-v1 up(red)
            0.1, 0.1, 0.1,  0.1, 0.1, 0.1,  0.1, 0.1, 0.1,  0.1, 0.1, 0.1,  // v1-v6-v7-v2 left
            0.5, 0.5, 0.5,  0.5, 0.5, 0.5,  0.5, 0.5, 0.5,  0.5, 0.5, 0.5,  // v7-v4-v3-v2 down
            0.8, 0.8, 0.8,  0.8, 0.8, 0.8,  0.8, 0.8, 0.8,  0.8, 0.8, 0.8   // v4-v7-v6-v5 back
        ]);
        initArrayBuffer(gl, colors, 3, gl.FLOAT, "a_Color");
        
        var indices = new Uint8Array([       // 绘制的索引
            0, 1, 2,   0, 2, 3,    // front
            4, 5, 6,   4, 6, 7,    // right
            8, 9,10,   8,10,11,    // up
            12,13,14,  12,14,15,    // left
            16,17,18,  16,18,19,    // down
            20,21,22,  20,22,23     // back
        ]);
 
        //将顶点索引数据写入缓冲区对象
        var indexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);
 
        return indices.length;
    }
 
    function initArrayBuffer(gl,data,num,type,attribute) {
        //创建缓冲区对象
        var buffer = gl.createBuffer();
        if (!buffer) {
            console.log("无法创建缓冲区对象");
            return -1;
        }
 
        //绑定缓冲区对象并写入数据
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
 
        //获取顶点位置变量位置
        var a_attribue = gl.getAttribLocation(jinprogram, attribute);
        if (a_attribue < 0) {
            console.log("无法获取顶点位置的存储变量");
            return -1;
        }
 
        //对位置的顶点数据进行分配，并开启
        gl.vertexAttribPointer(a_attribue, num, type, false, 0, 0);
        gl.enableVertexAttribArray(a_attribue);
    }
</script>
</html>
</html>

 

效果图

有个不完整的地方，就是颜色没有上去。还在继续学习并调整中。。。

 

比较好的例子：
https://www.wjceo.com/blog/webgl/2018-03-04/99.html

太古时代
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
WebGL 从0到1绘制一个立方体
dabaooooq的博客
09-16 443
我们来绘制如下图所示的立方体（图右侧显示了立方体每个顶点的坐标），其8个顶点的颜色分别为白色、品红色（亮紫色）、红色、黄色、绿色、青色（蓝绿色）、蓝色、黑色。你也许知道，为每个顶点定义颜色后，表面上的颜色会根据顶点颜色内插出来，形成一种光滑的渐变效果（“色体”，相当于二维的“色轮”）。绘制三角形，我们都是调用gl.drawArrays（）方法来进行绘制操作的。考虑一下，如何用该函数绘制出一个立方体呢。我们只能使用gl.TRIANGLES、gl.TRIANGLE_STRIP或者gl.TRIANGLE_FAN模
WebGL（2）:绘制立方体
spider_man
08-21 1172
实现的基本思路很简单，首先提供如上图所示立方体线框所有顶点的三维坐标，然后通过旋转矩阵对所有顶点进行旋转变换，最后调用绘制函数gl.drawArrays把所有点连成线渲染出来。 完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <canvas id="webgl" width="500" heig
【WebGL】WebGL API 详解
衷于栖
03-26 1761
基于 WebGL Specifications 最全面的API释疑。 类型以及对象定义 这部分内容主要定义一部分类型和数据结构。 typedef unsigned long GLenum; typedef boolean GLboolean; typedef unsigned long GLbitfield; typedef byte GLbyte; typ...
webgl三维绘制——彩色立方体
qq_37987033的博客
02-26 870
webgl的知识储备了这么多，从现在开始将会正式进入立方体的绘制，本文介绍如何在webgl中绘制一个三维立方体。
可视化学习：如何用WebGL绘制3D物体
最新发布
sdgfafg_25的博客
07-11 936
至此，我们就实现了正立方体的绘制。在3D物体的绘制中，正立方体属于是比较简单的一类，屏幕前的小伙伴们都可以来动手尝试下，感兴趣的小伙伴，还可以尝试去实现圆柱体、正四面体等等这些几何体的绘制。beckyye引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构。
webgl绘制图形API——drawArrays、drawElements
qq_37987033的博客
01-30 3356
gl.drawArrays()作为webgl中常用的函数图形绘制方法，可以在浏览器按照指定的模式绘制图形，与之相对的gl.drawElements()函数也是常用的绘制函数，本文将介绍二者的区别与使用。
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
01-19
本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法。分享给大家供大家参考，具体如下： 这篇主要记录WebGL的一些基本要点，顺便也学习下如何使用FBO与环境贴图。先看下效果图(需要支持WebGL，Chrome,火狐，IE11)。 主要实现过程如下，先用FBO输出当前环境在立方体纹理中，再画出当前立方体，最后画球，并且把FBO关联的纹理贴在这个球面上。 开始WebGL时，最好有些OpenGL基础，在前面讲Obj完善与MD2时，大家可能已经发现了，因为着色器的添加使用，原来一些Opengl大部分API已经没有使用。WebGL就和这差不多，大部分功能是着色器完成主要功能，记录下主要过程，大
webgl_loader:WegGL立方体加载器是一个循环动画，其中包含使用threeJS制作的立方体
05-12
在这个特定的项目"webgl_loader"中，"WegGL立方体加载器"是一个使用Three.js开发的组件，其核心功能是加载和展示立方体模型。这个加载器可能包括了立方体的几何信息、材质、纹理以及动画数据，以创建一个循环播放的...
webgl-threejs:webgl threejs
05-25
基于face-api.js有一个人脸识别登录的功能，登录后进入游戏 cd threejs-playgame-browser npm i npm start webgl 1. 工作原理 WebGL在电脑的GPU中运行。因此你需要使用能够在GPU上运行的代码。 这样的代码需要提供成...
webgl-postprocess:WebGL的后处理效果实验
04-30
WebGL是一种基于OpenGL标准的JavaScript API，用于在任何兼容的Web浏览器中进行2D和3D图形渲染。它为Web开发者提供了直接在浏览器内创建交互式、高性能图形的能力，而无需借助插件。"webgl-postprocess"项目是针对...
WebGL编程指南-21 通过顶点索引绘制渐变色的立方体
weixin_46773434的博客
09-27 492
如上，通过顶点索引绘制出了一个渐变色的立方体。
WebGL实现一个长方体包围盒随鼠标旋转缩放
02-17
通过一个长方体包围盒随鼠标旋转缩放具体实例，涵盖了WebGL中设置模型变换、视图变换、投影变换的技巧
webgl shader 边缘检测
03-30
webgl、threejs、shader检测边缘，并且渲染出边框，可以更改边框的大小颜色等，使通过shader检测边缘
【WebGL-iTwin.js】实战篇(一)：使用itwin.js画一个立方体
sunqian的博客
12-13 840
用itwin.js画一个彩色立方体
WebGL自学教程——WebGL示例：8. 带阴影的立方体
tiewen的专栏
10-25 4263
8. 带阴影的立方体 　      本章的目的是给立方体增加一个阴影。所谓阴影，就是通过转换矩阵，将物体的各个顶点压平在指定的平面上。      阴影转换矩阵的计算，我提供了一个专门的js函数gltMakeShadowMatrix。该函数还用到了其它的一些函数。这些函数全部来自《OpenGL 超级宝典(第二版)》配套光盘，只不过源程序是c写的，我作了一下转换。      gltMakeSh
WebGL之旅（十八） 点选立方体
寒风的技术博客
08-02 1182
原理这里用了一个比较巧妙(山寨)的方法判断是否点击到了立方体： 获取鼠标点击的位置； 将立方体绘制成红色（也可以是其他颜色）； 判断鼠标点击位置的颜色 恢复立方体的颜色 示例由以上原理，当鼠标点击位置的颜色跟立方体重绘之后的颜色一致为红色时，则点击的位置就在立方体上。(如果背景色也为红色，就尴尬了)。function main() { var gl = getGL(); var vs
webGL API笔记
蛋蛋老公的博客
08-26 136
如果没有指定背景色(也就是说，你没有调用gl.clearColor()),那么使用的默认值如下所示；这个程序的功能就是，使用背景色清空了标签的绘图区。即清空了定义的矩形区域。3、在绘图上下文上调用相应的绘图函数，以绘制二维图形；2、向该元素请求二维图形的“绘图上下文”；........................
WebGL编程指南-29 通过鼠标点击选中立方体，选中立方体的某个面
weixin_46773434的博客
10-10 367
以上代码有一个gl.readPixels() 用来读取指定区域的像素颜色。
webgl api的理解
HzjCsdn的博客
06-22 447
wengl的函数理解
WebGL实战：FBO实现立方体贴图与环境映射教程
本文是一篇关于WebGL技术的实践教程，着重讲解如何利用帧缓冲对象（FBO，Framebuffer Object）在WebGL环境中实现立方体贴图的效果。作者首先强调了WebGL与OpenGL的相似性，指出大部分功能由着色器处理，而非传统的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值