This repository has been archived by the owner on Apr 5, 2024. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
35c8bb8
commit 9b3e6ff
Showing
9 changed files
with
568 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| /* global AFRAME, THREE */ | ||
|
|
||
| const vertexShader = require("./shaders/vertex.glsl"); | ||
| const fragmentShader = require("./shaders/fragment.glsl"); | ||
|
|
||
| AFRAME.registerComponent("material-displacement", { | ||
| /** | ||
| * Creates a new THREE.ShaderMaterial using the two shaders defined | ||
| * in vertex.glsl and fragment.glsl. | ||
| */ | ||
| init: function() { | ||
| this.material = new THREE.ShaderMaterial({ | ||
| uniforms: { | ||
| tExplosion: { | ||
| type: "t", | ||
| value: THREE.ImageUtils.loadTexture( | ||
| require("./shaders/explosion.png") | ||
| ) | ||
| }, | ||
| time: { type: "f", value: 0.0 } | ||
| }, | ||
| vertexShader, | ||
| fragmentShader | ||
| }); | ||
| this.el.addEventListener("model-loaded", () => this.update()); | ||
| }, | ||
|
|
||
| /** | ||
| * Apply the material to the current entity. | ||
| */ | ||
| update: function() { | ||
| const mesh = this.el.getObject3D("mesh"); | ||
| if (mesh) { | ||
| mesh.material = this.material; | ||
| } | ||
| }, | ||
|
|
||
| /** | ||
| * On each frame, update the 'time' uniform in the shaders. | ||
| */ | ||
| tick: function(t) { | ||
| this.material.uniforms.time.value = t / 2000; | ||
| } | ||
| }); |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| varying float noise; | ||
| uniform sampler2D tExplosion; | ||
|
|
||
| float random( vec3 scale, float seed ){ | ||
| return fract( sin( dot( gl_FragCoord.xyz + seed, scale ) ) * 43758.5453 + seed ) ; | ||
| } | ||
|
|
||
| void main() { | ||
| // get a random offset | ||
| float r = .01 * random( vec3( 12.9898, 78.233, 151.7182 ), 0.0 ); | ||
| // lookup vertically in the texture, using noise and offset | ||
| // to get the right RGB colour | ||
| vec2 tPos = vec2( 0, 1.0 - 1.3 * noise + r ); | ||
| vec4 color = texture2D( tExplosion, tPos ); | ||
| gl_FragColor = vec4( color.rgb, 1.0 ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| #pragma glslify: pnoise3 = require(glsl-noise/periodic/3d) | ||
|
|
||
| // | ||
| // Based on @thespite's article: | ||
| // | ||
| // "Vertex displacement with a noise function using GLSL and three.js" | ||
| // Source: https://www.clicktorelease.com/blog/vertex-displacement-noise-3d-webgl-glsl-three-js/ | ||
| // | ||
|
|
||
| varying float noise; | ||
| uniform float time; | ||
|
|
||
| float turbulence( vec3 p ) { | ||
|
|
||
| float w = 100.0; | ||
| float t = -.5; | ||
|
|
||
| for (float f = 1.0 ; f <= 10.0 ; f++ ){ | ||
| float power = pow( 2.0, f ); | ||
| t += abs( pnoise3( vec3( power * p ), vec3( 10.0, 10.0, 10.0 ) ) / power ); | ||
| } | ||
|
|
||
| return t; | ||
|
|
||
| } | ||
|
|
||
| void main() { | ||
| noise = 10.0 * -.10 * turbulence( .5 * normal + time / 3.0 ); | ||
| float b = 5.0 * pnoise3( 0.05 * position, vec3( 100.0 ) ); | ||
| float displacement = (- 10. * noise + b) / 50.0; | ||
|
|
||
| vec3 newPosition = position + normal * displacement; | ||
| gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 ); | ||
| } |
Oops, something went wrong.