Neumann János, Nikola Tesla, Albert Einstein
  • neyoo
    #1103
    A megoldas jo, csak szamolasi pontatlansag adta a mozgas iranyu komponens hibat.
    Szoval az utobbi megoldas a helyes.


    <!doctype html>
    <html>
    <body>
    <canvas width = "570" height = "570" id = "my_Canvas"></canvas>

    <script>

    /*============= Creating a canvas ======================*/
    var canvas = document.getElementById('my_Canvas');
    gl = canvas.getContext('experimental-webgl');

    /*========== Defining and storing the geometry ==========*/

    var scl=10;
    var vertices=new Array(32*32*32*2*3),i=0,j=0;
    var colors=new Array(32*32*32*2*3);

    for(z=0;z<32;z++)
    for(y=0;y<32;y++)
    for(x=0;x<32;x++)
    if(x==0 || y==0 || z==0)
    {
    vertices[i++]=x/scl;
    vertices[i++]=y/scl;
    vertices[i++]=z/scl;

    vertices[i++]=x/scl;
    vertices[i++]=y/scl;
    vertices[i++]=z/scl;

    colors[j++]=0;
    colors[j++]=0;
    colors[j++]=0;
    colors[j++]=1;
    colors[j++]=1;
    colors[j++]=1;
    }

    // Create and store data into vertex buffer
    var vertex_buffer = gl.createBuffer ();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

    // Create and store data into color buffer
    var color_buffer = gl.createBuffer ();
    gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

    /*=================== SHADERS =================== */

    var vertCode = 'attribute vec3 position;'+
    'uniform mat4 Pmatrix;'+
    'uniform mat4 Vmatrix;'+
    'uniform mat4 Mmatrix;'+
    'uniform float Mtime2;'+
    'uniform int Mmode;'+
    'uniform vec3 Mpencolor;'+
    'attribute vec3 color;'+
    'varying vec3 vColor;'+
    'float fncFI(float x,float y,float z){'+
    ' vec3 Pos=vec3(x,0.0,0.0);'+
    ' float dist=length(Pos);'+
    ' float k=3.1415926/2.0;'+
    ' float phase=dist*k - Mtime2;'+
    ' float fi=-cos(phase);'+
    ' return fi*0.5;'+
    '}'+
    'vec3 fncA(float x,float y,float z,float delta){'+
    ' vec3 Pos=vec3(x,0.0,0.0);'+
    ' float dist=length(Pos);'+
    ' float k=3.1415926/2.0;'+
    ' float phase=(dist + delta)*k -Mtime2;'+
    ' vec3 Tdir=normalize(Pos);'+
    ' vec3 Xdir=cross(Tdir,Tdir.yzx);'+
    ' vec3 Ydir=normalize(cross(Xdir,Tdir));'+
    ' Xdir =normalize(cross(Tdir,Ydir));'+
    ' float rotang=acos(0.5/0.866);'+
    ' vec3 A=Xdir*sin(phase);'+
    ' A+=Tdir*cos(phase)*cos(rotang);'+
    ' A+=Ydir*cos(phase)*sin(rotang);'+
    ' return A*0.866;'+
    '}'+
    'vec3 fncEgrad(float x,float y,float z){'+
    ' float dx=0.0001;'+
    ' float A=fncFI(x,y,z);'+
    ' float Adx=fncFI(x+dx,y,z);'+
    ' float Ady=fncFI(x,y+dx,z);'+
    ' float Adz=fncFI(x,y,z+dx);'+
    ' vec3 dA=(fncA(x,y,z,0.0)-fncA(x,y,z,-dx))/dx;'+
    ' vec3 gradFI=vec3((Adx-A)/dx,(Ady-A)/dx,(Adz-A)/dx);'+
    ' return -gradFI -dA;'+
    '}'+
    'vec3 curlA(float x,float y,float z){'+
    ' float dx=0.0001;'+
    ' vec3 dAx=(fncA(x+dx,y,z,0.0) - fncA(x-dx,y,z,0.0))/(2.0*dx);'+
    ' vec3 dAy=(fncA(x,y+dx,z,0.0) - fncA(x,y-dx,z,0.0))/(2.0*dx);'+
    ' vec3 dAz=(fncA(x,y,z+dx,0.0) - fncA(x,y,z-dx,0.0))/(2.0*dx);'+
    ' vec3 curl=-vec3((dAz.y)-(dAy.z),'+
    ' (dAx.z)-(dAz.x),'+
    ' (dAy.x)-(dAx.y));'+
    ' return curl;'+
    '}'+
    'void main(void) { '+
    ' float scalef=0.22;'+
    ' float x=position.x;'+
    ' float y=position.y;'+
    ' float z=position.z;'+
    ' vec3 dir;'+
    ' if(Mmode==1) dir=color*fncEgrad(x,y,z);'+
    ' if(Mmode==2) dir=color*curlA(x,y,z);'+
    ' if(Mmode==3) dir=color*fncA(x,y,z,0.0);'+
    // ' vec3 tang=normalize(vec3(x,0.0,0.0));'+
    // ' dir=tang*dot(tang,dir);'+
    ' gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position+dir*scalef, 1.0);'+
    ' vColor=Mpencolor;'+
    '}';

    var fragCode = 'precision mediump float;'+
    'varying vec3 vColor;'+
    'void main(void) {'+
    ' gl_FragColor = vec4(vColor, 1.0);'+
    '}';

    var vertShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertShader, vertCode);
    gl.compileShader(vertShader);

    var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragShader, fragCode);
    gl.compileShader(fragShader);

    var shaderprogram = gl.createProgram();
    gl.attachShader(shaderprogram, vertShader);
    gl.attachShader(shaderprogram, fragShader);
    gl.linkProgram(shaderprogram);

    /*======== Associating attributes to vertex shader =====*/
    var _Pmatrix = gl.getUniformLocation(shaderprogram, "Pmatrix");
    var _Vmatrix = gl.getUniformLocation(shaderprogram, "Vmatrix");
    var _Mmatrix = gl.getUniformLocation(shaderprogram, "Mmatrix");
    var _Mtime2 = gl.getUniformLocation(shaderprogram, "Mtime2");
    var _Mpencolor = gl.getUniformLocation(shaderprogram, "Mpencolor");
    var _Mmode = gl.getUniformLocation(shaderprogram, "Mmode");


    gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
    var _position = gl.getAttribLocation(shaderprogram, "position");
    gl.vertexAttribPointer(_position, 3, gl.FLOAT, false,0,0);
    gl.enableVertexAttribArray(_position);

    gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
    var _color = gl.getAttribLocation(shaderprogram, "color");
    gl.vertexAttribPointer(_color, 3, gl.FLOAT, false,0,0) ;
    gl.enableVertexAttribArray(_color);

    gl.useProgram(shaderprogram);


    /*==================== MATRIX ====================== */

    function get_projection(angle, a, zMin, zMax) {
    var ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5
    return [
    0.5/ang, 0 , 0, 0,
    0, 0.5*a/ang, 0, 0,
    0, 0, -(zMax+zMin)/(zMax-zMin), -1,
    0, 0, (-2*zMax*zMin)/(zMax-zMin), 0
    ];
    }

    var proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100);
    var mo_matrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ];
    var view_matrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ];

    view_matrix[14] = view_matrix[14]-6;

    /*================= Mouse events ======================*/

    var AMORTIZATION = 0.95;
    var drag = false;
    var old_x, old_y;
    var dX = 0, dY = 0;

    var mouseDown = function(e) {
    drag = true;
    old_x = e.pageX, old_y = e.pageY;
    e.preventDefault();
    return false;
    };

    var mouseUp = function(e){
    drag = false;
    };

    var mouseMove = function(e) {
    if (!drag) return false;
    dX = (e.pageX-old_x)*2*Math.PI/canvas.width,
    dY = (e.pageY-old_y)*2*Math.PI/canvas.height;
    THETA+= dX;
    PHI+=dY;
    old_x = e.pageX, old_y = e.pageY;
    e.preventDefault();
    };

    canvas.addEventListener("mousedown", mouseDown, false);
    canvas.addEventListener("mouseup", mouseUp, false);
    canvas.addEventListener("mouseout", mouseUp, false);
    canvas.addEventListener("mousemove", mouseMove, false);

    /*=========================rotation================*/

    function rotateX(m, angle) {
    var c = Math.cos(angle);
    var s = Math.sin(angle);
    var mv1 = m[1], mv5 = m[5], mv9 = m[9];

    m[1] = m[1]*c-m[2]*s;
    m[5] = m[5]*c-m[6]*s;
    m[9] = m[9]*c-m[10]*s;

    m[2] = m[2]*c+mv1*s;
    m[6] = m[6]*c+mv5*s;
    m[10] = m[10]*c+mv9*s;
    }

    function rotateY(m, angle) {
    var c = Math.cos(angle);
    var s = Math.sin(angle);
    var mv0 = m[0], mv4 = m[4], mv8 = m[8];

    m[0] = c*m[0]+s*m[2];
    m[4] = c*m[4]+s*m[6];
    m[8] = c*m[8]+s*m[10];

    m[2] = c*m[2]-s*mv0;
    m[6] = c*m[6]-s*mv4;
    m[10] = c*m[10]-s*mv8;
    }

    /*=================== Drawing =================== */

    var THETA = 0,
    PHI = 0;
    var time_old = 0;

    var animate = function(time) {
    var dt = time-time_old;

    if (!drag) {
    dX *= AMORTIZATION, dY*=AMORTIZATION;
    THETA+=dX, PHI+=dY;
    }

    //set model matrix to I4

    mo_matrix[0] = 1, mo_matrix[1] = 0, mo_matrix[2] = 0, mo_matrix[3] = 0,
    mo_matrix[4] = 0, mo_matrix[5] = 1, mo_matrix[6] = 0, mo_matrix[7] = 0,
    mo_matrix[8] = 0, mo_matrix[9] = 0, mo_matrix[10] = 1, mo_matrix[11] = 0,
    mo_matrix[12] = 0, mo_matrix[13] = 0, mo_matrix[14] = 0, mo_matrix[15] = 1;

    rotateY(mo_matrix, THETA);
    rotateX(mo_matrix, PHI);

    time_old = time;
    gl.enable(gl.DEPTH_TEST);

    // gl.depthFunc(gl.LEQUAL);

    gl.clearColor(0.0, 0.0, 0.0, 0.9);
    gl.clearDepth(1.0);
    gl.viewport(0.0, 0.0, canvas.width, canvas.height);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.uniformMatrix4fv(_Pmatrix, false, proj_matrix);
    gl.uniformMatrix4fv(_Vmatrix, false, view_matrix);
    gl.uniformMatrix4fv(_Mmatrix, false, mo_matrix);

    gl.uniform1f(_Mtime2, time*1e-3);
    gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

    if( 1)// 1 vs 0
    {
    gl.uniform3f(_Mpencolor, 0.0,0.0,1.0);//blue fncEgrad = E field
    gl.uniform1i(_Mmode, 1);
    gl.drawArrays(gl.LINES, 0, 32*32*2*3);

    gl.uniform3f(_Mpencolor, 1.0,0.0,0.0);//red curlA = B field
    gl.uniform1i(_Mmode, 2);
    gl.drawArrays(gl.LINES, 0, 32*32*2*3);
    }else{
    gl.uniform3f(_Mpencolor, 1.0,1.0,0.0);//yellow fncA = vector potential
    gl.uniform1i(_Mmode, 2);
    gl.drawArrays(gl.LINES, 0, 32*32*2*3);
    }
    window.requestAnimationFrame(animate);
    }

    animate(0);

    </script>

    </body>
    </html>