twgl实现彩色条纹webgl canvas背景效果代码-html代码-BFW代码库

twgl实现彩色条纹webgl canvas背景效果代码

代码语言：html

所属分类：背景

代码描述：twgl实现彩色条纹webgl canvas背景效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
 margin: 0;
}

canvas {
 position: fixed;
 width: 100vw;
 height: 100vh;
}
</style>



</head>

<body >
  <!-- Quick start shader template: https://codepen.io/pen/?template=ZEyrWNe -->

<!-- Based on Roni Kaufman's work: https://twitter.com/KaufmanRoni/status/1440285424425918467/photo/1 -->

<!-- For educational purposes only, not for commerical use nor resale as digital artwork. -->

<canvas id="canvas"></canvas>

<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec4 position;

  void main() {
    gl_Position = vec4( position );
  }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
  #ifdef GL_ES
  precision mediump float;
  #endif

  uniform vec2 u_resolution;
  uniform float u_time;
  uniform vec2 u_mouse;
  
  //Color scheme taken from Roni Kaufman's Color Pals
  //"Optical" - https://ronikaufman.github.io/color_pals/
  
  //vec3(242,235,138), vec3(254,208,0) //light and dark yellow
  //vec3(252,132,5), vec3(237,54,26) //orange and red
  //vec3(226,240,243), vec3(179,220,224) //light blue, darker light blue
  //vec3(68,100,161), vec3(32,48,81) //dark blue, darkest blue
  //vec3(255,197,199), vec3(243,152,195) //pink, dark pink
  //vec3(207,56,149), vec3(109,53,138) //magenta, purple
  //vec3(6,180,176), vec3(75,138,95) //sea green, dark green
  
  //const vec3 palette[14] = vec3[14](vec3(242.,235.,138.), vec3(254.,208.,0.), vec3(252.,132.,5.), vec3(237.,54.,26.), vec3(226.,240.,243.), vec3(179.,220.,224.), vec3(68.,100.,161.), vec3(32.,48.,81.), vec3(255.,197.,199.), vec3(243.,152.,195.), vec3(207.,56.,149.), vec3(109.,53.,138.), vec3(6.,180.,176.), vec3(75.,138.,95.));
  
  vec3 colorScheme(float x) {
    
    if (x < 0.071428) return vec3(242.,235.,138.) / 255.;
    if (x < 0.142857) return vec3(254.,208.,0.) / 255.;
    if (x < 0.214285) return vec3(252.,132.,5.) / 255.;
    if (x < 0.285713) return vec3(237.,54.,26.) / 255.;
    if (x < 0.357141) return vec3(226.,240.,243.) / 255.;
    if (x < 0.428569) return vec3(179.,220.,224.) / 255.;
    if (x < 0.500000) return vec3(68.,100.,161.) / 255.;
    if (x < 0.571428) return vec3(32.,48.,81.) / 255.;
    if (x < 0.6428) return vec3(255.,197.,199.) / 255.;
    if (x < 0.7142) return vec3(243.,152.,195.) / 255.;
    if (x < 0.7857) return vec3(207.,56.,149.) / 255.;
    if (x < 0.8571) return vec3(109.,53.,138.) / 255.;
    if (x < 0.9285) return vec3(6.,180.,176.) / 255.;
    if (x < 1.0001) return vec3(75.,138.,95.) / 255.;
    
    return vec3(0.);
  }
  
  //The book of shaders noise function
  float random (vec2 st) {
    return fract(sin(dot(st.xy,
                         vec2(12.9898,78.........完整代码请登录后点击上方下载按钮下载查看