1. Install

Install NodeJs and VsCode

Install TypeScript execution

npm i typescript -g
Copy the code

2. The initialization

  • Create a project folder and run the command to generate package.json
npm init
Copy the code
  • Create tsconfig. Json
tsc --init
Copy the code

  • Create project subfolders

    SRC directory: store the project ts source code

    Lib directory: Store library files

    Bin directory: stores compiled JS files

3. The initialization

Install vscode Debugger for Chrome

Add launch.json to the.vscode folder and configure it as follows:

{
	"version": "0.2.0"."configurations": [{"name": "Chrome debugging"."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"}}]Copy the code

Add the tasks.json file to the. Vscode folder and configure it as follows:

{
	"version": "2.0.0"."tasks": [{"label": "tsc"."type": "shell"."command": "tsc"."group": {
				"kind": "build"."isDefault": true}}}]Copy the code

The main purpose of this configuration is to debug the application by calling chrome directly from vscode.

4. Create a canvas

Create index.html in the bin folder, where glCanvas is the canvas for drawing and bundle.js is the compiled file of TS code. WebGL size is related to the width and height of canvas, do not use CSS to set the width and height, as this will cause the graph to stretch. The clear method is called before drawing to clear the data in the color buffer, and finally the draw method is called to actually draw the image.


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

	private draw() {// Vertex shader programlet 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'; // Chip shader programlet FSHADER_SOURCE =
		'void main() {\n' +
		'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n' + // Set the point color
		'}\n'; // Get the <canvas> elementlet canvas = document.querySelector("#glcanvas") as HTMLCanvasElement; // Get the WebGL rendering contextlet gl = canvas.getContext('webgl')
		if(! gl) { console.log('Your browser does not support WebGL');
			return; } // Create a program objectletprogram = gl.createProgram(); const vertexShader = this.loadShader(gl, gl.VERTEX_SHADER, VSHADER_SOURCE); // Create a vertex shader object const fragmentShader = this.loadShader(gl, gl.FRAGMENT_SHADER, FSHADER_SOURCE); AttachShader (program, vertexShader); attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); // linkProgram object gl.linkProgram(program); // Specify to clear the <canvas> color gl.clearcolor (0.0, 0.0, 0.0, 1.0); // Clear <canvas> gl.clear(gl.color_buffer_bit); // Use the program object gl.useProgram(program); // draw a point gl.drawArrays(gl.POINTS,0,1); } private loadShader(gl: WebGLRenderingContext,type: number, sourceConst shader = gl.createshader (const shader = gl.createshader (type); // Fill the shader object with the shader gl.shaderSource(shader,source); // compile the shader gl.pileshader (shader);return shader;
	}
}

new Main();
Copy the code

Run in vscode, see the following screen is ok