浅谈Three.js源码-render之WebGLShader.js_three.webglshader: gl.getshaderinfolog() vertex-优快云博客

本文介绍了一个用于WebGL的着色器编译脚本，包括顶点着色器和片元着色器的创建及编译流程，并提供了一个实用的函数用于调试时查看着色器代码的行号。

/**
 * @author mrdoob / http://mrdoob.com/
 */
/*
* 此脚本为创建着色器并进行编译的相关脚本。着色器（shader）分为顶点着色器和片元着色器，
* 这里送上一篇大神写的详解吧，链接：http://blog.youkuaiyun.com/lufy_legend/article/details/38342919。
*
* 2.*/
function addLineNumbers( string ) {//以换行符为标志对字符串加行号并换行的方法

   var lines = string.split( '\n' );

   for ( var i = 0; i < lines.length; i ++ ) {

      lines[ i ] = ( i + 1 ) + ': ' + lines[ i ];

   }

   return lines.join( '\n' );

}
//gl为WebGL上下文，
//type的取值有两个：gl.VERTEX_SHADER（顶点着色器）和gl.FRAGMENT_SHADER（片源着色器）
//string为着色器中运行的代码
function WebGLShader( gl, type, string ) {

   var shader = gl.createShader( type );//创建着色器

   gl.shaderSource( shader, string );//将运行的代码与着色器进行绑定
   gl.compileShader( shader );//对着色器代码进行编译

   if ( gl.getShaderParameter( shader, gl.COMPILE_STATUS ) === false ) {//如果编译失败，则直接弹出错误提示

      console.error( 'THREE.WebGLShader: Shader couldn\'t compile.' );

   }

   if ( gl.getShaderInfoLog( shader ) !== '' ) {//如果编译过程报错，则打印错误信息

      console.warn( 'THREE.WebGLShader: gl.getShaderInfoLog()', type === gl.VERTEX_SHADER ? 'vertex' : 'fragment', gl.getShaderInfoLog( shader ), addLineNumbers( string ) );

   }

   // --enable-privileged-webgl-extension
   // console.log( type, gl.getExtension( 'WEBGL_debug_shaders' ).getTranslatedShaderSource( shader ) );

   return shader;

}


export { WebGLShader };