webgl+canvas实现三个不同形状三维立体棒棒糖旋转动画效果代码-html代码-BFW代码库

webgl+canvas实现三个不同形状三维立体棒棒糖旋转动画效果代码

代码语言：html

所属分类：三维

代码描述：webgl+canvas实现三个不同形状三维立体棒棒糖旋转动画效果代码

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

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

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

  
  
<style>
body { margin: 0; overflow: hidden; }
</style>


  
  
</head>

<body translate="no">
  <canvas id="myCanvas"></canvas>
  
      <script >
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl2');

const vertexShaderSource = `#version 300 es

in vec2 a_position;

void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
}
`;

const fragmentShaderSource = `#version 300 es

precision highp float;

uniform vec2 iResolution; // Declare as vec2 (canvas width and height)
uniform vec2 iMouse;
uniform float iTime;

out vec4 fragColor;

// Shadertoy code here

#define PI 3.14159265359
#define RES iResolution
#define smax smoothmax
#define rot(a) mat2(cos(a-vec4(0,11,33,0))) // shorthand for rotating objects
#define orbit p.x+=cos(pos +iTime/5.)*pivot/2., p.z+=sin(pos +iTime/5.)*pivot // rotating the objects by setting their x and z coordinates using sine and cosine; using this because I want the x to be scaled by 2

float smoothmax(float d1, float d2, float k) {
    float h = max(k - abs(d1 - d2), 0.) / k;
    return max(d1, d2) + h * h * k * (1. / 4.);
}

// initializing some variables globally so they can inherit values from other functions

int partID; // for assigning colors to objects
float pivot = 4.; // radius of the circle in which the objects are spinning

// Signed distance function for a 3D line segment
float map(vec3 p) {

  p.z+=pivot; // moving the pivot point from point 0 by the radius of the circular orbit

  // Tall helical swirly lollipop:
  float pos = PI*4./3.; // its position on the circle 

  vec3 p0 = p; // the base to cycle back to after defining each object
  orbit; // shorthand for the orbiting motion
  p.xz*=rot(iTime), p.xy*=rot(PI/6.); // rotate around its y axis and incline by 30deg

  p.y+=.05;

  float r = .2, // radius of the lollipop
        stick1 = smax(length(p.xz) - r/3.,.........完整代码请登录后点击上方下载按钮下载查看