3WebGL shader准备工具

冰哥图形学社区

已于 2022-12-27 10:53:56 修改

阅读量592

点赞数

分类专栏： shader 文章标签： vscode 前端 ide

于 2022-12-27 10:51:23 首次发布

本文链接：https://blog.csdn.net/qq_42718845/article/details/128452008

版权

这篇博客介绍了如何在VSCode中配置WebGL shader的开发环境，包括安装VSCode，添加Shader语言支持的语法高亮插件，安装GLSL Lint进行语法检查，以及安装glsl-canvas Shader Toy进行可视化展示。还提供了遇到报错时的解决办法。

摘要由CSDN通过智能技术生成

VSCode安装

VSCode（全称：Visual Studio Code）是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。
在 2019 年的 Stack Overflow 组织的开发者调查中，Visual Studio Code 被认为是最受开发者欢迎的开发环境。
下载地址：https://code.visualstudio.com/
在这里插入图片描述
注：除vsCode外，前端开发人员也可以使用webStorm、sublime等前端编辑器，介于当前较为流行的编辑器，且硬件要求较低，故本教程主要依托于VsCode进行教学。

插件安装

Shader languages support for VS Code （着色器语言的语法高亮器）

在这里插入图片描述

安装步骤

vsCode应用商店直接搜索 Shader languages support for VS Code，选择安装的插件，点击安装即可，安装完后重启vsCode即可。

GLSL Lint

GLSL Lint 等同于WebGL高级课程中讲到的gl-lint.js应用，二者又稍加有区别：
GLSL Lint不需要WebGL为载体。gl-lint需要在javascript语言环境中进行使用。本节课重点在GLSL Lint插件的使用，如对gl-lint感兴趣请移步与博主的WebGL 高级课程。

    <script src="../../lib/gl-lint.js" ></script>

在这里插入图片描述

安装步骤

（1）vsCode应用商店直接搜索 GLSL Lint，选择安装的插件，点击安装即可。
（2）打开下图地址链接，按照图上标记打开glsl验证器在线下载地址。
在这里插入图片描述
（3）在GLSL Lint插件中绑定GLSL验证器。操作图下图所示：

（4）在vsCode用户设置模块下搜索vscode-glsllint，找到Glslang Validator path，选择刚才下载验证器的地址：

（5）文件拓展设置（目的可以理解为glsl-linter找寻着色器文件的标识设置）
在这里插入图片描述

"glsl-linter.fileExtensions": {
   
    ".fs.glsl": "frag",
    ".fs": "frag",
    ".vs.glsl": "vert",
    ".vs": "vert",
    ".tes.glsl": "tese",
    ".tes": "tese",
    ".tcs.glsl": "tesc",
    ".tcs": "tesc",
    ".gs.glsl": "geom",
    ".gs": "geom",
}

（6）glsl语言编辑器常用代码设置 => 文件->首选项->用户片段,搜索glsl.json,将下面代码复制到json文件即可。

/*
author:ice
time:2019.10.12
*/
{
   

	"for": {
   
		"prefix": "for",
		"body": [
			"for(int $2 = 0; $2 < $3; $2++){",
				"\t",
			"}"
		],
		"description": "for( ; ; ){\n\t//code\n}\n\nThe keyword for is used to describe a loop that is controlled by a counter. The parentheses enclose three expressions that initialize, check and update the variable used as counter. The body defined by curly braces encloses the statements that are executed at each pass of the loop.\n\nfor(int i = 0; i <= 99; i++){\n\taFunction();\n}\n\nThe execution of a single pass or the whole loop can be aborted by using a continue or a break statement respectively."
	},
	
	"while": {
   
		"prefix": "while",
		"body": [
			"while($2){",
				"\t",
			"}"
		],
		"description": "while(){\n\t//code\n}\n\nThe keyword while is used to describe a loop that is controlled by a condition. The parentheses enclose the expression that defines the condition. The body defined by curly braces encloses the statements that are executed at each pass of the loop.\n\nwhile(i <= 99){\n\taFunction();\n}\n\nThe execution of a single pass or the whole loop can be aborted by using a continue or a break statement respectively."
	},
	
	"dowhile": {
   
		"prefix": "dowhile",
		"body": [
			"do{",
				"\t",
			"} while($2){",
				"\t",
			"}"
		],
		"description": "do {\n\t//code\n}while();\n\nThe keyword do is used in combination with while to describe a loop that is controlled by a condition. The body defined by curly braces encloses the statements that are executed at each pass of the loop. The parentheses enclose the expression that defines the condition.\n\ndo {\n\taFunction();\n} while(i <= 99);\n\nThe execution of a single pass or the whole loop can be aborted by using a continue or a break statement respectively.\n\nIn contrast to a simple while loop the body is always executed at least one time even if the expression evaluates to false from the beginning."
	},

	"continue": {
   
		"prefix": "continue",
		"body": "continue;",
		"description": "The keyword continue is used inside the body of a loop to abort a single pass of the loop. All statements in the body after the continue statement are ignored and the next iteration of the loop is executed immediately."
	},
	
	"break": {
   
		"prefix": "break",
		"body": "break;",
		"description": "The keyword break is used inside the body of a loop to abort the whole loop. All statements in the body after the break statement are ignored and the loop is exited without executing any further iteration."
	},
	

	"if": {
   
		"prefix": "if",
		"body": [
			"if($2){",
				"\t",
			"}"
		],
		"description": "if(){\n\t//code\n}\n\nThe keyword if is used to describe the conditional execution of a statement. The parentheses enclose the expression that defines the condition. The curly braces enclose the statements that are executed if the condition evaluates as true.\n\nif(i != 0){\n\taFunction();\n}\n\nIn contrast to a loop the statements in curly braces are executed only one time or not at all."
	},
	
	"ifelse": {
   
		"prefix": "ifelse",
		"body": [
			"if($2){",
				"\t",
			"} else {",
				"\t",
			"}"
		],
		"description": "if(){\n\t//code\n} else {\n\t//code\n}\n\nThe keyword else is used in conjunction with the keyword if to describe the alternative execution of a statement. The parentheses enclose the expression that defines the condition. The curly braces after the if statement enclose the statements that are executed if the condition evaluates as true. The curly braces after the else statement enclose the statements that are executed if the condition evaluates as false.\n\nif(i != 0){\n\taFunction();\n} else {\n\tbFunction();\n}\n\nDepending on the condition either the statements in the first curly braces or the statements in the second curly braces are executed."
	},

	"ifdef": {
   
		"prefix": "ifdef",
		"body": [
			"#ifdef GL_ES",
			"precision mediump float;",
			"#endif"
		],
		"description": "A check defining if GLES is available"
	},
	

	"return": {
   
		"prefix": "return",
		"body": "return;",
		"description": "The keyword return is used to define a proper exit for a function. If the function has the return type void no value is passed back to the caller of the function.\n\nreturn aValue;\n\nIf the function has a non-void return type a parameter of the same type has to be included in the statement. The value is passed back to the caller of the function."
	},
	
	"discard": {
   
		"prefix": "discard",
		"body": "discard;",
		"description": "The keyword discard is used to define an exceptionally exit for a fragment shader. It is used exit the fragment shader immediately and to signal the OpenGL ES 2.0 pipeline that the respective fragment should not be drawn."
	},
	

	"vec2": {
   
		"prefix": "vec2",
		"body": "vec2($2, $3)",
		"description": "The data type vec2 is used for floating point vectors with two components. There are several ways to initialize a vector:\n• Components are specified by providing a scalar value for each component (first example).\n• Components are specified by providing one scalar value. This value is used for all components (the second example is equivalent to the first).\n• Components are specified by providing a vector of higher dimension. The respective values are used to initialize the components (the second and third example are equivalent).\n\nSide note: The vector constructors can be used to cast between different vector types since type conversions are done automatically for each component."
	},
	
	"vec3": {
   
		"prefix": "vec3",
		"body": "vec3($2, $3, $4)",
		"description": "The data type vec3 is used for floating point vectors with three components. There are several ways to initialize a vector:\n• Components are specified by providing a scalar value for each component (first example).\n• Components are specified by providing one scalar value. This value is used for all components (the second example is equivalent to the first).\nComponents are specified by providing a vector of higher dimension. The respective values are used to initialize the components (the second and third example are equivalent).• Components are specified by providing a combination of vectors and/or scalars. The respective values are used to initialize the vector (the fifth and sixth example are equivalent). The arguments of the constructor must have at least as many components as the vector that is initialized.\n\nSide note: The vector constructors can be used to cast between different vector types since type conversions are done automatically for each component."
	},
	
	"vec4": {
   
		"prefix": "vec4",
		"body": "vec4($2, $3, $4, $5)",
		"description": "The data type vec4 is used for floating point vectors with four components. There are several ways to initialize a vector:\n• Components are specified by providing a scalar value for each component (first example).\n• Components are specified by providing one scalar value. This value is used for all components (the second example is equivalent to the first).\n• Components are specified by providing a combination of vectors and scalars. The respective values are used to initialize the components (the third and fourth example are equivalent). The arguments of the constructor must have at least as many components as the vector that is initialized.\n\nSide note: The vector constructors can be used to cast between different vector types since type conversions are done automatically for each component."
	},
	

	"mat2": {
   
		"prefix": "mat2",
		"body": "mat2($2, $3)",
		"description": "The data type mat2 is used for floating point matrices with two times two components in column major order. There are several ways to initialize a matrix:\n• Components are specified by providing a scalar value for each component (first example). The matrix is filled column by column.\n• Components are specified by providing one scalar value. This value is used for the components on the main diagonal (the second example is equivalent to the first).\n• Components are specified by providing a combination of vectors and scalars. The respective values are used to initialize the components column by column. The arguments of the constructor must have at least as many components as the matrix that is initialized."
	},
	
	"mat3": {
   
		"prefix": "mat3",
		"body": "mat3($2, $3, $4)",
		"description": "The data type mat3 is used for floating point matrices with three times three components in column major order. There are several ways to initialize a matrix:\n• Components are specified by providing a scalar value for each component (first example). The matrix is filled column by column.\n• Components are specified by providing one scalar value. This value is used for the components on the main diagonal (the second example is equivalent to the first).\n• Components are specified by providing a combination of vectors and