WebGL - 将着色器代码写在 script 标签中

写 着色器 的时候以字符串的形式去写的话，没有颜色，而且很容易写错，下面我们可以将着色器代码写在script标签中，然后再获取标签中的text字符串就可以获取着色器程序

如下所示，如果你的编辑器装了支持GLSL语言的插件的话，也许会有颜色显示，如果没有的话可能没有颜色提示

<!-- 顶点着色器代码 -->
<script id="vertexShader" type="x-shader/x-vertex">
    void main() {
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        gl_PointSize = 10.0;
    }
</script>

<!-- 片元着色器代码 -->
<script id="fragmentShader" type="x-shader/x-fragment">
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
</script>

其实上面的代码就像我们使用template模板代码一样，获取id然后获取里面的字符

// 顶点着色器
var vertex_shader_source = document.getElementById('vertexShader').innerText;

// 片元着色器
var fragment_shader_source = document.getElementById('fragmentShader').innerText;

然后下面就可以初始化着色器了，当然了，上面这样写也不是最正确的，按道理来说应该把着色器语言放在一个单独的glsl文件中，然后我们单独区加载着色器文件，具体实现方式请看后面的文章