Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
Triangolo di Sierpinski in 3D - sierpinski.js

sierpinski.js

 Caricato da: ZioCrocifisso
Scarica il programma completo

  1. function timer(state) {
  2.         var params;
  3.  
  4.         params = state.paramfunc(null);
  5.  
  6.         if (params.rotate) {
  7.                 state.rotation += 0.01;
  8.         }
  9.  
  10.         if (state.rotation >= Math.PI) {
  11.                 state.rotation = -Math.PI;
  12.         }
  13.  
  14.         if (params.iterchanged) {
  15.                 state.buffer = generate(state.gl, state.program, params.iter);
  16.                 params.iterchanged = false;
  17.         }
  18.  
  19.         state.paramfunc(params);
  20.  
  21.         state.gl.uniform1f(
  22.                                 state.gl.getUniformLocation(state.program, "rot"),
  23.                                 state.rotation
  24.         );
  25.  
  26.         draw(state.gl, state.buffer, state.program);
  27. }
  28.  
  29. function draw(gl, buffer, program) {
  30.         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  31.  
  32.         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  33.         gl.drawArrays(gl.TRIANGLES, 0, buffer.count);
  34. }
  35.  
  36. function pyramid(vertices, x, y, z, sz, min) {
  37.         var ms = sz / 2;
  38.  
  39.         if (sz > min) {
  40.                 vertices = pyramid(vertices, x, y + ms, z, ms, min);
  41.                 vertices = pyramid(vertices, x - ms, y - ms, z - ms, ms, min);
  42.                 vertices = pyramid(vertices, x + ms, y - ms, z - ms, ms, min);
  43.                 vertices = pyramid(vertices, x - ms, y - ms, z + ms, ms, min);
  44.                 vertices = pyramid(vertices, x + ms, y - ms, z + ms, ms, min);
  45.         } else {
  46.                 var ph, p = [];
  47.  
  48.                 ph = [x, y + sz, z];
  49.                 p[0] = [x - sz, y - sz, z - sz];
  50.                 p[1] = [x - sz, y - sz, z + sz];
  51.                 p[3] = [x + sz, y - sz, z - sz];
  52.                 p[2] = [x + sz, y - sz, z + sz];
  53.  
  54.                 for (var i = 0; i < 4; i++) {
  55.                         vertices = triangle(vertices, ph, p[i], p[(i + 1) % 4]);
  56.                 }
  57.  
  58.                 vertices = triangle(vertices, p[0], p[1], p[2]);
  59.                 vertices = triangle(vertices, p[1], p[2], p[3]);
  60.         }
  61.  
  62.         return vertices;
  63. }
  64.  
  65. function triangle(vertices, p1, p2, p3) {
  66.         return vertices.concat(p1.concat(p2).concat(p3));
  67. }
  68.  
  69. function generate(gl, program, iter) {
  70.         var buffer = gl.createBuffer(), vertices = [], attr, params;
  71.  
  72.         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  73.         vertices = pyramid(vertices, 0.0, 0.2, -2.3, 1.0, 1.0 / iter);
  74.         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  75.         attr = gl.getAttribLocation(program, "pos");
  76.         gl.enableVertexAttribArray(attr);
  77.         gl.vertexAttribPointer(attr, 3, gl.FLOAT, false, 0, 0);
  78.         buffer.count = vertices.length / 3;
  79.  
  80.         return buffer;
  81. }
  82.  
  83. function loadShader(gl, filename, type) {
  84.         /*
  85.         var xhr = new XMLHttpRequest;
  86.  
  87.         xhr.open("GET", filename, false);
  88.         xhr.send(null);
  89.  
  90.         if (xhr.status == 200) {
  91.                 var shader = gl.createShader(type);
  92.  
  93.                 gl.shaderSource(shader, xhr.responseText);
  94.                 gl.compileShader(shader);
  95.  
  96.                 return shader;
  97.         }
  98.  
  99.         return null;
  100.         */
  101.         var src;
  102.  
  103.         //Essendo una versione adatta all'esecuzione locale, gli shader
  104.         //sono stati trasformati automaticamente in stringhe Javascript
  105.         //e inclusi nello script.
  106.         if (filename == "vs") {
  107.                 src =
  108.                 "attribute vec3 pos;" +
  109.                 "" +
  110.                 "varying vec4 vcol;" +
  111.                 "" +
  112.                 "uniform float rot;" +
  113.                 "" +
  114.                 "float col(float pos) {" +
  115.                 "       float r = abs(mod(pos, 0.05) * 20.0);" +
  116.                 "" +
  117.                 "       if (r < 0.2) {" +
  118.                 "               r = 1.0 - r;" +
  119.                 "       }" +
  120.                 "" +
  121.                 "       return r;" +
  122.                 "}" +
  123.                 "" +
  124.                 "void main(void)" +
  125.                 "{" +
  126.                 "       gl_Position = vec4(pos.x, pos.y, pos.z + 2.0, 2.0);" +
  127.                 "" +
  128.                 "       vcol = vec4(col((pos.y + pos.z) / 2.0), col((pos.x + pos.y) / 2.0), col((pos.x + pos.z) / 2.0), 1.0);" +
  129.                 "       mat4 rotm = mat4(" +
  130.                 "               cos(rot),       0.0,            -sin(rot),      0.0," +
  131.                 "               0.0,            1.0,            0.0,            0.0," +
  132.                 "               sin(rot),       0.0,            cos(rot),       0.0," +
  133.                 "               0.0,            0.0,            0.0,            1.0" +
  134.                 "       );" +
  135.                 "" +
  136.                 "       gl_Position *= rotm;" +
  137.                 "       gl_Position.z -= 2.0;" +
  138.                 "" +
  139.                 "       mat4 prjm = mat4(" +
  140.                 "               0.9,    0.0,    0.0,    0.0," +
  141.                 "               0.0,    0.9,    0.0,    0.0," +
  142.                 "               0.0,    0.0,    -1.0,   -0.01," +
  143.                 "               0.0,    0.0,    -1.0,   0.0" +
  144.                 "       );" +
  145.                 "" +
  146.                 "" +
  147.                 "       gl_Position *= prjm;" +
  148.                 "}";
  149.         } else {
  150.                 src =
  151.                 "precision mediump float;" +
  152.                 "varying vec4 vcol;" +
  153.                 "" +
  154.                 "void main(void)" +
  155.                 "{" +
  156.                 "       gl_FragColor = vcol;" +
  157.                 "}";
  158.         }
  159.  
  160.         var shader = gl.createShader(type);
  161.  
  162.         gl.shaderSource(shader, src);
  163.         gl.compileShader(shader);
  164.  
  165.         return shader;
  166. }
  167.  
  168. function init(paramfunc) {
  169.         var gl, canvas, program, buffer, vs, fs, state = {};
  170.  
  171.         canvas = document.getElementById("canvas");
  172.         gl = canvas.getContext("webgl");
  173.  
  174.         if (!gl) {
  175.                 gl = canvas.getContext("experimental-webgl");
  176.         }
  177.  
  178.         program = gl.createProgram();
  179.         vs = loadShader(gl, "vs", gl.VERTEX_SHADER);
  180.         gl.attachShader(program, vs);
  181.         fs = loadShader(gl, "fs", gl.FRAGMENT_SHADER);
  182.         gl.attachShader(program, fs);
  183.         gl.bindAttribLocation(program, 0, "pos");
  184.         gl.linkProgram(program);
  185.         gl.useProgram(program);
  186.  
  187.         gl.clearColor(0.0, 0.0, 0.0, 1.0);
  188.         gl.viewport(0, 0, canvas.width, canvas.height);
  189.         gl.enable(gl.DEPTH_TEST);
  190.         gl.depthFunc(gl.LESS);
  191.  
  192.         state.gl = gl;
  193.         state.program = program;
  194.         state.buffer = buffer;
  195.         state.rotation = 0;
  196.         state.paramfunc = paramfunc;
  197.  
  198.         setInterval(timer, 20, state);
  199. }