着色器代码放在 Script 标签中

优质

小牛编辑

152浏览

2023-12-01

WebGL着色器代码在JavaScript中以字符串的形式存在，编写代码比较麻烦，为了编写方便，可以把着色器代码写在script或者其他HTML元素标签中，然后通过元素.innerText属性获得元素中的字符串，也就是着色器的代码。

在原来WebGL绘制一个点的代码基础上进行更改

<!-- 顶点着色器源码 -->
<script id="vertexShader" type="x-shader/x-vertex">
  void main() {
    //给内置变量gl_PointSize赋值像素大小
    gl_PointSize=20.0;
    //顶点位置，位于坐标原点
    gl_Position =vec4(0.0,0.0,0.0,1.0);
  }
</script>
<!-- 片元着色器源码 -->
<script id="fragmentShader" type="x-shader/x-fragment">
  void main() {
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);
  }
</script>

//顶点着色器源码
var vertexShaderSource = document.getElementById('vertexShader').innerText;
//片元着色器源码
var fragShaderSource = document.getElementById('fragmentShader').innerText;
//初始化着色器
var program = initShader(gl,vertexShaderSource,fragShaderSource);