玩转WebGL(二)TypeScript开发环境搭建

1.安装

安装好NodeJs和VsCode

安装好TypeScript 执行

npm i typescript -g

2.初始化

• 创建一个项目文件夹,执行命令生成package.json

npm init

• 创建tsconfig.json

tsc --init

• 创建项目子文件夹

  src 目录：存放项目ts源码

  lib 目录：存放库文件

  bin 目录：存放编译后的js

3.初始化

安装vscode插件Debugger for Chrome

在.vscode文件夹下新增launch.json,配置如下:

{
	"version": "0.2.0",
	"configurations": [ 
		{
			"name": "chrome调试",
			"type": "chrome",
			"request": "launch",
			"trace": true,
			"smartStep": true,
			"file": "${workspaceRoot}/bin/index.html",
			"runtimeArgs": [
				"--allow-file-access-from-files",
				"--allow-file-access-frome-files",
				"--disable-web-security"
			],
			"sourceMaps": true,
			"webRoot": "${workspaceRoot}",
			"userDataDir": "${workspaceRoot}/.vscode/chrome",
			"fixedPort":false,
			"sourceMapPathOverrides": {
				"src/*": "${workspaceRoot}/src/*"
			},	
			"preLaunchTask": "tsc"	
		}
	]
}

在.vscode文件夹下新增tasks.json文件,配置如下:

{
	"version": "2.0.0",
	"tasks": [
		{
			"label": "tsc",
			"type": "shell",
			"command": "tsc",
			"group": {
				"kind": "build",
				"isDefault": true
			}
		}
	]
}

这边的配置主要是让我们能在vscode中,直接通过运行来调用chrome浏览器来调试程序.

4.创建canvas

在bin文件夹下创建index.html,其中glcanvas就是绘图的画布,bundle.js是ts代码编译后的文件.
webGL的尺寸是与canvas的宽高相关联的,不要使用css来设置宽高,那样会造成图形的拉伸.开始绘制之前先调用clear方法,清除颜色缓冲区中的数据,最后调用draw方法,真正绘制出图像。

class Main {
	constructor() {
		this.draw();
	}

	private draw() {  
		// 顶点着色器程序
		let VSHADER_SOURCE = 
		'void main() {\n' +
		'  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
		'  gl_PointSize = 10.0;\n' +                    // Set the point size
		'}\n';

		// 片元着色器程序
		let FSHADER_SOURCE =
		'void main() {\n' +
		'  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
		'}\n';
		
		// 获取 <canvas> 元素
		let canvas = document.querySelector("#glcanvas") as HTMLCanvasElement;

		// 获取WebGL渲染上下文
		let gl = canvas.getContext('webgl')
		if (!gl) {
			console.log('你的浏览器不支持webgl');
			return;
		}

		// 创建程序对象
		let program = gl.createProgram();

		const vertexShader = this.loadShader(gl, gl.VERTEX_SHADER, VSHADER_SOURCE); //创建顶点着色器对象
		const fragmentShader = this.loadShader(gl, gl.FRAGMENT_SHADER, FSHADER_SOURCE);//创建片元着色器对象

		// 为程序对象分配着色器
		gl.attachShader(program, vertexShader);
		gl.attachShader(program, fragmentShader);

		// 连接程序对象
		gl.linkProgram(program);

		// 指定清空<canvas>的颜色
		gl.clearColor(0.0, 0.0, 0.0, 1.0);

		// 清空<canvas>
		gl.clear(gl.COLOR_BUFFER_BIT);

		// 使用程序对象
		gl.useProgram(program);

		// 绘制一个点
		gl.drawArrays(gl.POINTS,0,1);
  	}

	private loadShader(gl: WebGLRenderingContext, type: number, source: string) {
		// 创建着色器对象
		const shader = gl.createShader(type);
		// 向着色器对象中填充着色器
		gl.shaderSource(shader, source);
		// 编译着色器
		gl.compileShader(shader);

		return shader;
	}
}

new Main();

在vscode中运行,看到如下画面就ok了