Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Нейроны</title> | |
| <style> | |
| body{margin:0;background:#000;overflow:hidden;font-family:monospace;color:#eee} | |
| canvas{display:block} | |
| .ui{position:fixed;top:10px;left:10px;z-index:10;font-size:12px;background:rgba(0,0,0,.8);padding:10px 14px;border-radius:6px;line-height:1.7} | |
| .ui button{background:#4f46e5;color:#fff;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;font-family:monospace;font-size:11px;margin:2px} | |
| .ui button:hover{background:#4338ca} | |
| .ui button.active{background:#dc2626} | |
| .stat{color:#7ec8ff} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="ui"> | |
| N: <span class="stat" id="count">30k</span> · | |
| Связей: <span class="stat" id="edges">0</span> · | |
| Ср.связ/нейрон: <span class="stat" id="avg">0</span> · | |
| FPS: <span class="stat" id="fps">0</span><br> | |
| <b>Форма:</b> | |
| <button id="btnRandom" onclick="setShape('random')">Рандом</button> | |
| <button id="btnSphere" onclick="setShape('sphere')">Шар</button> | |
| <button id="btnPlane" onclick="setShape('plane')">Плоскость</button> | |
| <button id="btnHalf" onclick="setShape('half')">Полукруг</button> | |
| <button onclick="setN(30000)">30k</button> | |
| <button onclick="setN(60000)">60k</button> | |
| <button onclick="setN(100000)">100k</button><br> | |
| <span style="opacity:.6">тяни — вращать · колесо — зум</span> | |
| </div> | |
| <canvas id="c"></canvas> | |
| <script> | |
| const canvas=document.getElementById('c'); | |
| const gl=canvas.getContext('webgl2')||canvas.getContext('webgl'); | |
| if(!gl){document.body.innerHTML='<h1>Нет WebGL</h1>';throw 0} | |
| let W=canvas.width=innerWidth,H=canvas.height=innerHeight; | |
| addEventListener('resize',()=>{W=canvas.width=innerWidth;H=canvas.height=innerHeight}); | |
| const BOX=1000; | |
| const CONNECT_D=60; | |
| const BREAK_D=CONNECT_D*1.5; | |
| const MAX_CONN=10; | |
| const MIN_DIST=22; | |
| const DAMPING=0.93; | |
| const DT=0.06; | |
| const GRID_CELL=CONNECT_D; | |
| const REBUILD=3; | |
| const ROOT={x:BOX/2,y:15,z:BOX/2}; | |
| const ROOT_ATTRACT=650; | |
| const ROOT_FORCE=25000; | |
| const VS_P=`attribute vec3 aPos;uniform mat4 uProj,uView;uniform float uSize; | |
| void main(){gl_Position=uProj*uView*vec4(aPos,1.0);gl_PointSize=uSize;}`; | |
| const FS_P=`precision mediump float;uniform vec3 uColor; | |
| void main(){vec2 d=gl_PointCoord-0.5;float r2=dot(d,d); | |
| if(r2>0.25)discard;gl_FragColor=vec4(uColor,(1.0-r2*4.0)*0.85);}`; | |
| const VS_L=`attribute vec3 aPos;uniform mat4 uProj,uView; | |
| void main(){gl_Position=uProj*uView*vec4(aPos,1.0);}`; | |
| const FS_L=`precision mediump float;uniform vec4 uColor; | |
| void main(){gl_FragColor=uColor;}`; | |
| function sh(t,s){const o=gl.createShader(t);gl.shaderSource(o,s);gl.compileShader(o); | |
| if(!gl.getShaderParameter(o,gl.COMPILE_STATUS))console.error(gl.getShaderInfoLog(o));return o} | |
| function mk(vs,fs){const p=gl.createProgram();gl.attachShader(p,sh(gl.VERTEX_SHADER,vs)); | |
| gl.attachShader(p,sh(gl.FRAGMENT_SHADER,fs));gl.linkProgram(p);return p} | |
| const progP=mk(VS_P,FS_P),progL=mk(VS_L,FS_L); | |
| function persp(f,a,n,fa){const t=1/Math.tan(f/2);return new Float32Array( | |
| [t/a,0,0,0,0,t,0,0,0,0,(fa+n)/(n-fa),-1,0,0,(2*fa*n)/(n-fa),0])} | |
| function lookAt(ex,ey,ez,cx,cy,cz,ux,uy,uz){ | |
| let zx=ex-cx,zy=ey-cy,zz=ez-cz;const zl=Math.hypot(zx,zy,zz);zx/=zl;zy/=zl;zz/=zl; | |
| let xx=uy*zz-uz*zy,xy=uz*zx-ux*zz,xz=ux*zy-uy*zx; | |
| const xl=Math.hypot(xx,xy,xz);xx/=xl;xy/=xl;xz/=xl; | |
| const yx=zy*xz-zz*xy,yy=zz*xx-zx*xz,yz=zx*xy-zy*xx; | |
| return new Float32Array([xx,yx,zx,0,xy,yy,zy,0,xz,yz,zz,0, | |
| -(xx*ex+xy*ey+xz*ez),-(yx*ex+yy*ey+yz*ez),-(zx*ex+zy*ey+zz*ez),1])} | |
| let N=30000; | |
| let pos,vel,connCount,connList; | |
| let edges=new Float32Array(0),edgeCount=0; | |
| let posBuf,edgeBuf,rootBuf,boxBuf; | |
| let curShape='random'; | |
| let forceBuf=null; | |
| function initShape(shape){ | |
| curShape=shape; | |
| forceBuf=null; | |
| pos=new Float32Array(N*3);vel=new Float32Array(N*3); | |
| connCount=new Int32Array(N); | |
| connList=new Int32Array(N*MAX_CONN).fill(-1); | |
| const cx=BOX/2,cy=BOX/2,cz=BOX/2; | |
| for(let i=0;i<N;i++){ | |
| let x,y,z; | |
| if(shape==='sphere'){ | |
| const u=Math.random()*2-1,phi=Math.random()*Math.PI*2,r=180*Math.cbrt(Math.random()); | |
| const s=Math.sqrt(1-u*u); | |
| x=cx+r*s*Math.cos(phi);y=cy+r*u;z=cz+r*s*Math.sin(phi); | |
| }else if(shape==='plane'){ | |
| x=cx+(Math.random()-0.5)*400;y=cy+(Math.random()-0.5)*400;z=cz+(Math.random()-0.5)*15; | |
| }else if(shape==='half'){ | |
| const a=Math.random()*Math.PI,r=250*Math.sqrt(Math.random()); | |
| x=cx+Math.cos(a)*r;y=cy-100+Math.random()*20;z=cz+Math.sin(a)*r; | |
| }else{ | |
| x=Math.random()*BOX;y=Math.random()*BOX;z=Math.random()*BOX; | |
| } | |
| pos[i*3]=x;pos[i*3+1]=y;pos[i*3+2]=z; | |
| } | |
| if(!posBuf)posBuf=gl.createBuffer(); | |
| gl.bindBuffer(gl.ARRAY_BUFFER,posBuf); | |
| gl.bufferData(gl.ARRAY_BUFFER,pos,gl.DYNAMIC_DRAW); | |
| if(!edgeBuf)edgeBuf=gl.createBuffer(); | |
| edges=new Float32Array(N*MAX_CONN*6);edgeCount=0; | |
| if(rootBuf)gl.deleteBuffer(rootBuf); | |
| rootBuf=gl.createBuffer(); | |
| gl.bindBuffer(gl.ARRAY_BUFFER,rootBuf); | |
| gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([ROOT.x,ROOT.y,ROOT.z]),gl.STATIC_DRAW); | |
| if(!boxBuf)boxBuf=gl.createBuffer(); | |
| const b=BOX; | |
| const bv=new Float32Array([ | |
| 0,0,0, b,0,0, b,0,0, b,0,b, b,0,b, 0,0,b, 0,0,b, 0,0,0, | |
| 0,b,0, b,b,0, b,b,0, b,b,b, b,b,b, 0,b,b, 0,b,b, 0,b,0, | |
| 0,0,0, 0,b,0, b,0,0, b,b,0, b,0,b, b,b,b, 0,0,b, 0,b,b | |
| ]); | |
| gl.bindBuffer(gl.ARRAY_BUFFER,boxBuf); | |
| gl.bufferData(gl.ARRAY_BUFFER,bv,gl.STATIC_DRAW); | |
| } | |
| function setShape(s){ | |
| document.querySelectorAll('.ui button').forEach(b=>b.classList.remove('active')); | |
| const btn=document.getElementById('btn'+s[0].toUpperCase()+s.slice(1)); | |
| if(btn)btn.classList.add('active'); | |
| initShape(s); | |
| } | |
| function setN(n){ | |
| N=n; | |
| document.getElementById('count').textContent=(n/1000).toFixed(0)+'k'; | |
| initShape(curShape); | |
| } | |
| let grid,gridDims; | |
| function buildGrid(){ | |
| const cells=Math.ceil(BOX/GRID_CELL)+1; | |
| gridDims=cells; | |
| grid=new Array(cells*cells*cells); | |
| for(let i=0;i<N;i++){ | |
| const gx=Math.floor(pos[i*3]/GRID_CELL); | |
| const gy=Math.floor(pos[i*3+1]/GRID_CELL); | |
| const gz=Math.floor(pos[i*3+2]/GRID_CELL); | |
| const k=gx+cells*(gy+cells*gz); | |
| if(!grid[k])grid[k]=[]; | |
| grid[k].push(i); | |
| } | |
| } | |
| function key(x,y,z){return x+gridDims*(y+gridDims*z)} | |
| function addConn(i,j){ | |
| if(i===j)return false; | |
| if(connCount[i]>=MAX_CONN||connCount[j]>=MAX_CONN)return false; | |
| for(let c=0;c<connCount[i];c++){ | |
| if(connList[i*MAX_CONN+c]===j)return false; | |
| } | |
| connList[i*MAX_CONN+connCount[i]]=j;connCount[i]++; | |
| connList[j*MAX_CONN+connCount[j]]=i;connCount[j]++; | |
| return true; | |
| } | |
| function physics(){ | |
| if(!forceBuf||forceBuf.length!==N*3)forceBuf=new Float32Array(N*3); | |
| const force=forceBuf; | |
| force.fill(0); | |
| for(let i=0;i<N;i++){ | |
| const dx=ROOT.x-pos[i*3],dy=ROOT.y-pos[i*3+1],dz=ROOT.z-pos[i*3+2]; | |
| const d2=dx*dx+dy*dy+dz*dz+2000; | |
| const d=Math.sqrt(d2); | |
| if(d<ROOT_ATTRACT){ | |
| const f=ROOT_FORCE/d2; | |
| force[i*3]+=dx*f;force[i*3+1]+=dy*f;force[i*3+2]+=dz*f; | |
| } | |
| } | |
| for(let i=0;i<N;i++){ | |
| const px=pos[i*3],py=pos[i*3+1],pz=pos[i*3+2]; | |
| let fx=0,fy=0,fz=0; | |
| for(let c=0;c<connCount[i];c++){ | |
| const j=connList[i*MAX_CONN+c]; | |
| const dx=pos[j*3]-px,dy=pos[j*3+1]-py,dz=pos[j*3+2]-pz; | |
| const d=Math.sqrt(dx*dx+dy*dy+dz*dz)+0.001; | |
| if(d>=BREAK_D)continue; | |
| const diff=d-MIN_DIST; | |
| const w=1.0+connCount[j]*0.1; | |
| const pull=w*0.5*diff; | |
| fx+=(dx/d)*pull;fy+=(dy/d)*pull;fz+=(dz/d)*pull; | |
| } | |
| const speedMul=1+connCount[i]*0.15; | |
| force[i*3]+=fx*speedMul;force[i*3+1]+=fy*speedMul;force[i*3+2]+=fz*speedMul; | |
| } | |
| buildGrid(); | |
| for(let i=0;i<N;i++){ | |
| const px=pos[i*3],py=pos[i*3+1],pz=pos[i*3+2]; | |
| const gx=Math.floor(px/GRID_CELL),gy=Math.floor(py/GRID_CELL),gz=Math.floor(pz/GRID_CELL); | |
| let checked=0; | |
| for(let dx=-1;dx<=1&&checked<50;dx++) | |
| for(let dy=-1;dy<=1&&checked<50;dy++) | |
| for(let dz=-1;dz<=1&&checked<50;dz++){ | |
| const nx=gx+dx,ny=gy+dy,nz=gz+dz; | |
| if(nx<0||ny<0||nz<0||nx>=gridDims||ny>=gridDims||nz>=gridDims)continue; | |
| const bucket=grid[key(nx,ny,nz)]; | |
| if(!bucket)continue; | |
| for(let k=0;k<bucket.length;k++){ | |
| const j=bucket[k]; | |
| if(j===i)continue; | |
| const ddx=pos[j*3]-px,ddy=pos[j*3+1]-py,ddz=pos[j*3+2]-pz; | |
| const d2=ddx*ddx+ddy*ddy+ddz*ddz; | |
| if(d2>MIN_DIST*MIN_DIST)continue; | |
| const d=Math.sqrt(d2)+0.001; | |
| const push=(MIN_DIST-d)*3; | |
| force[i*3]-=(ddx/d)*push;force[i*3+1]-=(ddy/d)*push;force[i*3+2]-=(ddz/d)*push; | |
| checked++; | |
| if(checked>50)break; | |
| } | |
| } | |
| } | |
| for(let i=0;i<N;i++){ | |
| let vx=vel[i*3]+force[i*3]*DT; | |
| let vy=vel[i*3+1]+force[i*3+1]*DT; | |
| let vz=vel[i*3+2]+force[i*3+2]*DT; | |
| vx*=DAMPING;vy*=DAMPING;vz*=DAMPING; | |
| let nx=pos[i*3]+vx*DT,ny=pos[i*3+1]+vy*DT,nz=pos[i*3+2]+vz*DT; | |
| if(nx<0){nx=0;vx*=-0.5}if(nx>BOX){nx=BOX;vx*=-0.5} | |
| if(ny<0){ny=0;vy*=-0.5}if(ny>BOX){ny=BOX;vy*=-0.5} | |
| if(nz<0){nz=0;vz*=-0.5}if(nz>BOX){nz=BOX;vz*=-0.5} | |
| pos[i*3]=nx;pos[i*3+1]=ny;pos[i*3+2]=nz; | |
| vel[i*3]=vx;vel[i*3+1]=vy;vel[i*3+2]=vz; | |
| } | |
| } | |
| function breakLongEdges(){ | |
| const B2=BREAK_D*BREAK_D; | |
| for(let i=0;i<N;i++){ | |
| let w=0; | |
| for(let c=0;c<connCount[i];c++){ | |
| const j=connList[i*MAX_CONN+c]; | |
| const dx=pos[j*3]-pos[i*3],dy=pos[j*3+1]-pos[i*3+1],dz=pos[j*3+2]-pos[i*3+2]; | |
| if(dx*dx+dy*dy+dz*dz>B2)continue; | |
| connList[i*MAX_CONN+w]=j;w++; | |
| } | |
| for(let c=w;c<MAX_CONN;c++)connList[i*MAX_CONN+c]=-1; | |
| connCount[i]=w; | |
| } | |
| } | |
| function findNewEdges(){ | |
| buildGrid(); | |
| for(let i=0;i<N;i++){ | |
| if(connCount[i]>=MAX_CONN)continue; | |
| const px=pos[i*3],py=pos[i*3+1],pz=pos[i*3+2]; | |
| const gx=Math.floor(px/GRID_CELL),gy=Math.floor(py/GRID_CELL),gz=Math.floor(pz/GRID_CELL); | |
| outer: | |
| for(let dx=-1;dx<=1;dx++) | |
| for(let dy=-1;dy<=1;dy++) | |
| for(let dz=-1;dz<=1;dz++){ | |
| if(connCount[i]>=MAX_CONN)break outer; | |
| const nx=gx+dx,ny=gy+dy,nz=gz+dz; | |
| if(nx<0||ny<0||nz<0||nx>=gridDims||ny>=gridDims||nz>=gridDims)continue; | |
| const bucket=grid[key(nx,ny,nz)]; | |
| if(!bucket)continue; | |
| for(let k=0;k<bucket.length;k++){ | |
| if(connCount[i]>=MAX_CONN)break outer; | |
| const j=bucket[k]; | |
| if(j<=i)continue; | |
| if(connCount[j]>=MAX_CONN)continue; | |
| const ddx=pos[j*3]-px,ddy=pos[j*3+1]-py,ddz=pos[j*3+2]-pz; | |
| if(ddx*ddx+ddy*ddy+ddz*ddz>CONNECT_D*CONNECT_D)continue; | |
| addConn(i,j); | |
| } | |
| } | |
| } | |
| } | |
| function rebuildEdges(){ | |
| edgeCount=0; | |
| let ev=0; | |
| const maxE=edges.length/6; | |
| for(let i=0;i<N&&ev<maxE;i++){ | |
| for(let c=0;c<connCount[i];c++){ | |
| const j=connList[i*MAX_CONN+c]; | |
| if(j<i)continue; | |
| edges[ev++]=pos[i*3];edges[ev++]=pos[i*3+1];edges[ev++]=pos[i*3+2]; | |
| edges[ev++]=pos[j*3];edges[ev++]=pos[j*3+1];edges[ev++]=pos[j*3+2]; | |
| edgeCount++; | |
| if(ev>=maxE)break; | |
| } | |
| if(ev>=maxE)break; | |
| } | |
| gl.bindBuffer(gl.ARRAY_BUFFER,edgeBuf); | |
| gl.bufferSubData(gl.ARRAY_BUFFER,0,edges.subarray(0,ev)); | |
| } | |
| let camAngle=0.7,camElev=0.4,camDist=2200; | |
| let drag=false,lx=0,ly=0; | |
| canvas.addEventListener('mousedown',e=>{drag=true;lx=e.clientX;ly=e.clientY}); | |
| canvas.addEventListener('mouseup',()=>drag=false); | |
| canvas.addEventListener('mousemove',e=>{ | |
| if(!drag)return; | |
| camAngle+=(e.clientX-lx)*0.006; | |
| camElev=Math.max(-1.4,Math.min(1.4,camElev+(e.clientY-ly)*0.006)); | |
| lx=e.clientX;ly=e.clientY; | |
| }); | |
| canvas.addEventListener('wheel',e=>{ | |
| camDist=Math.max(400,Math.min(5000,camDist+e.deltaY*1.5)); | |
| },{passive:true}); | |
| let frames=0,lastFps=performance.now(); | |
| function draw(){ | |
| gl.viewport(0,0,W,H); | |
| gl.clearColor(0,0,0,1); | |
| gl.clear(gl.COLOR_BUFFER_BIT); | |
| gl.enable(gl.BLEND); | |
| gl.blendFunc(gl.SRC_ALPHA,gl.ONE); | |
| const proj=persp(Math.PI/3,W/H,1,8000); | |
| const cx=BOX/2,cy=BOX/2,cz=BOX/2; | |
| const ex=cx+Math.cos(camAngle)*Math.cos(camElev)*camDist; | |
| const ey=cy+Math.sin(camElev)*camDist; | |
| const ez=cz+Math.sin(camAngle)*Math.cos(camElev)*camDist; | |
| const view=lookAt(ex,ey,ez,cx,cy,cz,0,1,0); | |
| // Коробка | |
| gl.useProgram(progL); | |
| gl.uniformMatrix4fv(gl.getUniformLocation(progL,'uProj'),false,proj); | |
| gl.uniformMatrix4fv(gl.getUniformLocation(progL,'uView'),false,view); | |
| gl.uniform4f(gl.getUniformLocation(progL,'uColor'),0.3,0.5,0.8,0.35); | |
| gl.bindBuffer(gl.ARRAY_BUFFER,boxBuf); | |
| const aPL=gl.getAttribLocation(progL,'aPos'); | |
| gl.enableVertexAttribArray(aPL); | |
| gl.vertexAttribPointer(aPL,3,gl.FLOAT,false,0,0); | |
| gl.drawArrays(gl.LINES,0,24); | |
| // Связи | |
| if(edgeCount>0){ | |
| gl.uniform4f(gl.getUniformLocation(progL,'uColor'),0.35,0.55,1.0,0.12); | |
| gl.bindBuffer(gl.ARRAY_BUFFER,edgeBuf); | |
| gl.vertexAttribPointer(aPL,3,gl.FLOAT,false,0,0); | |
| gl.drawArrays(gl.LINES,0,edgeCount*2); | |
| } | |
| // Точки | |
| gl.useProgram(progP); | |
| gl.uniformMatrix4fv(gl.getUniformLocation(progP,'uProj'),false,proj); | |
| gl.uniformMatrix4fv(gl.getUniformLocation(progP,'uView'),false,view); | |
| gl.uniform1f(gl.getUniformLocation(progP,'uSize'),N>60000?1.2:2.2); | |
| gl.uniform3f(gl.getUniformLocation(progP,'uColor'),0.55,0.78,1.0); | |
| gl.bindBuffer(gl.ARRAY_BUFFER,posBuf); | |
| gl.bufferSubData(gl.ARRAY_BUFFER,0,pos); | |
| const aP2=gl.getAttribLocation(progP,'aPos'); | |
| gl.enableVertexAttribArray(aP2); | |
| gl.vertexAttribPointer(aP2,3,gl.FLOAT,false,0,0); | |
| gl.drawArrays(gl.POINTS,0,N); | |
| // Ствол | |
| gl.uniform1f(gl.getUniformLocation(progP,'uSize'),20.0); | |
| gl.uniform3f(gl.getUniformLocation(progP,'uColor'),1.0,0.3,0.4); | |
| gl.bindBuffer(gl.ARRAY_BUFFER,rootBuf); | |
| gl.vertexAttribPointer(aP2,3,gl.FLOAT,false,0,0); | |
| gl.drawArrays(gl.POINTS,0,1); | |
| frames++; | |
| const now=performance.now(); | |
| if(now-lastFps>500){ | |
| document.getElementById('fps').textContent=Math.round(frames*1000/(now-lastFps)); | |
| document.getElementById('edges').textContent=edgeCount.toLocaleString(); | |
| let total=0;for(let i=0;i<N;i++)total+=connCount[i]; | |
| document.getElementById('avg').textContent=(total/N).toFixed(1); | |
| frames=0;lastFps=now; | |
| } | |
| } | |
| initShape('random'); | |
| document.getElementById('btnRandom').classList.add('active'); | |
| let frameCount=0; | |
| (function loop(){ | |
| physics(); | |
| breakLongEdges(); | |
| if(frameCount++%REBUILD===0)findNewEdges(); | |
| rebuildEdges(); | |
| draw(); | |
| requestAnimationFrame(loop); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |