WebGL Tutorial

How to change WebGL1-based documents to WebGL2




Description

This document is to describe the basic method of changing the WebGL1-based document to WebGL2.
WebGL2 is nearly 100% back compatible with WebGL1. In this document, there will be description of very basic way to change the WebGL1 script to WebGL2.
Very brief comments are here, so read the source code to see the details.

Initializing

First, you use "webgl2" instead of "webgl", on initializing canvas.
Note that there is no "experimental-webgl2". Many WebGL1 extensions are a standard part of WebGL2.

Switching the Shader Version to GLSL 3.00 ES

Add "#version 300 es" to the very first line of the shader source code.
CAUTION: NO BLANKS AND LINES ARE ALLOWED BEFORE THIS DECLARATION.

Some Changes in Shader Code

Add "#version 300 es" to the very first line of the shader source code.
CAUTION: NO BLANKS AND LINES ARE ALLOWED BEFORE THIS DECLARATION.

No more gl_fragColor. In WebGL1, your fragment shader would set the specific variable "gl_fragColor" to set the output value.
You can now use any name for the output, except for those starting with "gl_".

Change "varying" to "in" or "out", and "attribute" to "in".
The output of the vertex shader would be the input of the fragment shader. We call them "varying" values.
Simply change them to "out" in the vertex shader, and "in" in the fragment shader.

References

This page is modified from Lab 06 of the Computer Graphics course.
Additional information is from WebGL2 Fundamentals.
WebGL1 to WebGL2 / WebGL2 Fundamentals