console
// https://www.cnblogs.com/xrst/p/13951836.html
// Prepare render env
const canvas = document.createElement("canvas");
canvas.width = 600;
canvas.height = 600;
document.body.appendChild(canvas);
const gl = canvas.getContext("webgl2");
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Create shader program
const vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, "\
#version 300 es\n\
uniform float u_offset;\
in vec2 a_xy;\
in vec3 a_color;\
in vec4 a_colorCode;\
flat out mediump vec3 v_colorFlat;\
out mediump vec3 v_colorSmooth;\
out mediump vec4 v_colorCode;\
void main()\
{\
gl_Position = vec4(a_xy.x, a_xy.y + u_offset, 0.0, 1.0);\
v_colorFlat = a_color;\
v_colorSmooth = a_color;\
v_colorCode = a_colorCode;\
}");
gl.compileShader(vs);
console.log(gl.getShaderInfoLog(vs));
const fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, "\
#version 300 es\n\
precision mediump float;\
precision mediump int;\
uniform int u_mode; // 1: smooth shading 2: flat shading 3: simulation\n\
uniform int u_dict[54];\
uniform vec3 u_palette[5];\
flat in vec3 v_colorFlat;\
in vec3 v_colorSmooth;\
in vec4 v_colorCode;\
out vec4 fragColor;\
void main()\
{\
if (u_mode == 1)\
fragColor = vec4(v_colorSmooth, 1.0);\
else if (u_mode == 2)\
fragColor = vec4(v_colorFlat, 1.0);\
else if (u_mode == 3)\
{\
int code = (v_colorCode.r == 0.0 ? 0 : v_colorCode.r > 0.999 ? 1 : 2)\
+ (v_colorCode.g == 0.0 ? 0 : v_colorCode.g > 0.999 ? 3 : 6)\
+ (v_colorCode.b == 0.0 ? 0 : v_colorCode.b > 0.999 ? 9 : 18)\
+ (v_colorCode.a == 0.0 ? 0 : v_colorCode.a > 0.999 ? 0 : 27);\
fragColor = vec4(u_palette[u_dict[code]], 1.0);\
}\
else\
discard;\
}");
gl.compileShader(fs);
console.log(gl.getShaderInfoLog(fs));
const prog = gl.createProgram();
gl.attachShader(prog, vs);
gl.attachShader(prog, fs);
gl.linkProgram(prog);
console.log(gl.getProgramInfoLog(prog));
gl.useProgram(prog);
const a_xy = gl.getAttribLocation(prog, "a_xy");
const a_color = gl.getAttribLocation(prog, "a_color");
const a_colorCode = gl.getAttribLocation(prog, "a_colorCode");
const u_mode = gl.getUniformLocation(prog, "u_mode");
const u_offset = gl.getUniformLocation(prog, "u_offset");
const u_dict = gl.getUniformLocation(prog, "u_dict");
const u_palette = gl.getUniformLocation(prog, "u_palette");
// Make vertex position data
const xyArray = [];
xyArray.push(-0.5); xyArray.push(+0.1);
xyArray.push(-0.5); xyArray.push(-0.1);
xyArray.push(-0.3); xyArray.push(+0.1);
xyArray.push(-0.3); xyArray.push(-0.1);
xyArray.push(-0.1); xyArray.push(+0.1);
xyArray.push(-0.1); xyArray.push(-0.1);
xyArray.push(+0.1); xyArray.push(+0.1);
xyArray.push(+0.1); xyArray.push(-0.1);
xyArray.push(+0.3); xyArray.push(+0.1);
xyArray.push(+0.3); xyArray.push(-0.1);
xyArray.push(+0.5); xyArray.push(+0.1);
xyArray.push(+0.5); xyArray.push(-0.1);
const xyVbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, xyVbo)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(xyArray), gl.STATIC_DRAW);
gl.vertexAttribPointer(a_xy, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_xy);
// Make regular color data
const RED = [1.0, 0.0, 0.0];
const GREEN = [0.0, 1.0, 0.0];
const BLUE = [0.0, 0.0, 1.0];
let colorArray = [];
colorArray = colorArray.concat(RED);
colorArray = colorArray.concat(RED);
colorArray = colorArray.concat(RED);
colorArray = colorArray.concat(RED);
colorArray = colorArray.concat(GREEN);
colorArray = colorArray.concat(GREEN);
colorArray = colorArray.concat(GREEN);
colorArray = colorArray.concat(GREEN);
colorArray = colorArray.concat(BLUE);
colorArray = colorArray.concat(BLUE);
colorArray = colorArray.concat(GREEN);
colorArray = colorArray.concat(GREEN);
const colorVbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorVbo);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colorArray), gl.STATIC_DRAW);
gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_color);
// Make color code data
const RED_CODE = [0.0, 0.0, 1.0];
const GREEN_CODE = [1.0, 0.0, 0.0];
const BLUE_CODE = [0.0, 0.0, 0.0];
let colorCodeArray = [];
colorCodeArray = colorCodeArray.concat(RED_CODE); colorCodeArray.push(0.0);
colorCodeArray = colorCodeArray.concat(RED_CODE); colorCodeArray.push(0.0);
colorCodeArray = colorCodeArray.concat(RED_CODE); colorCodeArray.push(0.0);
colorCodeArray = colorCodeArray.concat(RED_CODE); colorCodeArray.push(0.0);
colorCodeArray = colorCodeArray.concat(GREEN_CODE); colorCodeArray.push(0.0);
colorCodeArray = colorCodeArray.concat(GREEN_CODE); colorCodeArray.push(0.0);
colorCodeArray = colorCodeArray.concat(GREEN_CODE); colorCodeArray.push(0.0);
colorCodeArray = colorCodeArray.concat(GREEN_CODE); colorCodeArray.push(0.0);
colorCodeArray = colorCodeArray.concat(BLUE_CODE); colorCodeArray.push(0.0);
colorCodeArray = colorCodeArray.concat(BLUE_CODE); colorCodeArray.push(0.0);
colorCodeArray = colorCodeArray.concat(GREEN_CODE); colorCodeArray.push(1.0);
colorCodeArray = colorCodeArray.concat(GREEN_CODE); colorCodeArray.push(0.0);
const colorCodeVbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorCodeVbo);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colorCodeArray), gl.STATIC_DRAW);
gl.vertexAttribPointer(a_colorCode, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_colorCode);
// Bind palette
const UNUSED_COLOR = [0.0, 0.0, 0.0];
let palette = [];
palette = palette.concat(BLUE);
palette = palette.concat(GREEN);
palette = palette.concat(UNUSED_COLOR);
palette = palette.concat(RED);
palette = palette.concat(UNUSED_COLOR);
gl.uniform3fv(u_palette, new Float32Array(palette));
// Bind dictionary
const dict = [
0,
1,
0,
2,
-1,
-1,
0,
-1,
1,
3,
-1,
-1,
-1,
4,
-1,
-1,
-1,
3,
0,
-1,
1,
-1,
-1,
2,
2,
1,
0,
-1,
-1,
1,
-1,
-1,
-1,
2,
-1,
2,
-1,
-1,
-1,
-1,
-1,
-1,
-1,
-1,
4,
3,
-1,
3,
-1,
-1,
4,
3,
4,
4,
];
gl.uniform1iv(u_dict, new Int32Array(dict));
// Smooth shading
gl.uniform1f(u_offset, 0.5);
gl.uniform1i(u_mode, 1);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, xyArray.length / 2);
// Flat shading
gl.uniform1f(u_offset, 0.0);
gl.uniform1i(u_mode, 2);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, xyArray.length / 2);
// Simulation
gl.uniform1f(u_offset, -0.5);
gl.uniform1i(u_mode, 3);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, xyArray.length / 2);
// Clean up
gl.deleteBuffer(xyVbo);
gl.deleteProgram(prog);
<html><body></body></html>