wtc-simplegl+wtc-math+webgl实现三维粒子小球动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：wtc-simplegl+wtc-math+webgl实现三维粒子小球动画效果代码

代码标签： wtc-simplegl wtc-math webgl 三维粒子小球动画

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

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

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

  
  
<style>
body {
    background: #333;
    color: #fff;
    font-family: sans-serif;
  }
  body,
  html {
    margin: 0;
    overflow: hidden;
    padding: 0;
  }
  canvas { width:100%; height: 100%; }
</style>

  
  
</head>

<body translate="no">
  <script type="x-shader/x-vertex" id="vert">#version 300 es

layout(location=0) in float a_id;
layout(location=1) in vec2 a_something;
layout(location=5) in vec3 a_position;

out vec3 v_position;
out float v_id;
out vec2 v_something;
out vec3 lp;

uniform vec2 u_resolution;
uniform mat4 u_viewMatrix;
uniform mat4 u_viewProjectionMatrix;
uniform mat4 u_modelViewMatrix;
uniform float u_time;

void main() {
  float id = a_id*200.;
  v_position = a_position;
  v_id = a_id;
  v_something = a_something;
  vec3 p = a_position + vec3(cos(u_time+id)*.2, sin(u_time+id)*.2, 0);
  
  float m = 1./(u_resolution.x/u_resolution.y);
  
  
  vec4 position = u_viewProjectionMatrix * vec4(p, 1.);
  
  
  mat3 viewmat = mat3(u_viewMatrix);
  vec3 lightWorldPosition = vec3(50, 100, 50);  // The world space position of the light
  vec3 viewSpacePos = viewmat * p;  // Transform to view space
  vec3 lightViewPosition = viewmat * lightWorldPosition;  // Transform to view space
  lp = normalize(lightViewPosition - viewSpacePos);  // Direction from point to light in view space

  // lp = normalize((u_viewProjectionMatrix * vec4((p - vec3(20,20,0)), 1)).xyz);
  
  gl_PointSize = 150.*a_something.x*(1./position.w)*m;
  gl_Position = position;
}
</script>
<script type="x-shader/x-fragment" id="frag">#version 300 es
precision highp float;
  
in float v_id;
in vec3 lp;

out vec4 color;

uniform mat4 u_iViewMatrix;
uniform vec2 u_resolution;
uniform float u_time;

void main() {
  vec2 uv = gl_PointCoord.xy - .5;
  
  float d = length(uv);
  
  float opacity = clamp(smoothstep(.5, 0.48, d), 0., 1.);
  
  if(opacity < .1) discard;
  
    // vec3 normal = normalize(vec3(uv * sqrt(1.0 - d * d), 1.));
  vec3 normal = vec3( gl_PointCoord.x - .5, .5 - gl_PointCoord.y, 1.0 );
normal = normalize( normal );
// normal = normal * 0.5 + 0.5;
    // Calculate the light effect
    float diffuse = max(dot(normal, lp), 0.0);
    float lighting = min(.9, .3 + diffuse);
    
  color = vec4(vec3(lighting+.1)*(.2+.8*smoothstep(.1, 1., v_id)), 1.); // Using v_id as some basic ambient occlusion
  // color = vec4(1);
}
</script>
  
      <script id="rendered-js" type="module">
import { createRenderer } from "//repo.bfw.wiki/bfwrepo/js/module/wtc-simplegl.mjs";
import { Vec3, Mat4, Quat } from "//repo.bfw.wiki/bfwrepo/js/module/wtc-math.mjs";

console.clear();

const dpr = 2;
const mapSize = 256;
const properties = {
  dpr,
  width: window.innerWidth * dpr,
  height: window.innerHeight * dpr,
  mapSize,
  particles: 100000,
  mapScale: 1e6 / Math.pow(mapSize, 2) * (mapSize / 256) * 8 };


function randomUniform(a, b) {
  return Math.random() * (b - a) + a;
}






const createCamera = (gl, { aspect, fov = 45, near = .1, far = 1000 }) => {
  const projectionMatrix = Mat4.perspective(fov * Math.PI / 180, aspect, near, far);

  const rotation = new Vec3();
  const quaternion = new Quat();
  const position = new Vec3(0, 0, 5);
  const scale = new Vec3(1, 1, 1);
  const lookAtTarget = new Vec3(0, 0, 0);

  const identity = new Mat4();
  const matrix = new Mat4();
  const viewMatrix = new Mat4();
  const viewProjectionMatrix = projectionMatrix.clone();
  const upVector = new Vec3(0, 1, 0);
  const worldPosition = new Vec3();

  let UviewProjectionMatrix = [];
  let UmodelViewMatrix = [];
  let UviewMatrix = [];
  let UiViewMatrix = [];

  let i = 0;

  let needsUpdate = true;
  const f = {
    reset: () => {
      return this;
    },
    resize: () => {
      projectionMatrix.resetToMat4(Mat4.perspective(fov * Math.PI / 180, gl.canvas.width / gl.canvas.height, near, far));
    },
    translate: v => {
      needsUpdate = true;
      position.resetToVector(v);
      return this;
    },
    lookAt: (v, invert = false) => {
      needsUpdate = true;
      lookAtTarget.resetToVector(v);
      matrix.resetToMat4(Mat4.targetTo(position, lookAtTarget, upVector));
      quaternion.resetToQuat(matrix.rotation);
      return this;
    },
    assemble: () => {
      if (needsUpdate) {

        matrix.resetToMat4(Mat4.fromRotationTranslationScale(
        quaternion,
        position,
        scale));


        viewMatrix.resetToMat4(matrix.invertNew());

        v.........完整代码请登录后点击上方下载按钮下载查看