首页 > 代码库 > 01 最简单的WebGL程序

01 最简单的WebGL程序

2024-10-02 16:15:02   215人阅读

    我们新建一个html页面，将下面的代码复制粘贴到里面，一个最简单的WebGL程序就写好了。借助这一个程序，大家可以尝试改变各个值的大小，了解一下WebGL各个坐标值的方向和坐标值的大小。从下一节开始，我们利用最简单的程序，继续介绍WebGL的相关知识。

 1 <!DOCTYPE html>
 2 
 3 <html lang="zh-CN">
 4 
 5 <head>
 6     <meta charset="UTF-8" />
 7     <title>01_最简单的WebGL程序</title>
 8 
 9     <!-- 顶点着色器 -->
10     <script id="shader-vs" type="x-shader/x-vertex">
11         attribute vec3 position;
12 
13         void main(void) {
14         gl_Position = vec4(position, 1.0);
15         }
16     </script>
17 
18     <!-- 片源着色器 -->
19     <script id="shader-fs" type="x-shader/x-fragment">
20         precision mediump float;
21 
22         void main(void) {
23         gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
24         }
25     </script>
26 
27     <script type="text/javascript">
28         var start = function () {
29             // 上下文环境
30             var canvas = document.getElementById("mycanvas");
31             var gl = canvas.getContext("experimental-webgl");
32             gl.viewportWidth = canvas.width;
33             gl.viewportHeight = canvas.height;
34             gl.viewport(0, 0, gl.viewportWidth, gl.viewportWidth);
35             gl.clearColor(0.0, 0.0, 0.0, 1.0);
36             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
37             gl.enable(gl.DEPTH_TEST);
38 
39             // 顶点着色器
40             var shader = gl.createShader(gl.VERTEX_SHADER);
41             gl.shaderSource(shader, document.getElementById(‘shader-vs‘).innerHTML);
42             gl.compileShader(shader);
43             var vertexShader = shader;
44 
45             // 片源着色器
46             var shader = gl.createShader(gl.FRAGMENT_SHADER);
47             gl.shaderSource(shader, document.getElementById(‘shader-fs‘).innerHTML);
48             gl.compileShader(shader);
49             var fragmentShader = shader;
50 
51             // 着色器程序
52             var shaderProgram = gl.createProgram();
53             gl.attachShader(shaderProgram, vertexShader);
54             gl.attachShader(shaderProgram, fragmentShader);
55             gl.linkProgram(shaderProgram);
56             gl.useProgram(shaderProgram);
57 
58             // 缓存
59             var buffer = gl.createBuffer();
60             gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
61 
62             // 顶点
63             var vertices = [
64                  -0.5, 0.0, 0.0,
65                  0.5, 0.0, 0.0,
66                  0.0, 0.5, 0.0
67             ];
68             gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
69 
70             var position = gl.getAttribLocation(shaderProgram, "position");
71             gl.enableVertexAttribArray(position);
72             gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
73 
74             // 绘制
75             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
76         }
77     </script>
78 </head>
79 
80 <body onload="start();">
81     <canvas id="mycanvas" style="border: none;" width="500" height="500"></canvas>
82 </body>
83 
84 </html>

    效果图如下：

技术分享

01 最简单的WebGL程序


联系
我们