converting script shader to js shader

2
votes

got the uniforms in e.g

uniforms: {

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

},

where does e.g.

attribute float customFrequency; attribute vec3 customColor; go? tia (just added code I am trying to convert)

<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>

apologies for not formulating the question very well - want to create threejs shader from above script in the form of

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")
};

and cannot find an example using vertex attributes. tia

2
three.js
There is no question here. - gaitat

2 Answers

0
votes

The question is not very clear, but I believe you are a little bit confused on the basic concepts.

Shaders are not supposed to be converted to javascript. They are written in GLSL language which the browser also understands and passes over to the display driver.

Uniforms are the way you pass variables between Javascript code and GLSL shaders. So you only need to care about uniforms on the Javascript side. The other code in the shader scripts are part of the shader GLSL code, can't be shared with or converted to javascript, and if you want to make changes to them, you need to modify the shader itself.

0
votes

Lee Stemkoski kindly supplied the answer to this:

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))

].join("\n")

};