webgl实现三维立体环环相扣动画效果代码
代码语言:html
所属分类:三维
代码描述:webgl实现三维立体环环相扣动画效果代码,配合了wtc-gl一起实现。
下面为部分代码预览,完整代码请点击下载或在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 >
<script type="text/fragment" id="fragShader">
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
uniform sampler2D s_noise;
uniform sampler2D b_noise;
varying vec2 v_uv;
/* Raymarching constants */
/* --------------------- */
const float MAX_TRACE_DISTANCE = 10.; // max trace distance
const float INTERSECTION_PRECISION = 0.0001; // precision of the intersection
const int NUM_OF_TRACE_STEPS = 256; // max number of trace steps
const float STEP_MULTIPLIER = .6; // the step mutliplier - ie, how much further to progress on each step
/* Structures */
/* ---------- */
struct Camera {
vec3 ro;
vec3 rd;
vec3 forward;
vec3 right;
vec3 up;
float FOV;
};
struct Surface {
float len;
vec3 position;
vec3 colour;
float id;
float steps;
flo.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0