1 设置背景色

docs/1 WebGL程序结构

@@ -0,0 +1,19 @@
+# WebGL
+
+WebGL1.0基于OpenGL ES2.0
+WebGL2.0基于OpenGL ES3.0
+这里使用WebGL1.0,参考<<WebGL编程指南>>的代码改写
+
+
+# OpenGL ES着色器语言
+
+WebGL基于OpenGL ES 2.0 使用GLSL ES编写着色器
+着色器语言是一种类似于C的编程语言
+
+# WebGL的程序结构
+
+WebGL的程序主要由HTML，javascript和GLSL ES三部分组成
+
+HTML中使用canvas元素作为WebGL的容器
+javascript实现交互效果
+GLSL ES用来描述三维图形的创建

docs/2 WebGL 2d绘制

@@ -0,0 +1,23 @@
+# 设置背景色
+
+## 主要代码文件
+src/index.html
+src/webgl/hello.js
+
+## index.html
+引入canvas标签。
+
+## hello.js
+`
+ const canvas = document.getElementById('webgl');
+
+const gl = canvas.getContext('webgl');
+`
+获取Webgl上下文对象
+
+`
+gl.clearColor(0.0,0.0,0.0,1.0);
+gl.clear(gl.COLOR_BUFFER_BIT);
+`
+设置背景色
+清空canvas

src/index.js

@@ -1 +1,3 @@
-console.log("Test");
+import hello from "./webgl/hello";
+
+hello();

src/webgl/hello.js

@@ -0,0 +1,13 @@
+export default function(){
+    const canvas = document.getElementById('webgl');
+
+    const gl = canvas.getContext('webgl');
+
+    if (!gl) {
+        console.error("获取webgl失败");
+        return false;
+    }
+
+    gl.clearColor(0.0,0.0,0.0,1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+}