html 怎么显示co2字体,index.html

webgl

void main () {

// declare position

gl_Position = vec4(0.0, 0.0, 0.0, 1.0)

// declare pointer

gl_PointSize = 10.0

}

void main() {

// 设置像素颜色为红色

gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0)

}

// # step 1

const canvas = document.querySelector('#canvas');

const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')

// # step 2

// 创建顶点着色器源码

const vertexShaderSource = document.querySelector('#vertexShader').innerHTML;

// 创建顶点着色器对象

const vertexShader = gl.createShader(gl.VERTEX_SHADER);

// 将源码分配给顶点着色器对象

gl.shaderSource(vertexShader, vertexShaderSource);

// 编译顶点着色器程序

gl.compileShader(vertexShader);

// # step 3

// 获取片元着色器源码

const fragmentShaderSource = document.querySelector('#fragmentShader').innerHTML;

// 创建片元着色器程序

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

// 将源码分配给片元着色器对象

gl.shaderSource(fragmentShader, fragmentShaderSource);

// 编译片元着色器

gl.compileShader(fragmentShader)

// # step 4

// 创建着色器程序

const program = gl.createProgram();

// 将顶点着色器挂载在着色器程序上

gl.attachShader(program, vertexShader);

// 将片元着色器挂载在着色器程序上

gl.attachShader(program, fragmentShader);

// 链接着色器程序

gl.linkProgram(program);

// 使用刚刚创建好的着色器程序

gl.useProgram(program);

// 设置清空画布颜色为黑色

gl.clearColor(0.0, 0.0, 0.0, 1.0);

// 用上一步设置的清空画布颜色清空画布。

gl.clear(gl.COLOR_BUFFER_BIT);

// 绘制点

gl.drawArrays(gl.POINTS, 0, 1);

一键复制

编辑

Web IDE

原始数据

按行查看

历史