Aframe component to inject custom GLSL into the THREE.js MeshStandardMaterial Shader.
Have a look at the example
| Property | Description | Default Value |
|---|---|---|
| fragUniformsGLSL | selectorAll - selects the script tag to inject in the beggining of the fragment shader | #fragUniformsGLSL |
| fragModsGLSL | selectorAll - selects the script tag to inject in main() of the fragment shader | #fragModsGLSL |
| vertUniformsGLSL | selectorAll - selects the script tag to inject in the beggining of the vertex shader | #vertUniformsGLSL |
| vertModsGLSL | selectorAll - selects the script tag to inject in main() of the fragment shader | #vertModsGLSL |
| Note: you can also set almost every property accessible in the materials component |
Include as a <script> tag:
<script src="https://cdn.rawgit.com/pbayer8/aframe-glsl-component/master/main.js"></script>
Add the glsl-standard component to an entity with geometry. Note that it works better with more segments:
<a-scene fog="type:linear;near:2;far:15;">
<a-assets>
<img src="images/floral.jpg" id="floral"/>
<img src="images/couchnormal.png" id="couch"/>
<img src="images/scene.jpg" id="sky"/>
<img src="images/grass.png" id="grass"/>
</a-assets>
<a-sphere position="0 1.4 -2"
glsl-standard="
envMap:#sky;
map:#floral;
normalMap:#couch;
metalness:.5;"
segments-height="128"
segments-width="128">
</a-sphere>
</a-scene>
Then, write GLSL. This component gives you access to two vec3 type variables you can modify:
finalPosition in the vertex shader, and finalColor in the fragment shader.
The component creates and updates two floats variables time (mS) and seconds that you can use,
and a vec3 objectNormal that you can read and use when modifying the finalPosition variable.
I've also included a small collection of noise and shaping functions.
You can specify alternate script tags, otherwise it defaults to what is listed in the API section above:
<script id="vertUniformsGLSL" type="x-shader/x-fragment">
//add vertex shader uniforms, varyings and functions here:
varying float wave1;
varying float wave2;
</script>
<script id="vertModsGLSL" type="x-shader/x-fragment">
//modify or reassign the finalPosition vec3 here:
wave1 = sin(finalPosition.y*5.+seconds*2.);
wave2 = cos(finalPosition.x*9.+seconds*3.);
finalPosition.x += .1*wave1;
finalPosition.z += .1* wave2;
</script>
<script id="fragUniformsGLSL" type="x-shader/x-fragment">
//add fragment shader uniforms, varyings and functions here:
varying float wave1;
varying float wave2;
</script>
<script id="fragModsGLSL" type="x-shader/x-fragment">
//modify or reassign the finalColor vec3 here:
finalColor.r += min(wave1,0.);
finalColor.b += wave2;
</script>
The result will look like:
