canvas实现webgl线圈绕组动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas实现webgl线圈绕组动画效果代码，可通过dat.gui更换图形，选择圆圈、星星等图形样式、还可更改背景颜色。

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
    background-color: #fff;    
    margin: 0;
                overflow: hidden;
}
canvas {
        position: absolute;
  background-color: #999;
  width: 100%;
  height: 100%;
  vertical-align: middle;
        display:inline-block;
}
</style>



</head>

<body >

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


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
      <script  >
/*
*  The winding number of a point describes how many full revolutions a curve makes around it.
*  Open curves produce interesting visuals. We discretise parametric curves into linear
*  segments and find the signed angle between the vectors connecting a point to the segment.
*  The sum of these angles, divided by 2PI radians, gives the winding number.
*
*  Based on:
*      https://en.wikipedia.org/wiki/Winding_number
*  [1] https://igl.ethz.ch/projects/winding-number/
*      https://twitter.com/keenanisalive/status/1448036393012322313
*      https://www.shadertoy.com/view/Wddyz2
*
*/

let canvas = document.getElementById("canvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// MSAA
let multiplier = 2.0;

var AA = true;

// Initialize the GL context
let gl = canvas.getContext('webgl');
if (!gl) {
  console.error("Unable to initialize WebGL.");
}

let time = 0.0;
let scene = 0;
let palette = 0;

let sceneNames = ["Circle", "Heart", "Star", "Infinity"];
let paletteNames = ["Grayscale", "Rainbow", "Red", "Blue"];

let sceneSelector = { scene: "Circle" };
let paletteSelector = { palette: "Rainbow" };

setScene(sceneSelector.scene);
setPalette(paletteSelector.palette);

//************* GUI ***************

let gui = new dat.GUI();

gui.add(sceneSelector, 'scene').options(sceneNames).onChange(name => {setScene(name);});
gui.add(paletteSelector, 'palette').options(paletteNames).onChange(name => {setPalette(name);});
gui.add(this, 'AA').onChange(b => {b ? multiplier = 2 : multiplier = 1;onWindowResize();}).listen();
gui.close();

//******** Shader sources *********

let vertexSource = `
attribute vec2 position;
void main() {
        // Screenspace position of vertices can use the data passed from the CPU
        // Set z-component to 0
  gl_Position = vec4(position, 0.0, 1.0);
}
`;

//Replace with GLSL fragment shader code
let fragmentSource = `
        precision highp float;

        uniform vec2 resolution;
        uniform float time;
        uniform float u_scene;
        uniform float u_palette;

        #define PI 3.1415926536
        #define TWO_PI 6.2831853072

        // https://math.stackexchange.com/questions/3020095/signed-angle-in-plane:
        // "the ratio of the cross product and scalar product is the tangent of the angle"
        // From [1]: "The tangent of the signed angle between a and b is det([ab]) / dot(ab)"
        float signedAngle(vec2 a, vec2 b){
                // atan(y, x) returns the angle whose arctangent is y / x. Value in [-pi, pi]
                return atan(a.x*b.y - a.y*b.x, dot(a, b));
        }


        // https://iquilezles.org/articles/palettes/
        vec3 getColour(float t, int palette){

                if(palette == 0){
                        // Black and white
                        return vec3(-0.5 * t + 0.45);
                }

                vec3 a;
                vec3 b;
                vec3 c;
                vec3 d;

                if(palette == 1){
                        // Pastel rainbow
                        // Animated

                        t *= 0.45;
                        t += 0.1 * time;

                        a = vec3(0.65);
                        b = 1.0 - a;
                        c = vec3(1.0,1.0,1.0);
                        d = vec3(0.15,0.5,0.75);

                }else if(palette == 2){

                        // Red and purple

                        t *= -0.3;
                        t += 0.65;

                        a = vec3(0.55, 0.5, 0.7);
                        b = 1.0-a;
                        .........完整代码请登录后点击上方下载按钮下载查看