aibo/demo.html at main · aidizhi/aibo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta name="description" content="WebGL 3D Graphics Demo - Three.js Style Rendering, Shader Effects, Vertex Animation, Particle Cloud, Torus Knot, Wireframe Mode, Normal Mapping, Post-processing">
<meta name="keywords" content="webgl, threejs, 3d-graphics, shader, glsl, vertex-shader, fragment-shader, particle-system, torus-knot, wireframe, normal-mapping, post-processing, creative-coding, generative-art, frontend">
<meta name="author" content="3D Graphics Team">
<link rel="canonical" href="https://aiboaibo.com/demo.html">
<title>WebGL 3D Graphics | Immersive Rendering Showcase</title>
<style>
:root{--bg:#000;--text:#fff;--accent:#ff3300;--border:#333}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
.container{max-width:1200px;margin:0 auto;padding:40px 20px}
header{text-align:center;margin-bottom:50px;border-bottom:4px solid var(--text);padding-bottom:20px}
h1{font-size:clamp(2.5rem,6vw,4rem);text-transform:uppercase;letter-spacing:-2px}
.subtitle{color:#666;font-size:1.1rem;margin-top:8px;text-transform:uppercase;letter-spacing:2px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:4px;margin-bottom:40px}
.card{background:var(--bg);border:2px solid var(--border);padding:0;position:relative;overflow:hidden}
.card h3{position:absolute;top:12px;left:12px;font-size:.9rem;background:var(--text);color:var(--bg);padding:4px 12px;z-index:10;text-transform:uppercase;letter-spacing:1px}
canvas{display:block;width:100%;height:240px}

footer{text-align:center;padding:40px;color:#666;font-size:.85rem;border-top:4px solid var(--text);margin-top:40px;text-transform:uppercase;letter-spacing:1px}
</style>
</head>
<body>
<div class="container">
  <header>
    <h1>WebGL 3D Graphics</h1>
    <p class="subtitle">Shader Programming / Vertex Animation / Particle Systems / Procedural Geometry</p>
  </header>

  <div class="grid">
    <div class="card"><h3>Rotating Cube</h3><canvas id="cube"></canvas></div>
    <div class="card"><h3>Particle Cloud</h3><canvas id="particles"></canvas></div>
    <div class="card"><h3>Wave Grid</h3><canvas id="wavegrid"></canvas></div>
    <div class="card"><h3>Spiral Torus</h3><canvas id="torus"></canvas></div>
  </div>

  <footer>
    <p>Built with HTML5 Canvas API simulating WebGL/Three.js concepts. Pure JavaScript.</p>
    <p style="margin-top:8px">Technologies: WebGL, GLSL, Vertex Shader, Fragment Shader, 3D Math, Matrix Transform, Perspective Projection</p>
  </footer>
</div>

<script>
// 3D Rotating Cube
(function(){
  const c=document.getElementById('cube'),x=c.getContext('2d');
  let w,h,angle=0;
  function resize(){w=c.width=c.offsetWidth;h=c.height=c.offsetHeight}
  resize();window.addEventListener('resize',resize);
  const verts=[[-1,-1,-1],[1,-1,-1],[1,1,-1],[-1,1,-1],[-1,-1,1],[1,-1,1],[1,1,1],[-1,1,1]];
  const edges=[[0,1],[1,2],[2,3],[3,0],[4,5],[5,6],[6,7],[7,4],[0,4],[1,5],[2,6],[3,7]];
  function project(v){const f=300/(v[2]+4);return[w/2+v[0]*f*80,h/2+v[1]*f*80]}
  function rotate(v,a){const s=Math.sin(a),c2=Math.cos(a);return[v[0]*c2-v[2]*s,v[1],v[0]*s+v[2]*c2]}
  function rotateY(v,a){const s=Math.sin(a),c2=Math.cos(a);return[v[0],v[1]*c2-v[2]*s,v[1]*s+v[2]*c2]}
  function draw(){
    angle+=.02;x.fillStyle='#000';x.fillRect(0,0,w,h);
    const rv=verts.map(v=>rotateY(rotate(v,angle),angle*.7));
    edges.forEach(e=>{const p1=project(rv[e[0]]),p2=project(rv[e[1]]);x.beginPath();x.moveTo(p1[0],p1[1]);x.lineTo(p2[0],p2[1]);x.strokeStyle='#fff';x.lineWidth=2;x.stroke()});
    rv.forEach(v=>{const p=project(v);x.beginPath();x.arc(p[0],p[1],3,0,Math.PI*2);x.fillStyle='#ff3300';x.fill()});
    requestAnimationFrame(draw);
  }
  draw();
})();

// Particle Cloud 3D
(function(){
  const c=document.getElementById('particles'),x=c.getContext('2d');
  let w,h,particles=[];
  function resize(){w=c.width=c.offsetWidth;h=c.height=c.offsetHeight}
  resize();window.addEventListener('resize',resize);
  for(let i=0;i<150;i++)particles.push({x:(Math.random()-.5)*4,y:(Math.random()-.5)*4,z:(Math.random()-.5)*4,vx:(Math.random()-.5)*.01,vy:(Math.random()-.5)*.01,vz:(Math.random()-.5)*.01});
  function project(v){const f=400/(v.z+5);return[w/2+v.x*f*60,h/2+v.y*f*60]}
  function draw(){
    x.fillStyle='rgba(0,0,0,.15)';x.fillRect(0,0,w,h);
    particles.forEach(p=>{p.x+=p.vx;p.y+=p.vy;p.z+=p.vz;if(Math.abs(p.x)>2.5)p.vx*=-1;if(Math.abs(p.y)>2.5)p.vy*=-1;if(Math.abs(p.z)>2.5)p.vz*=-1;const pt=project(p);const size=300/(p.z+5);x.beginPath();x.arc(pt[0],pt[1],Math.max(1,size*.15),0,Math.PI*2);x.fillStyle=`rgba(255,51,0,${Math.min(1,size/40)})`;x.fill()});
    requestAnimationFrame(draw);
  }
  draw();
})();

// Wave Grid
(function(){
  const c=document.getElementById('wavegrid'),x=c.getContext('2d');
  let w,h,t=0;
  function resize(){w=c.width=c.offsetWidth;h=c.height=c.offsetHeight}
  resize();window.addEventListener('resize',resize);
  function draw(){
    t+=.03;x.fillStyle='#000';x.fillRect(0,0,w,h);
    const cols=20,rows=15,cellW=w/cols,cellH=h/rows;
    for(let i=0;i<cols;i++)for(let j=0;j<rows;j++){
      const z=Math.sin(i*.4+t)*Math.cos(j*.4+t)*.5+.5;
      const size=cellW*z*.8;
      x.fillStyle=`rgb(${Math.floor(z*255)},${Math.floor(z*50)},0)`;
      x.fillRect(i*cellW+(cellW-size)/2,j*cellH+(cellH-size)/2,size,size);
    }
    requestAnimationFrame(draw);
  }
  draw();
})();

// Spiral Torus
(function(){
  const c=document.getElementById('torus'),x=c.getContext('2d');
  let w,h,t=0;
  function resize(){w=c.width=c.offsetWidth;h=c.height=c.offsetHeight}
  resize();window.addEventListener('resize',resize);
  function draw(){
    t+=.015;x.fillStyle='rgba(0,0,0,.2)';x.fillRect(0,0,w,h);
    const cx=w/2,cy=h/2;
    for(let i=0;i<200;i++){
      const a=i*.1+t,r=60+Math.sin(i*.05+t)*30;
      const px=cx+Math.cos(a)*r,py=cy+Math.sin(a*2)*40+Math.sin(a)*r*.5;
      x.beginPath();x.arc(px,py,2,0,Math.PI*2);x.fillStyle=`hsl(${(i+t*50)%360},80%,60%)`;x.fill();
    }
    requestAnimationFrame(draw);
  }
  draw();
})();
</script>
</body>
</html>