是否可以消除 three.js 着色器中引号和逗号的麻烦?
Is it possible to eliminate the hassle of quotes and comma in three.js shaders?
例如,在 Flash (Actionscript) 中,我可以通过使用 CDATA 去除每行着色器代码 (AGAL) 中的双引号和加号,唯一的要求是像这样左对齐代码:
// VERTEX SHADER CODE
var vertexShader:String = <![CDATA[
// varying registers: v1, v2, v3
// temp reg: vt0
m44 vt0, va0, vc0 // transform vertices in world space with model matrix --> vt0
sub v3, vc16, vt0 // interpolate direction to light --> v3
m44 op, vt0, vc8 // append the tranformed vertices to view-projection matrix in order to transform to clip space and output position
m44 v1, va1, vc4 // transform normals with transposed & inverted modelmatrix and interpolate --> v1
mov v2, va2 // interpolate uvs --> v2
]]>;
在 three.js (Javascript) 中是否可以用类似的方式去掉每行的两个引号和逗号?
var fspass1 = [
"varying vec2 vUv;",
"uniform float time;",
"void main() {",
"float r = vUv.x;",
"if( vUv.y < 0.5 ) r = 0.0;",
"float g = vUv.y;",
"if( vUv.x < 0.5 ) g = 0.0;",
"gl_FragColor = vec4( r, g, time, 1.0 );",
"}"
].join("\n")
我尝试了以下方法,但它不起作用:
var fspass1 = "<![CDATA[
varying vec2 vUv;
uniform float time;
void main() {
float r = vUv.x;
if( vUv.y < 0.5 ) r = 0.0;
float g = vUv.y;
if( vUv.x < 0.5 ) g = 0.0;
gl_FragColor = vec4( r, g, time, 1.0 );
}
]]>";
我是不是做错了什么?有解决办法吗?现在仍然必须使用愚蠢的双引号、逗号等每行代码才能成为...被框架理解。它应该比这更聪明,程序应该让我们的生活更轻松,而不是更困难!
JS 文件中缺少示例而不是 HTML 文件中的 Script 标记以及反引号与单引号的相似性,是我感到困惑的原因,我敢打赌更多人仍在使用引号和逗号或加号,包括在许多 three.js 示例中。
因此,解决方案是建议使用 "template literals",即 只需将整个 multi-line 着色器代码用反引号 括起来,如下所示!那可是大efficiency-improvement,救命稻草! :)
下面的代码有效,每一行都没有引号,也没有逗号!
var fspass1 =
`varying vec2 vUv;
uniform float time;
void main() {
float r = vUv.x;
if( vUv.y < 0.5 ) r = 0.0;
float g = vUv.y;
if( vUv.x < 0.5 ) g = 0.0;
gl_FragColor = vec4( r, g, time, 1.0 );
}`;
24 年来,我从来没有使用过 "backtick",所以要输入它,只需点击数字“1”左侧的按钮即可。
例如,在 Flash (Actionscript) 中,我可以通过使用 CDATA 去除每行着色器代码 (AGAL) 中的双引号和加号,唯一的要求是像这样左对齐代码:
// VERTEX SHADER CODE
var vertexShader:String = <![CDATA[
// varying registers: v1, v2, v3
// temp reg: vt0
m44 vt0, va0, vc0 // transform vertices in world space with model matrix --> vt0
sub v3, vc16, vt0 // interpolate direction to light --> v3
m44 op, vt0, vc8 // append the tranformed vertices to view-projection matrix in order to transform to clip space and output position
m44 v1, va1, vc4 // transform normals with transposed & inverted modelmatrix and interpolate --> v1
mov v2, va2 // interpolate uvs --> v2
]]>;
在 three.js (Javascript) 中是否可以用类似的方式去掉每行的两个引号和逗号?
var fspass1 = [
"varying vec2 vUv;",
"uniform float time;",
"void main() {",
"float r = vUv.x;",
"if( vUv.y < 0.5 ) r = 0.0;",
"float g = vUv.y;",
"if( vUv.x < 0.5 ) g = 0.0;",
"gl_FragColor = vec4( r, g, time, 1.0 );",
"}"
].join("\n")
我尝试了以下方法,但它不起作用:
var fspass1 = "<![CDATA[
varying vec2 vUv;
uniform float time;
void main() {
float r = vUv.x;
if( vUv.y < 0.5 ) r = 0.0;
float g = vUv.y;
if( vUv.x < 0.5 ) g = 0.0;
gl_FragColor = vec4( r, g, time, 1.0 );
}
]]>";
我是不是做错了什么?有解决办法吗?现在仍然必须使用愚蠢的双引号、逗号等每行代码才能成为...被框架理解。它应该比这更聪明,程序应该让我们的生活更轻松,而不是更困难!
JS 文件中缺少示例而不是 HTML 文件中的 Script 标记以及反引号与单引号的相似性,是我感到困惑的原因,我敢打赌更多人仍在使用引号和逗号或加号,包括在许多 three.js 示例中。
因此,解决方案是建议使用 "template literals",即 只需将整个 multi-line 着色器代码用反引号 括起来,如下所示!那可是大efficiency-improvement,救命稻草! :)
下面的代码有效,每一行都没有引号,也没有逗号!
var fspass1 =
`varying vec2 vUv;
uniform float time;
void main() {
float r = vUv.x;
if( vUv.y < 0.5 ) r = 0.0;
float g = vUv.y;
if( vUv.x < 0.5 ) g = 0.0;
gl_FragColor = vec4( r, g, time, 1.0 );
}`;
24 年来,我从来没有使用过 "backtick",所以要输入它,只需点击数字“1”左侧的按钮即可。