使用canvas 和 webgl2制作界面系统（一）
1 canvas 基础
2 webgl2 基础
画如下的三角形
2.1 使用getcontext webgl2
webgl2 必须使用webgl2 字符串
var gl = canvas.getContext("webgl2");
if (!gl) {
console.error("WebGL 2 not available");
document.body.innerHTML = "need WebGL 2 which is unavailable on this system."
}
gl.clearColor(0, 0, 0, 1);
2.2 顶点着色器和片元着色器
把顶点着色器和片元着色器的代码都放到javascript里面， 给script 加上id，在程序里面找到id以后读取字符串即可
<script type="vertex" id="vs">
#version 300 es
layout (location=0) in vec4 position;
layout (location=1) in vec3 color;
out vec3 vColor;
void main() {
vColor = color;
gl_Position = position;
}
</script>
<script type="fragment" id="fs">
#version 300 es
precision highp float;
in vec3 vColor;
out vec4 fragColor;
void main() {
fragColor = vec4(vColor, 1.0);
}
</script>
var vsSource = document.getElementById("vs").text.trim();
var fsSource = document.getElementById("fs").text.trim();
整体代码如下
DOCTYPE html>
<html>
<head>
<title>WebGL 2 Exampletitle>
<meta charset="utf-8">
<link rel="stylesheet" href="css/webgl2examples.css">
head>
<body>
<div id="example-title">
<header>WebGL 2 Example: 三角形header>
<div id="features">
Features: 顶点数组
div>
div>
<script type="vertex" id="vs">
#version 300 es
layout (location=0) in vec4 position;
layout (location=1) in vec3 color;
out vec3 vColor;
void main() {
vColor = color;
gl_Position = position;
}
script>
<script type="fragment" id="fs">
#version 300 es
precision highp float;
in vec3 vColor;
out vec4 fragColor;
void main() {
fragColor = vec4(vColor, 1.0);
}
script>
<canvas id="webgl-canvas">canvas>
<script>
var canvas = document.getElementById("webgl-canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var gl = canvas.getContext("webgl2");
if (!gl) {
console.error("WebGL 2 not available");
document.body.innerHTML = "This example requires WebGL 2 which is unavailable on this system."
}
gl.clearColor(0, 0, 0, 1);
/
// SET UP PROGRAM
/
var vsSource = document.getElementById("vs").text.trim();
var fsSource = document.getElementById("fs").text.trim();
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsSource);
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(vertexShader));
}
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsSource);
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(fragmentShader));
}
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error(gl.getProgramInfoLog(program));
}
gl.useProgram(program);
/
// 创造三角形
/
var triangleArray = gl.createVertexArray();
gl.bindVertexArray(triangleArray);
var positions = new Float32Array([
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
0.0, 0.5, 0.0
]);
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(0);
var colors = new Float32Array([
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
0.0, 0.0, 1.0
]);
var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(1);
// DRAW
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
script>
body>
html>
后面我们就直接使用webgl2 和 canvas 来画这些新的界面