Question

得到了制服，例如

uniforms: {

    "time":  { type: "f", value: 0.0 }

},

例如。

属性float customFrequency; 属性vec3 customColor;走？ tia（刚刚添加的代码我试图转换）

<script type="x-shader/x-vertex" id="vertexshader">
uniform float time;
attribute float customFrequency;
attribute vec3 customColor;
varying vec3 vColor;
void main()
{
    vColor = customColor;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_PointSize = size;
    gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
varying vec3 vColor; 
void main()
{
    gl_FragColor = vec4( vColor, 1.0 );
    gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}
</script>

道歉没有很好地制定问题 - 想要以

的形式从上面的脚本创建threejs着色器

THREE.BasicShader = {
    uniforms: {},
vertexShader: [
        "void main() {",
        "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
    "}"
    ].join("\n"),
    fragmentShader: [
        "void main() {",
        "gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );",
    "}"
    ].join("\n")
};

并且找不到使用顶点属性的示例。 TIA

Answer 1

问题不是很清楚，但我相信你对基本概念有点困惑。

着色器不应该转换为javascript。它们是用GLSL语言编写的，浏览器也可以理解并传递给显示驱动程序。

Uniforms是在Javascript代码和GLSL着色器之间传递变量的方式。所以你只需要关心Javascript方面的制服。着色器脚本中的其他代码是着色器GLSL代码的一部分，不能与javascript共享或转换为javascript，如果要对它们进行更改，则需要修改着色器本身。

Answer 2

Lee Stemkoski友好地提供了答案：

THREE.BasicShader = {

uniforms: {},

vertexShader: [
"uniform float time;", 
"attribute float customFrequency;",
"attribute vec3 customColor;",
"varying vec3 vColor;",
"void main()",
"{",
"vColor = customColor;",
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
"gl_PointSize = (1.0 + sin( customFrequency * time )) * 8.0 * ( 300.0 / length(    mvPosition.xyz ) );",
"gl_Position = projectionMatrix * mvPosition;",
"}"
].join("\n"),

fragmentShader: 
[

  ((similar to above))

]。加入（ “\ n” 个）

};

将脚本着色器转换为js着色器

2 个答案: