three实现三维音频可视化频谱动画效果代码

代码语言:html

所属分类:三维

代码描述:three实现三维音频可视化频谱动画效果代码,通过lil-gui可调节视觉参数,实现其他的动态效果。

代码标签: three 三维 音频 可视化 频谱 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
 
<meta charset="UTF-8">
 

 
 
 
<style>
@import url('https://fonts.googleapis.com/css?family=Architects+Daughter|Orbitron');

* {
   
margin: 0;
   
padding: 0;
}

html
, body {
   
overflow: hidden;
   
font-family:'Orbitron',sans-serif;
   
font-size:14px;
}

/* dat.gui align to left */
.lil-gui.autoPlace{
   
right:auto !important;
   
left:15px !important;
 
}



.Experience {
   
position:relative;
   
width:100vw;
   
height:100vh;
}

.Experience > .Experience_Canvas {
   
top:0;
   
left:0;
   
position:absolute;
   
outline: none;
   
filter:grayscale(0%);
   
transition:filter 1s;
}

.Experience[loading = "true"] > .Experience_Canvas {
   
filter:grayscale(90%);
}


.Experience_Panel {
   
position:relative;
   
border:1px solid #000022;
   
background-color: rgba(30, 30, 90, 0.75);
   
color:#FFFFFF;
   
border-radius: 6px;
   
box-shadow:  5px  5px 5px rgba(0,0,0, 0.5);
}

.Experience > .Experience_Loading {
   
padding:0.6em;
/*    width:4em;*/
   
margin:auto;
   
top: calc(50vh - 10px);
   
height: 18px;
   
display:none;
   
font-family:'Orbitron',sans-serif;
   
font-size:max(1.5vw, 1.5vh);
}

.Experience[loading = "true"] > .Experience_Loading {
   
display:table;
}

/* Group of controls (fps, button logo, button full screen) */
.Experience_Controls {
   
position:fixed;
   
bottom :0;
   
right:0;
   
z-index:10000;
}

.Experience_Static, .Experience_Control {
   
user-select: none;
   
position:relative;
   
width:48px; /*max(3.2vw, 3.2vh);*/
   
height:48px; /*max(3.2vw, 3.2vh);*/
   
margin-bottom:max(0.5vw, 0.5vh);
   
margin-right:max(0.5vw, 0.5vh);
   
padding:6px;
/*    padding:max(0.4vw, 0.4vh);*/
   
text-align: center;
   
border:2px solid transparent;
   
display: block;
   
margin-left: auto;
   
transition:border 0.4s;
}

.Experience_FPS {
   
font-size:24px;
}

.Experience_TxtFPS {
   
font-size:14px;
}


.Experience_Control:hover {
   
border:2px solid rgb(234, 80, 78);
   
cursor:pointer;
}

.Experience_Control > img {
   
transition:transform 0.4s;
   
width:48px;
   
height:48px;
   
position:relative;    
}

.Experience_Control:hover > img {
   
transform: scale(1.5, 1.5);
}

#restoreScreen {
   
display:none;
}

#Logo {
   
display: block;
   
transition: width 0.33s ease-in;
}

/* Logo svg need to be fixed on the right, because of the letter logo animation */
#Logo img {
   
position:absolute;
   
right: 6px;
}

#Logo > * {
   
pointer-events: none;
}

#Logo:hover {
   
width:280px;
}

#Logo > #LogoText {
   
position:absolute;
   
bottom:14px;
   
margin-top:3px;
   
transition:0.4s;
   
width:230px; /* 12 caracters * 400px */                
   
font-size:24px;
}

#Logo > #LogoText > span {
   
transition:0.33s cubic-bezier(.17,-0.42,0,1.15);
   
opacity:0;
   
position: relative;
   
display: inline-block;
   
color:#FFF;
}            

#Logo:hover > #LogoText > span {                
   
position:relative;
   
opacity:1;
   
left:230px;
   
animation: LogoAnimation 0.33s 0.33s cubic-bezier(.17,-0.42,0,1.15);
   
animation-fill-mode:forwards;
}


/* Color rojo del 33 */
#Logo > #LogoText > span:nth-child(11), #Logo > #LogoText > span:nth-child(12) {
   
color: rgb(234, 80, 78);
}            


#Logo:hover > #LogoText > span:nth-child(1)  {    animation-delay: 0.55s;     }
#Logo:hover > #LogoText > span:nth-child(2)  {    animation-delay: 0.50s;     }
#Logo:hover > #LogoText > span:nth-child(3)  {    animation-delay: 0.45s;     }
#Logo:hover > #LogoText > span:nth-child(4)  {    animation-delay: 0.40s;     }
#Logo:hover > #LogoText > span:nth-child(5)  {    animation-delay: 0.35s;     }
#Logo:hover > #LogoText > span:nth-child(6)  {    animation-delay: 0.30s;     }
#Logo:hover > #LogoText > span:nth-child(7)  {    animation-delay: 0.25s;     }
#Logo:hover > #LogoText > span:nth-child(8)  {    animation-delay: 0.20s;     }
#Logo:hover > #LogoText > span:nth-child(9)  {    animation-delay: 0.15s;     }
#Logo:hover > #LogoText > span:nth-child(10) {    animation-delay: 0.10s;     }
#Logo:hover > #LogoText > span:nth-child(11) {    animation-delay: 0.05s;     }
#Logo:hover > #LogoText > span:nth-child(12) {    animation-delay: 0.0s;      }

@keyframes LogoAnimation {
   
0%   { left:230px;  }
   
100% { left:0px;  }
}  

/*
 * Audio controls
 */

.Experience_AudioControls {
   
user-select: none;
   
position:fixed;
   
display:flex;
   
flex-flow: row;
   
flex-direction:column;
/*    flex-wrap: wrap;*/
   
bottom:1vh;
/*    height:80px;*/
   
width:75vw;
   
left:12.5vw;
/*    padding:0 0 min(1vw, 1vh) 0 0;*/
   
pointer-events: none;
}

.Experience_AudioControls label, .Experience_AudioControls button {
   
font-size:14px !important;
   
font-family:'Orbitron',sans-serif;
}

.Experience_AC_Play {
/*    margin:max(0.5vw, 0.5vh);*/
   
flex-basis:32px;
}

   

.Experience_AC_Play > button {
   
width:62px;
   
height:62px;
   
border-radius: 100px;
   
background-color: rgba(30, 30, 150, 1.0);
   
cursor:pointer;
   
color:#fff;
   
transition:background-color 0.5s;
   
pointer-events:all;
}

.Experience_AC_Play > button:hover {
   
background-color: rgb(49, 49, 255);
}

.Experience_AC_Songs {
   
flex: 3 0 10%;
/*    margin:max(0.5vw, 0.5vh);*/
   
position:relative;
/*    top:6px;*/
   
/*    flex-basis:176px;*/
flex-basis:32px;
}

.Experience_AC_Songs > select {
   
position:relative;
   
left:5px;
   
height: 22px;
   
pointer-events:all;
}

.Experience_AC_Volume {
   
flex-basis:32px;
/*    margin:max(0.5vw, 0.5vh);*/
   
/*    flex-basis:150px;*/
}

.Experience_AC_Volume > input {
   
position:relative;
   
left:5px;
   
top:5px;
   
pointer-events:all;
}

.Experience_AC_Time {
   
flex-basis:32px;
/*    margin:max(0.5vw, 0.5vh);*/
}

.Experience_AC_Time > input {
   
position:relative;
   
left:5px;
   
top:5px;
   
width: calc(100% - 10px);
   
pointer-events:all;
}

.Experience td {
   
color:#ffffff;
   
text-shadow: 1px 1px #000000;
}




/* Pay & Pause buttons */
.Experience_Play, .Experience_Pause {
   
position: fixed;
   
margin-bottom: max(0.5vw, 0.5vh);
   
margin-left: max(0.5vw, 0.5vh);
   
bottom:0;
}

/* when play is true, play button is enabled, and pause button is disabled, when is false is the oposite */
.Experience_Play[play="false"], .Experience_Pause[play="true"] {
   
display:none;
}
 
.Experience_SongInfo {
   
position:fixed;
   
margin-bottom: max(0.5vw, 0.5vh);
   
margin-left: max(0.5vw, 0.5vh);    
   
bottom:70px;
   
padding:12px;
   
left:-500px;
   
transition:left 0.4s cubic-bezier(.17,-0.42,0,1.15);
}

.Experience_SongInfo[visible="false"] {
   
left:0px;
   
animation: SongInfoAnimation 0.4s 5s cubic-bezier(.17,-0.42,0,1.15);
   
animation-fill-mode:forwards;
}

.Experience_SongInfo td {
   
padding: 4px;
   
color:#CCCCCC;
}

.Experience_SongInfo a, .Experience_SongInfo a:visited {
   
color:#FFFFFF;
}

@keyframes SongInfoAnimation {
   
0%   { opacity:1; left:0px;     }
   
100% { opacity:0; left:-300px;  }
}
</style>

 
<script>
  window
.console = window.console || function(t) {};
</script>

 
 
</head>

<body >
 
<!-- import THREE.js cdn -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.2.js"></script>
<script type="importmap">
 
{
 
"imports": {      
     
"three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/151/three.module.js",
     
"three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/151/jsm/"
   
}
 
}
</script>

<!-- lil.gui -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lil-gui.umd.min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/lil-gui.min.css">


<!-- Basic depth vertex shader with varying vUv -->
<script id="DepthVertexShader" type="x-shader/x-vertex">
varying vec2 vUv
;

#include <common>
#include <uv_pars_vertex>
#include <displacementmap_pars_vertex>
#include <morphtarget_pars_vertex>
#include <skinning_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>
varying vec2 vHighPrecisionZW
;
void main() {
       
#include <uv_vertex>
       
#include <skinbase_vertex>
       
#ifdef USE_DISPLACEMENTMAP
               
#include <beginnormal_vertex>
               
#include <morphnormal_vertex>
               
#include <skinnormal_vertex>
       
#endif
       
#include <begin_vertex>

    vUv
= uv;

       
#include <morphtarget_vertex>
       
#include <skinning_vertex>
       
#include <displacementmap_vertex>
       
#include <project_vertex>
       
#include <logdepthbuf_vertex>
       
#include <clipping_planes_vertex>
        vHighPrecisionZW
= gl_Position.zw;
}
</script>



<!-- Floor Standard vertex shader-->
<script id="FloorStandardVertexShader" type="x-shader/x-vertex">
uniform sampler2D uAudioTexture
;
//uniform float uTime;
uniform
float uAudioStrength;
varying vec2  vUv
;



/*
 * Three.js globals
 */

#define STANDARD
varying vec3 vViewPosition
;
#ifdef USE_TRANSMISSION
        varying vec3 vWorldPosition
;
#endif
#include <common>
#include <uv_pars_vertex>
#include <displacementmap_pars_vertex>
#include <color_pars_vertex>
#include <fog_pars_vertex>
#include <normal_pars_vertex>
#include <morphtarget_pars_vertex>
#include <skinning_pars_vertex>
#include <shadowmap_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>

/*
 * Three.js main
 */

void main() {
   
#include <uv_vertex>
   
#include <color_vertex>
   
#include <morphcolor_vertex>
   
#include <beginnormal_vertex>
   
#include <morphnormal_vertex>
   
#include <skinbase_vertex>
   
#include <skinnormal_vertex>
   
#include <defaultnormal_vertex>
   
#include <normal_vertex>
   
#include <begin_vertex>

   
// Audio value on Y axis
    vec4 textureColor
= texture2D(uAudioTexture, uv);
    transformed
.z += textureColor.r * uAudioStrength;

    vUv
= uv;

   
/*
     * Three.js main end
     */



   
#include <morphtarget_vertex>
   
#include <skinning_vertex>
   
#include <displacementmap_vertex>
   
#include <project_vertex>
   
#include <logdepthbuf_vertex>
   
#include <clipping_planes_vertex>
    vViewPosition
= - mvPosition.xyz;
   
#include <worldpos_vertex>
   
#include <shadowmap_vertex>
   
#include <fog_vertex>
 
#ifdef USE_TRANSMISSION
    vWorldPosition
= worldPosition.xyz;
 
#endif
}
</script>






<!-- Floor Depth vertex shader-->
<script id="FloorDepthVertexShader" type="x-shader/x-vertex">
uniform sampler2D uAudioTexture
;
uniform
float     uAudioStrength;


#include <common>
#include <uv_pars_vertex>
#include <displacementmap_pars_vertex>
#include <morphtarget_pars_vertex>
#include <skinning_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>
varying vec2 vHighPrecisionZW
;
void main() {
       
#include <uv_vertex>
       
#include <skinbase_vertex>
       
#ifdef USE_DISPLACEMENTMAP
               
#include <beginnormal_vertex>
               
#include <morphnormal_vertex>
               
#include <skinnormal_vertex>
       
#endif
       
#include <begin_vertex>

//vec4 audioValue = vec4(1.0);
    vec4 audioValue
= texture2D(uAudioTexture, uv);

   
if (uv.y > 0.5) {
       
// Add the red channel intensity to the Y of the model
        transformed
.y +=  audioValue.r * uAudioStrength;
   
}
   
else {
        transformed
.y -=  audioValue.r * uAudioStrength;
   
}
   

       
#include <morphtarget_vertex>
       
#include <skinning_vertex>
       
#include <displacementmap_vertex>
       
#include <project_vertex>
       
#include <logdepthbuf_vertex>
       
#include <clipping_planes_vertex>
        vHighPrecisionZW
= gl_Position.zw;
}
</script>



<!-- Perlin Sun Depth fragment shader-->
<script id="SSPerlinSunDepthFragmentShader" type="x-shader/x-fragment">

uniform sampler2D uAudioTexture
;
uniform
float     uAudioStrengthFreq;
uniform
float     uAudioStrengthSin;
uniform
float     uRadiusFreq;
uniform
float     uRadiusSin;
uniform
float     uTime;
//uniform float     uHover;
uniform
float     uNoiseStrength;
uniform
float     uNoiseSpeed;
//uniform vec3      uColorFrequency;
//uniform vec3      uColorSin;

varying vec2      vUv
; // Coordenadas UV del fragmento

#define NPI   3.14159265 // idk what happens with THREE js PI, and im finishing for today...
#define TAU  PI * 2.0

//      Classic Perlin 3D Noise
//      by Stefan Gustavson
//
vec4 permute
(vec4 x)       { return mod(((x*34.0)+1.0)*x, 289.0);            }
vec4 taylorInvSqrt
(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
vec3 fade
(vec3 t)          { return t*t*t*(t*(t*6.0-15.0)+10.0);             }

float cnoise(vec3 P){
    vec3
Pi0 = floor(P); // Integer part for indexing
    vec3
Pi1 = Pi0 + vec3(1.0); // Integer part + 1
   
Pi0 = mod(Pi0, 289.0);
   
Pi1 = mod(Pi1, 289.0);
    vec3
Pf0 = fract(P); // Fractional part for interpolation
    vec3
Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
    vec4 ix
= vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
    vec4 iy
= vec4(Pi0.yy, Pi1.yy);
    vec4 iz0
= Pi0.zzzz;
    vec4 iz1
= Pi1.zzzz;

    vec4 ixy
= permute(permute(ix) + iy);
    vec4 ixy0
= permute(ixy + iz0);
    vec4 ixy1
= permute(ixy + iz1);

    vec4 gx0
= ixy0 / 7.0;
    vec4 gy0
= fract(floor(gx0) / 7.0) - 0.5;
    gx0
= fract(gx0);
    vec4 gz0
= vec4(0.5) - abs(gx0) - abs(gy0);
    vec4 sz0
= step(gz0, vec4(0.0));
    gx0
-= sz0 * (step(0.0, gx0) - 0.5);
    gy0
-= sz0 * (step(0.0, gy0) - 0.5);

    vec4 gx1
= ixy1 / 7.0;
    vec4 gy1
= fract(floor(gx1) / 7.0) - 0.5;
    gx1
= fract(gx1);
    vec4 gz1
= vec4(0.5) - abs(gx1) - abs(gy1);
    vec4 sz1
= step(gz1, vec4(0.0));
    gx1
-= sz1 * (step(0.0, gx1) - 0.5);
    gy1
-= sz1 * (step(0.0, gy1) - 0.5);

    vec3 g000
= vec3(gx0.x,gy0.x,gz0.x);
    vec3 g100
= vec3(gx0.y,gy0.y,gz0.y);
    vec3 g010
= vec3(gx0.z,gy0.z,gz0.z);
    vec3 g110
= vec3(gx0.w,gy0.w,gz0.w);
    vec3 g001
= vec3(gx1.x,gy1.x,gz1.x);
    vec3 g101
= vec3(gx1.y,gy1.y,gz1.y);
    vec3 g011
= vec3(gx1.z,gy1.z,gz1.z);
    vec3 g111
= vec3(gx1.w,gy1.w,gz1.w);

    vec4 norm0
= taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
    g000
*= norm0.x;
    g010
*= norm0.y;
    g100
*= norm0.z;
    g110
*= norm0.w;
    vec4 norm1
= taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
    g001
*= norm1.x;
    g011
*= norm1.y;
    g101
*= norm1.z;
    g111
*= norm1.w;

   
float n000 = dot(g000, Pf0);
   
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
   
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
   
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
   
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
   
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
   
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
   
float n111 = dot(g111, Pf1);

    vec3 fade_xyz
= fade(Pf0);
    vec4 n_z
= mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
    vec2 n_yz
= mix(n_z.xy, n_z.zw, fade_xyz.y);
   
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
   
return 2.2 * n_xyz;
}

// Function to make a round rectangle when the 2d plane is hover
/*vec4 borderRoundRect(vec4 currentColor, vec2 size, float radius) {
    vec2  position   = vUv * size;
    vec2  rounded    = vec2(clamp(position.x, radius, size.x - radius), clamp(position.y, radius, size.y - radius));
    vec2  difference = position - rounded;
    float dist       = length(difference);
    vec4  color      = vec4(1.0, 1.0, 1.0, uHover); // Border color
    float borderSize = 0.015;                       // Border size
    float alpha      = step(0.2, smoothstep(radius - borderSize, radius- borderSize, dist) - smoothstep(radius, radius + borderSize, dist));
    color.a = alpha * uHover;
    // Its inside
    if (dist > radius - borderSize) {
        return color;
    }
    // Its outside
    return currentColor;
}*/



// Make a circle with the frequency data
vec4 circleFreq
(vec4 currentColor, vec2 center, vec3 color) {
    vec2 pos
= vec2(0.55, 0.5);
   
float dist = length(vUv - pos);
   
float rad = atan(vUv.y - pos.y, vUv.x - pos.x);

   
float normAngle = 0.0;
   
if (rad < 0.0) {
        normAngle
= ((rad + NPI) / NPI);
   
} else {
        normAngle
= 1.0 - (1.0 + ((rad - NPI) / NPI));
   
}

   
float audioValue = (texture2D(uAudioTexture, vec2(normAngle, 0.0)).r - 0.5) * .25 * uAudioStrengthFreq;
   
// Perlin noise
   
float strength = cnoise(vec3(rad * 2.0, dist * uNoiseStrength,  uTime * uNoiseSpeed)) * uRadiusFreq * 0.1;

   
if (dist - audioValue + strength < uRadiusFreq) {
        color
.r += audioValue * 0.5;
        color
.b += audioValue * 0.5;
       
return vec4(color, 1.0);
   
}
   
return currentColor;
}


// // Make a circle with the time domain data
vec4 circleSin
(vec4 currentColor, vec2 center, vec3 color) {
    vec2 pos1
= vec2(0.4, 0.5);
   
float dist = length(vUv - center);
   
float rad = atan(vUv.y - center.y, vUv.x - center.x);

   
float normAngle = 0.0;
   
if (rad < 0.0) {
        normAngle
= ((rad + NPI) / NPI);
   
} else {
        normAngle
= (1.0 + ((rad - NPI) / NPI));
   
}

   
float audioValue = (texture2D(uAudioTexture, vec2(normAngle, 0.0)).g - 0.5) * .5 * uAudioStrengthSin;
   
// Perlin noise
   
float strength = 0.0; //cnoise(vec3(rad * TAU * 5.0, dist * 100.0,  uTime + color.b)) * radius * 0.1;

   
if (dist - audioValue + strength < uRadiusSin) {
        color
.g += 1.0 - audioValue;
       
return vec4(color, 1.0);
   
}
   
return currentColor;
}




#if DEPTH_PACKING == 3200
        uniform
float opacity;
#endif
#include <common>
#include <packing>
#include <uv_pars_fragment>
#include <map_pars_fragment>
#include <alphamap_pars_fragment>
#include <alphatest_pars_fragment>
#include <logdepthbuf_pars_fragment>
#include <clipping_planes_pars_fragment>
varying vec2 vHighPrecisionZW
;
void main() {
       
#include <clipping_planes_fragment>
        vec4 diffuseColor
= vec4( 1.0 );
       
#if DEPTH_PACKING == 3200
                diffuseColor
.a = opacity;
       
#endif



   
// Center of the plane
    vec2 center
= vec2(0.5, 0.5);
   
// Base color
    vec4 color
= vec4(0.0, 0.0, 0.0, 0.0);

    color
= circleFreq(color, center, vec3(1.0));
    color
= circleSin(color, center, vec3(1.0));

    diffuseColor
= color;
   
if (color.a == 0.0) discard;



       
#include <map_fragment>
       
#include <alphamap_fragment>
       
#include <alphatest_fragment>
       
#include <logdepthbuf_fragment>
       
float fragCoordZ = 0.5 * vHighPrecisionZW[0] / vHighPrecisionZW[1] + 0.5;
       
   
#if DEPTH_PACKING == 3200
                gl_FragColor
= vec4( vec3( 1.0 - fragCoordZ ), opacity );
       
#elif DEPTH_PACKING == 3201
                gl_FragColor
= packDepthToRGBA( fragCoordZ );
       
#endif

}
</script>

<!-- Perlin Sun fragment shader-->
<script id="SSPerlinSunFragmentShader" type="x-shader/x-fragment">
uniform sampler2D uAudioTexture;
uniform float     uAudioStrengthFreq;
uniform float     uAudioStrengthSin;
uniform float     uRadiusFreq;
uniform float     uRadiusSin;
uniform float     uTime;
uniform float     uNoiseStrength;
uniform float     uNoiseSpeed;

varying vec2      vUv; // Coordenadas UV del fragmento

#define PI   3.14159265
#define TAU  PI * 2.0

//      Classic Perlin 3D Noise
//      by Stefan Gustavson
//
vec4 permute(vec4 x)       { return mod(((x*34.0)+1.0)*x, 289.0);            }
vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
vec3 fade(vec3 t)          { return t*t*t*(t*(t*6.0-15.0)+10.0);             }

float cnoise(vec3 P){
    vec3 Pi0 = floor(P); // Integer part for indexing
    vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
    Pi0 = mod(Pi0, 289.0);
    Pi1 = mod(Pi1, 289.0);
    vec3 Pf0 = fract(P); // Fractional part for interpolation
    vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
    vec4 iy = vec4(Pi0.yy, Pi1.yy);
    vec4 iz0 = Pi0.zzzz;
    vec4 iz1 = Pi1.zzzz;

    vec4 ixy = permute(permute(ix) + iy);
    vec4 ixy0 = permute(ixy + iz0);
    vec4 ixy1 = permute(ixy + iz1);

    vec4 gx0 = ixy0 / 7.0;
    vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
    gx0 = fract(gx0);
    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
    vec4 sz0 = step(gz0, vec4(0.0));
    gx0 -= sz0 * (step(0.0, gx0) - 0.5);
    gy0 -= sz0 * (step(0.0, gy0) - 0.5);

    vec4 gx1 = ixy1 / 7.0;
    vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
    gx1 = fract(gx1);
    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
    vec4 sz1 = step(gz1, vec4(0.0));
    gx1 -= sz1 * (step(0.0, gx1) - 0.5);
    gy1 -= sz1 * (step(0.0, gy1) - 0.5);

    vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
    v.........完整代码请登录后点击上方下载按钮下载查看

网友评论0