To write the necessary code in javascript we will need a good editor. After the scripts and other resources like images and a html start-up page have been produced the files will be served from a server directory. For this we need an easy to use development server. And for debugging the code some support would be more than welcome. In this section the selection of tools we'll use is introduced.
VS Code is a free product from Microsoft. It is available on Windows, Linux and Mac. It can be downloaded from VS Code. After startup VS Code shows itself in a black background but there are many skins that can be chosen from (select one from the menu File | Preferences | Color Theme). In the following image the color theme Light (Visual Studio) was selected:
If in the left-most menu bar the 'files icon' is selected the first window will show the open editors an below that the directory structure in your directory. Editing will be done in the right window and VS Code will give the text with syntax highlighting. There is an extra window at the bottom that can be used to give terminal commands, for instance to start an executable or batch file. This window opens after the menu Terminal | New Terminal.
In the menubar on the left thare are more options than the one for the file editor.
The second one is for search/replace in files. It searches in more than one file at the same time. The search can be case sensitive and can use regular expressions as well.
The third one is for version control. Look for a tutorial on adding version control to VS Code. When working as a team on a complex project version control is essential. In this project we can do without. Backing up a file once in a while will be enough. Every chapter of the book is seen as a small work unit.
The fourth is the one with the image of a bug in it for debugging. It is possible to add breakpoints to the javascript code and to debug the code from VS Code.
The fifth and last one is for adding extensions. After clicking on this icon the enabled and recommended extensions are shown and a search box to find the extensions needed. In the next paragraph a debugger for Chrome is added to VS Code.
To use the VS Code environment for debugging javascript in Chrome an extension is needed. After filling in 'Debugger' in the search box of extensions a long list of debuggers will appear, one of them is 'Debugger for Chrome'. This extension is needed to establish the communication between VS Code and the Chrome debugger. Debugging is also possible using the debugger of Chrome: after loading a webpage in Chrome and pressing (on Windows) Ctrl+Shift+i the debugger presents itself. Sometimes it is nescessary to reload the page with Ctrl+r.
In many cases it will be easier to load a page from within VS Code and do the debugging there. For this, after installing the Chrome extension, press the Debug icon in the left menu bar. At the top the green arrow for debugging has appeared. This is the button that will start the proces, but first add a Configuration that tells the proces which address has the web page to start with (click to the right of the green button). After that a configuration map with name .vscode has appeared in your directory and in it the lanch.json file that has the configuration data:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
} Servez is an easy to use development server. The source code and the installer can be found on github. It can be used on Windows, Linux and Mac. After starting servez the following interface appears:
After filling in the address localhost:8080 in the Chrome browser all the files served under C:\Docs\VSCode\learnOpenGL_p6B will be shown, or if in that directory the file index.html exists that file will be served. In the log you will see all the resources that will be loaded can be seen. May be it is better to check the option Local machine only, but when unchecked you are able to view the results from another machine in your house.
Node.js is an open source server environment. We are used to running javascript in the browser. But with Node.js we can run JavaScript on their server.
Node.js also has npm, the package manager. With npm javascript packages can be installed. . The NPM program is installed on your computer when you install Node.js.
We will use npm to install the Typescript compiler, to get the type definitions of WebGl2 and to get the math package.
Typescript can in some way also be seen as a tool. It is a language on its own and will be used to produce the javascript code. The syntax of typescript and javascript is very similar, certainly if you look at the javascript version used in this project, version ES6. In fact it can be seen as 'javascript + something extra'. The 'something extra' with regard to version ES6 is only that it is typed. Instead of declaring a variable as 'let a;' the variable is declared as 'let a:number;'. To produce javascript from typescript the typing information has to be stripped from the text. The great advantage of Typescript is that it knows the type of the WebGL classes and of the math classes and VS Code gives that information while typing code. Typescript and ES6 support modules, classes and interfaces.
There is also a playground for typescript where you can test typescript syntax.
When it comes to debugging shader code (written in GLSL) the first step (after this first step we're on ourself) is to check the syntax. This can be done in the code at the moment the shader is compiled. But there are also sites where the code can be copied to check the validity. One of them is glsl sandbox. Also have a look at the book of shaders for many options to compile and make use of shaders.