Currently, I am dissecting the ShaderGlow example found on this GitHub link in order to integrate it into my node application.
The original author utilized <script> tags within the HTML document, while my entire application is structured within app.js and imports ES6 modules from helper files.
In its initial state, the shader functions as follows:
var customMaterial = new THREE.ShaderMaterial(
{
uniforms:
{
"c": { type: "f", value: 1.0 },
"p": { type: "f", value: 1.4 },
glowColor: { type: "c", value: new THREE.Color(0xffff00) },
viewVector: { type: "v3", value: camera.position }
},
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent,
side: THREE.FrontSide,
blending: THREE.AdditiveBlending,
transparent: true
});
Where the fragment and vertex shaders are enclosed within their respective <script> elements:
<script id="vertexShader" type="x-shader/x-vertex">
uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;
void main()
{
vec3 vNormal = normalize(normalMatrix * normal);
vec3 vNormel = normalize(normalMatrix * viewVector);
intensity = pow(c - dot(vNormal, vNormel), p);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-vertex">
uniform vec3 glowColor;
varying float intensity;
void main()
{
vec3 glow = glowColor * intensity;
gl_FragColor = vec4(glow, 1.0);
}
</script>
My attempt involved importing these shaders like so:
import fragmentShader from './elements/GlowShaders.js';
import vertexShader from './elements/GlowShaders.js';
var customMaterial = new THREE.ShaderMaterial(
{
uniforms:
{
"c": { type: "f", value: 1.0 },
"p": { type: "f", value: 1.4 },
glowColor: { type: "c", value: new THREE.Color(0xffff00) },
viewVector: { type: "v3", value: this.camera.position }
},
vertexShader: vertexShader,
fragmentShader: fragmentShader,
side: THREE.FrontSide,
blending: THREE.AdditiveBlending,
transparent: true
});
The GlowShader.js file was structured as follows:
export default class vertexShader {
uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;
void main()
{
vec3 vNormal = normalize(normalMatrix * normal);
vec3 vNormel = normalize(normalMatrix * viewVector);
intensity = pow(c - dot(vNormal, vNormel), p);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
}
export default class fragmentShader {
uniform vec3 glowColor;
varying float intensity;
constructor() {
vec3 glow = glowColor * intensity;
gl_FragColor = vec4(glow, 1.0);
}
}
As a novice with modules, this approach did not yield the desired results. How can I modularize these specific shader blocks or incorporate them effectively within my app.js script?