« »

Here are some 3D graphics made with just JavaScript, let teach yourself by this advance JavaScript code & tutorial. We have a TIE fighter rotating, and moving left and right; we may change axises, drawing modes, viewing styles and scenes.

Label: 3D graphics, TIE fighter, 3D Graphics Animation, 3D Animation in JavaScript

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Generate your business videos by AI with voice or just text

Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers. Free UNLMITED AI Video App in Your Hand

Code
JavaScript
HTML
Print

Copy All x2

<script type="text/javascript" from="JavaScriptBank.com">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
/*************************************
 * Copyright 2006 Christopher Thomas *
 * You are free to redistribute this *
 *  code, in modified or unmodified  *
 * form, so long as you retain this  *
 *          copyright notice.        *
 *************************************/

/******************************************************************************
 * Due to the performance issues of painting pixels, I had to create a custom *
 * z-buffering algorithm that works on pixel ranges rather than individual    *
 * pixels to reduce the number of canvas draw calls.  It might be             *
 * patentable... though I doubt it is worth anything nowadays due to the      *
 * relative costs of operations of modern hardware (and even most software    *
 * framebuffers).                                                             *
 ******************************************************************************/

var canvas;
var ctx;

var FULL_WIDTH = 800;
var FULL_HEIGHT = 600;

var WIDTH = 800;
var HEIGHT = 600;

var avgRenderTime = 0;

// x, y, z

var vert1 = [[-1,-1,-1,1], [-1,1,-1,1], [1,1,-1,1], [1, -1, -1,1],
	    [-1,-1,1,1], [-1,1,1,1], [1,1,1,1], [1, -1, 1,1]];
var tri1 = [[0, 1, 2, "rgb(255,0,0)"], [2, 3, 0, "rgb(255,0,0)"],
	   [4, 6, 5, "rgb(0,255,0)"], [6, 4, 7, "rgb(0,255,0)"],
	   [0, 5, 1, "rgb(0,0,255)"], [0, 4, 5, "rgb(0,0,255)"],
	   [3, 2, 7, "rgb(0,255,255)"], [2, 6, 7, "rgb(0,255,255)"],
	   [0, 3, 4, "rgb(255,255,0)"], [3, 7, 4, "rgb(255,255,0)"],
	   [1, 6, 2, "rgb(255,0,255)"], [1, 5, 6, "rgb(255,0,255)"]];

var vert2 = [[-1, -1.5, .51, 1], [-1, 1.5, -.51, 1], [0, -1.5, .51, 1],
	    [-1, .5, .51, 1], [2, 1.5, -.2, 1], [-2, 1.5, .51, 1],
	    [1, 1.5, .51, 1], [2, 1.5, .51, 1], [-1, -1.5, -.51, 1]];

var tri2 = [[0, 1, 2, "rgb(255,0,0)"],
	    [3, 5, 4, "rgb(0,255,0)"],
	    [6, 7, 8, "rgb(0,0,255)"]];

var vert3 = [[.866, 0, .5, 1], [.5, .866, .5, 1], [0, 0, .5, 1],
	     [.5, .866, .5, 1], [-.5, .866, .5, 1], [0, 0, .5, 1],
	     [-.5, .866, .5, 1], [-.866, 0, .5, 1], [0, 0, .5, 1],
	     [-.866, .5, .5, 1], [-.866, -.5, .5, 1], [0, 0, .5, 1],
	     [-.866, 0, .5, 1], [-.5, -.866, .5, 1], [0, 0, .5, 1],
	     [-.5, -.866, .5, 1], [.5, -.866, .5, 1], [0, 0, .5, 1],
	     [.5, -.866, .5, 1], [.866, 0, .5, 1], [0, 0, .5, 1],
	     [.866, -.5, .5, 1], [.866, .5, .5, 1], [0, 0, .5, 1],

	     [.866, 0, -.5, 1], [.5, .866, -.5, 1], [0, 0, -.5, 1],
	     [.5, .866, -.5, 1], [-.5, .866, -.5, 1], [0, 0, -.5, 1],
	     [-.5, .866, -.5, 1], [-.866, 0, -.5, 1], [0, 0, -.5, 1],
	     [-.866, .5, -.5, 1], [-.866, -.5, -.5, 1], [0, 0, -.5, 1],
	     [-.866, 0, -.5, 1], [-.5, -.866, -.5, 1], [0, 0, -.5, 1],
	     [-.5, -.866, -.5, 1], [.5, -.866, -.5, 1], [0, 0, -.5, 1],
	     [.5, -.866, -.5, 1], [.866, 0, -.5, 1], [0, 0, -.5, 1],
	     [.866, -.5, -.5, 1], [.866, .5, -.5, 1], [0, 0, -.5, 1],

	     [.25, 0, 0, 1], [0, .25, 0, 1], [.0, 0, -.5, 1],
	     [.25, 0, 0, 1], [0, -.25, 0, 1], [.0, 0, -.5, 1],
	     [-.25, 0, 0, 1], [0, .25, 0, 1], [.0, 0, -.5, 1],
	     [-.25, 0, 0, 1], [0, -.25, 0, 1], [.0, 0, -.5, 1],

	     [.25, 0, 0, 1], [0, .25, 0, 1], [.0, 0, .5, 1],
	     [.25, 0, 0, 1], [0, -.25, 0, 1], [.0, 0, .5, 1],
	     [-.25, 0, 0, 1], [0, .25, 0, 1], [.0, 0, .5, 1],
	     [-.25, 0, 0, 1], [0, -.25, 0, 1], [.0, 0, .5, 1],

];
// I did not properly order some of these triangles, so they're facing the wrong way
var tri3 = [[0, 1, 2, "rgb(64, 64, 64)"],
	    [3, 4, 5, "rgb(64, 64, 64)"],
	    [6, 7, 8, "rgb(64, 64, 64)"],
	    //	    [9, 10, 11, "rgb(64, 64, 64)"],
	    [12, 13, 14, "rgb(64, 64, 64)"],
	    [15, 16, 17, "rgb(64, 64, 64)"],
	    [18, 19, 20, "rgb(64, 64, 64)"],
	    //	    [21, 22, 23, "rgb(64, 64, 64)"],

	    [24, 25, 26, "rgb(64, 64, 64)"],
	    [27, 28, 29, "rgb(64, 64, 64)"],
	    [30, 31, 32, "rgb(64, 64, 64)"],
	    //	    [33, 34, 35, "rgb(64, 64, 64)"],
	    [36, 37, 38, "rgb(64, 64, 64)"],
	    [39, 40, 41, "rgb(64, 64, 64)"],
	    [42, 43, 44, "rgb(64, 64, 64)"],
	    //	    [45, 46, 47, "rgb(64, 64, 64)"],

	    [48, 49, 50, "rgb(128, 128, 128)"],
	    [51, 52, 53, "rgb(128, 128, 128)"],
	    [54, 55, 56, "rgb(128, 128, 128)"],
	    [57, 58, 59, "rgb(128, 128, 128)"],

	    [60, 61, 62, "rgb(128, 128, 128)"],
	    [63, 64, 65, "rgb(128, 128, 128)"],
	    [66, 67, 68, "rgb(128, 128, 128)"],
	    [69, 70, 71, "rgb(128, 128, 128)"]
];

var vert = vert3;
var tri = tri3;

var twosided = true;

var angle = 47.4;
var axis = "X";
var mode = "lines";

var lastPoint = null;
var fastLines = true;
var fill = false;
var scanLineInfo;
var zbuff;
var drawInterval;
var dumpZ = false;

function changeQuality(direction) {
  if (direction == "better" && WIDTH < FULL_WIDTH) {
    WIDTH *= 2; HEIGHT *= 2;
  }
  else if (direction == "worse" && FULL_WIDTH/WIDTH < 16){
    WIDTH /= 2; HEIGHT /= 2;
  }
  if (WIDTH < FULL_WIDTH) {
    document.getElementById("qUpButton").disabled = false;
  }
  else
    document.getElementById("qUpButton").disabled = true;
  if (FULL_WIDTH / WIDTH >= 16) {
    document.getElementById("qDownButton").disabled = true;
  }
  else
    document.getElementById("qDownButton").disabled = false;

  document.getElementById("qualitySpan").innerHTML = (WIDTH / FULL_WIDTH)*100 + "%";
}

function init() {
  canvas = document.getElementById("theCanvas");
  var error = false;
  try {
    ctx = canvas.getContext("2d");
  } catch(e) {
    document.getElementById("errorMsg").style.display="block"; error = true;
  };
  
  if (!error)
    drawInterval = setInterval(plot, 10);
}

function dist(a, b) {
  var da; var db; var dc;
  da = a[0] - b[0];
  db = a[1] - b[1];
  dc = a[2] - b[2];
  return Math.sqrt(da*da + db*db + dc*dc)
}

function min(a, b) {
  return (a < b) ? a : b;
}

function max(a, b) {
  return (a > b) ? a : b;
}

function bresenham(x2, y2, z2) {
  if (!lastPoint) {
    lastPoint = [x2, y2, z2];
    return; // first point, just set up start point
  }
  var x1 = lastPoint[0];
  var y1 = lastPoint[1];
  var z1 = lastPoint[2];
  lastPoint = [x2,y2,z2];
  var steep;
  var temp;
  steep = Math.abs(y2-y1) > Math.abs(x2-x1);
  if (steep) {
    temp = x1;
    x1 = y1;
    y1 = temp;
    temp = x2;
    x2 = y2;
    y2 = temp;
  }
  if (x1 > x2) {
    temp = x1;
    x1 = x2;
    x2 = temp;

    temp = y1;
    y1 = y2;
    y2 = temp;

    temp = z1;
    z1 = z2;
    z2 = temp;
  }
  var dx = x2 - x1;
  var dy = Math.abs(y2 - y1);
  var error = 0;
  var derror = dy / dx;
  var y = y1;
  var ystep;
  if (y1 < y2)
    ystep = 1;
  else
    ystep = -1;

  var x;
  var minx, maxx;
  var zA;
  var zB;
  for (x=x1; x<=x2; x++) {
    var dx = max(x2 - x1, .01);
    if (steep) {
      plotPixel(y, x);
      if (fill && x >= 0 && x < HEIGHT) {
	if (scanLineInfo[x]) {
	  minx = scanLineInfo[x][0];
	  maxx = scanLineInfo[x][1];
	  zA = scanLineInfo[x][2];
	  zB = scanLineInfo[x][3];
	}
	else {
	  minx = y;
	  maxx = y;
	  zA = (x-x1)/dx * (z2-z1) + z1;
	  zB = (x-x1)/dx * (z2-z1) + z1;
	}
	if (y < minx) {
	  minx = y;
	  zA = (x-x1)/dx * (z2-z1) + z1;
	}
	if (y > maxx) {
	  maxx = y;
	  zB = (x-x1)/dx * (z2-z1) + z1;
	}
	if (isNaN(zA) || isNaN(zB)) {
	  alert(x + " " + x1 + " " + dx + " " + z2 + " " + z1);
	  null[5] = 0;
	}
	scanLineInfo[x] = [minx, maxx, zA, zB];
      }
    }
    else {
      plotPixel(x, y);
      if (fill && y >= 0 && y < HEIGHT) {
	if (scanLineInfo[y]) {
	  minx = scanLineInfo[y][0];
	  maxx = scanLineInfo[y][1];
	  zA = scanLineInfo[y][2];
	  zB = scanLineInfo[y][3];
	}
	else {
	  minx = x;
	  maxx = x;
	  zA = (x-x1)/dx * (z2-z1) + z1;
	  zB = (x-x1)/dx * (z2-z1) + z1;
	}
	if (x < minx) {
	  minx = x;
	  zA = (x-x1)/dx * (z2-z1) + z1;
	}
	if (x > maxx) {
	  maxx = x;
	  zB = (x-x1)/dx * (z2-z1) + z1;
	}

	scanLineInfo[y] = [minx, maxx, zA, zB];
      }
    }
    error += derror;
    if (error > .5) {
      y += ystep;
      error--;
    }
  }
}

function plotPixel(x, y) {
  if (fill)
    return;
  ctx.fillRect(x, y, 1, 1);
}

function doVert(v, d, first) {
  var y1 = (v[1]*d) / (d + v[2]);
  var x1 = (v[0]*d) / (d + v[2]);
  var z1 = v[2];
  // center 0,0 on the screen
  y1 *= HEIGHT;
  x1 *= HEIGHT;
  y1 += HEIGHT/2;
  x1 += WIDTH/2;

  if (mode == "lines") {
    if (fastLines) {
      if (first)
	ctx.moveTo(x1, y1);
      else
	ctx.lineTo(x1, y1);
    }
    else {
      //bresenham(parseInt(x1), parseInt(y1), parseInt(z1));
      bresenham(parseInt(x1), parseInt(y1), z1);
    }
  }
  else  if (mode == "points") {
    ctx.fillRect(x1-1, y1-1, 2, 2);
  }
}

function transform(v, m) {
  var x2 = v[0] * m[0][0] + v[1]*m[0][1] + v[2]*m[0][2] + v[3]*m[0][3];
  var y2 = v[0] * m[1][0] + v[1]*m[1][1] + v[2]*m[1][2] + v[3]*m[1][3];
  var z2 = v[0] * m[2][0] + v[1]*m[2][1] + v[2]*m[2][2] + v[3]*m[2][3];
  var w2 = v[0] * m[3][0] + v[1]*m[3][1] + v[2]*m[3][2] + v[3]*m[3][3];
  var rv = [x2, y2, z2, w2];
  return rv;
}

function plot() {
  var start; var stop;
  try { // safari compatibility
    start = Date.now();
  } catch (e) {}
  angle += .05;
  //angle = 94.148; axis = "Y"; fastLines = false; fill = true; dumpZ = true;clearInterval(drawInterval);
  //angle = 94.149; axis = "Y"; fastLines = false; fill = true; dumpZ = true;clearInterval(drawInterval);
  //angle = 56.7; axis = "Y"; fastLines = false; fill = true; dumpZ = true;clearInterval(drawInterval);
  var xposition = 1.5 * Math.cos(1.05*angle);
  var yposition = 0;//Math.sin(2*angle);
  var aboutZ = (axis == "Z");
  var aboutX = (axis == "X");
  var i; var j;
  var matrix;
  ctx.save();
  ctx.scale(FULL_WIDTH/WIDTH, FULL_HEIGHT/HEIGHT);
  zbuff = []; // clear z buffer
  ctx.clearRect(0, 0, WIDTH, HEIGHT); // clear screen

  if (aboutZ) {
    matrix = [[Math.cos(angle), -Math.sin(angle), 0, xposition],
	      [Math.sin(angle),  Math.cos(angle), 0, yposition],
	      [0,                0,               1, +5],
	      [0,                0,               0, 1]];
  }
  else if (aboutX) {
    matrix = [[1,                0,                0,               xposition],
	      [0,                Math.cos(angle),  Math.sin(angle), yposition],
	      [0,                -Math.sin(angle), Math.cos(angle), +5],
	      [0,                0,                0,               1]];
  }
  else {
    matrix = [[Math.cos(angle), 0,                 -Math.sin(angle), xposition],
	      [0,               1,                 0,                yposition],
	      [Math.sin(angle), 0,                 Math.cos(angle), +5],
	      [0,               0,                 0,               1]];
  }
  for (i=0; i<tri.length; i++) {
    doTri(tri[i], matrix);
  }
  if (!fastLines && mode == "lines" && fill)
    drawFromZBuff();
  try { // safari compatibility
    stop = Date.now();
    avgRenderTime = (.9 * avgRenderTime) + (.1 * (stop - start));
    window.status = "Frame render took " + (stop-start) + " ms (frame rate: " + parseInt(100000/avgRenderTime)/100 + " fps)";
  } catch (e) { }
  ctx.restore();
}

function zForPoint(x, range, reason) {
  var x1; var x2;
  var z1; var z2;
  x1 = range[0];
  x2 = range[1];
  z1 = range[2];
  z2 = range[3];
  var dx = x2-x1;
  dx = max(dx, .001);
  var fraction = (x-x1) / dx;

  var rv = fraction * (z2-z1) + z1;
  if (isNaN(rv)) {
    clearInterval(drawInterval);
    alert("x: " + x + " from range " + range + "\n" +
	  "dx was " + dx + " with fraction " + fraction + "\n" +
	  "z1: " + z1 + " z2: " + z2 + "\n" + 
	  "requested by " + reason);
    null[5] = 0;
  }
  return rv;
}

function horizOverlap(z, scan) {
  var zx1; var zx2;
  var sx1; var sx2;
  zx1 = z[0]; zx2 = z[1];
  sx1 = scan[0]; sx2 = scan[1];
  if (zx1 >= sx2 || zx2 <= sx1)
    return false; // no overlap
  var minx, maxx, overlap;
  if (zx1 <= sx1 && zx2 >= sx2) {
    // we're smaller than zbuff
    overlap = "newSmaller";
  }
  else if (sx1 <= zx1 && sx2 >= zx2) {
    // we cover entire range
    overlap = "newBigger";
  }
  else
    overlap = "partial";

  minx = max(zx1, sx1);
  maxx = min(zx2, sx2);

  if (minx == maxx)
    return false; // they touch, or it's 0 width or something, so reject this

  return [minx, maxx, overlap];
}

function cross(n1, n2) {
  var x, y, z;
  x = n1[1]*n2[2] - n1[2]*n2[1];
  y = n1[2]*n2[0] - n1[0]*n2[2];
  z = n1[0]*n2[1] - n1[1]*n2[0];
  var w = 0;
  return [x, y, z, w];
}

function dot(v1, v2) {
  return v1[0]*v2[0] + v1[1]*v2[1] + v1[2]*v2[2];
}

function normalize(v) {
  var l = Math.sqrt(v[0]*v[0]+v[1]*v[1]+v[2]*v[2]+v[3]*v[3]);
  return [v[0]/l, v[1]/l, v[2]/l, v[3]/l];
}

function doTri(poly, matrix) {
  scanLineInfo = [];
  lastPoint = null;
  if (mode == "lines" && fastLines) {
    ctx.beginPath();
    ctx.lineJoin = "bevel";
    ctx.strokeStyle = "rgb(0,0,0)";
  }

  var str;
  if (dumpZ)
    str = document.getElementById("statusText2").innerHTML;
  for (j=0; j<3; j++) {
    var d = 1;
    var v = transform(vert[poly[j]], matrix);
    //clearInterval(2);
    //alert(v);
    doVert(v, d, j == 0);
    if (dumpZ)
      str += v.join(", ") + "<br>";
  }
  str += "&nbsp;<br>";
  if (dumpZ)
    document.getElementById("statusText2").innerHTML = str;

  doVert(transform(vert[poly[0]], matrix), d, false);
  if (mode == "lines" && fastLines)
    ctx.stroke();
  if (mode == "lines" && fill) {
    var v1 = vert[poly[0]];
    var v2 = vert[poly[1]];
    var v3 = vert[poly[2]];
    var n1 = [v2[0]-v1[0], v2[1]-v1[1], v2[2]-v1[2], 0];
    var n2 = [v3[0]-v1[0], v3[1]-v1[1], v3[2]-v1[2], 0];
    n1 = normalize(n1);
    n2 = normalize(n2);
    var norm = cross(n1, n2);
    norm = normalize(norm);
    norm = transform(norm, matrix);
    // don't show backfacing
    if (!twosided && dot(norm, [0, 0, -1]) < -.1)
      return;

    // lighting
    var lightVec = normalize([.25, -.2, -1, 0]);
    var scaleFactor = Math.abs(dot(norm, lightVec));
    var newColor = poly[3];
    
    newColor = newColor.replace(/.*\(/, "");
    newColor = newColor.replace(/\)/, "");
    newColor = newColor.split(/,/);
    scaleFactor = max(scaleFactor, .3);
    newColor = "rgb(" + parseInt(newColor[0]*scaleFactor) + "," +
                        parseInt(newColor[1]*scaleFactor) + "," +
                        parseInt(newColor[2]*scaleFactor) + ")";
    

    for (var i=0; i<HEIGHT; i++) {
      if (i == 563563)
	alert("Scanline " + i + "\n" + 
	      "before: " + zbuff[i]);
      // was there anything drawn to this row?
      if (scanLineInfo[i]) {
	// pull out the zbuffer array for this row
	var zbrow = zbuff[i];
	if (!zbrow) {
	  zbrow = [[0, WIDTH, 9999, 9999, "rgb(255,255,255)"]];
	}
	for (var j=0; j<zbrow.length; j++) {
	  if (i == 563563) {
	    alert("for poly " + poly + "\n" + 
		  "zbrow item " + j + "\n" +
		  "before: " + zbuff[i])
	  }
	    // is there horizontal overlap?
	  var range = horizOverlap(zbrow[j], scanLineInfo[i]);
	  if (range) {
	    var zbz1; var zbz2;
	    var mz1; var mz2;
	    zbz1 = zForPoint(range[0], zbrow[j], "z1");
	    zbz2 = zForPoint(range[1], zbrow[j], "z2");
	    mz1 = zForPoint(range[0], scanLineInfo[i], "s1");
	    mz2 = zForPoint(range[1], scanLineInfo[i], "s2");

	    if (zbz1 >= mz1 && zbz2 >= mz2)
	      {
		// over the entire overlap range, we're closer
		// set our material for this overlap range
		if (range[2] == "newSmaller") {
		  // split the range up into 3 pieces {z, us, z}
		  var newx1, newx2, newx3, newx4;
		  newx1 = zbrow[j][0];
		  newx2 = scanLineInfo[i][0];
		  newx3 = scanLineInfo[i][1];
		  newx4 = zbrow[j][1];
		  var oldMat = zbrow[j][4];
		  var oldz1 = zbrow[j][2];
		  var oldz2 = zbrow[j][3];

		  var addedCount = 0;
		  if (newx1 != newx2) {
		    zbrow.splice(j+1+addedCount, 0, [newx1, newx2, oldz1, zbz1, oldMat]);
		    addedCount++;
		  }
		  if (newx2 != newx3) {
		    zbrow.splice(j+1+addedCount, 0, [newx2, newx3, mz1, mz2, newColor]);
		    addedCount++;
		  }
		  if (newx3 != newx4) {
		    zbrow.splice(j+1+addedCount, 0, [newx3, newx4, zbz2, oldz2, oldMat]);
		    addedCount++;
		  }
		  zbrow.splice(j, 1);

		  j += 2; // skip the 2 we added
		}
		else if (range[2] == "newBigger") {
		  // leave the full range, but set it to our material and update the z values
		  zbrow[j][2] = mz1;
		  zbrow[j][3] = mz2;
		  zbrow[j][4] = newColor;
		}
		else {
		  // split the range into pieces, since we're not completely
		  // contained within the range or larger than it
		  if (zbrow[j][0] >= scanLineInfo[i][0]) {
		    // this poly is in the left half of the interval
		    // insert it, and move the start of original region right
		    if (i == 563563) {
		      var blahstr = "";
		      for (var blah = 0; blah < zbuff[i].length; blah++)
			blahstr += zbuff[i][blah] + "\n";
		      alert("left before\n" +
			    "j: " + j + "\n" + 
			    "zbrow[j]: " + zbrow[j] + "\n" + 
			    "scanLineInfo[i]: " + scanLineInfo[i] + "\n" +
			    "poly: " + poly + "\n" + 
			    "range: " + range + "\n" + 
			    "zbrow: " + blahstr);
		    }
		    zbrow[j][2] = zForPoint(scanLineInfo[i][1], zbrow[j], "lateCut");
		    zbrow[j][0] = range[1];//scanLineInfo[i][1];
		    if (i == 563563) alert("left mid: " + zbrow[j]);
		    var cutCount = (zbrow[j][0] == zbrow[j][1]) ? 1 : 0;
		    if (i == 563563 && cutCount == 1) alert("CUT!");
		    zbrow.splice(j, cutCount, [range[0], scanLineInfo[i][1], mz1, mz2, newColor]);
		    //if (confirm(zbrow))
		    //  null[5] = 0;
		    j++;
		    if (i == 563563) {
		      var blahstr = "";
		      for (var blah = 0; blah < zbuff[i].length; blah++)
			blahstr += zbuff[i][blah] + "\n";
		      alert("left after\n" +
			    "j: " + j + "\n" + 
			    "zbrow[j]: " + zbrow[j] + "\n" + 
			    "scanLineInfo[i]: " + scanLineInfo[i] + "\n" +
			    "range: " + range + "\n" +
			    "poly: " + poly + "\n" + 
			    "zbrow: " + blahstr);
		    }
		  }
		  // i don' understand why this test is <= instead of >=
		  else if (zbrow[j][1] <= scanLineInfo[i][1]) {
		    // this poly is in the right half of the interval
		    // make original region end early and add the poly after it
		    if (i == 563563) {
		      var blahstr = "";
		      for (var blah = 0; blah < zbuff[i].length; blah++)
			blahstr += zbuff[i][blah] + "\n";
		      alert("right before\n" +
			    "j: " + j + "\n" + 
			    "zbrow[j]: " + zbrow[j] + "\n" + 
			    "scanLineInfo[i]: " + scanLineInfo[i] + "\n" +
			    "poly: " + poly + "\n" + 
			    "range: " + range + "\n" +
			    "zbrow: " + blahstr);
		    }
		    // TODO can this be zbz1?
		    zbrow[j][3] = zForPoint(scanLineInfo[i][0], zbrow[j], "earlyCut");
		    zbrow[j][1] = range[0];
		    var cutCount = (zbrow[j][0] == zbrow[j][1]) ? 1 : 0;
		    zbrow.splice(j+1, cutCount,
				 [range[0], range[1], mz1, mz2, newColor]);
		    //if (confirm(zbrow))
		    //  null[5] = 0;
		    j++; // skip over new range	
		    if (i == 563563) {
		      var blahstr = "";
		      for (var blah = 0; blah < zbuff[i].length; blah++)
			blahstr += zbuff[i][blah] + "\n";
		      alert("right after\n" +
			    "j: " + j + "\n" + 
			    "cutCount: " + cutCount + "\n" +
			    "zbrow[j]: " + zbrow[j] + "\n" + 
			    "scanLineInfo[i]: " + scanLineInfo[i] + "\n" +
			    "range: " + range + "\n" +
			    "zbrow: " + blahstr);
		    }
		  }
		  else if (range[0] == range[1]) {
		    // HACK TODO FIXME!!!
		    // this range is 0px wide, so ignore it?
		    window.status = "ignored!";
		    if (i == 563563) alert("ignored");
		  }
		  else {
		    // wtf?
		    
		    clearInterval(drawInterval);
		    alert("wtf?");
		    alert("need to split :-(\n" + 
			  "range of overlap: " + range + "\n" + 
			  "z: " + zbrow[j] + "\n" + 
			  "poly: " + scanLineInfo[i] + "\n" +
			  "zbrow: " + zbrow);
		    null[5] = 0;
		  }
		}
	      }
	    else if (zbz1 <= mz1 && zbz2 <= mz2)
	      {
		// already something closer... do nothing
		if (i == 563563) alert("already something closer");
	      }
	    else
	      {
		// partially in front, partially behind
		var isect = findIntersection(range, mz1, mz2, zbz1, zbz2);
		if (i == 563563) {
		  alert("partially in front, partially behind - doing intersect!\n" +
			"range: " + range + "\n" + 
			"poly: " + scanLineInfo[i] + "\n" +
			"zb: " + zbrow[j] + "\n" + 
			"isect: " + isect + "\n" + 
			"j: " + j);
		}
		isect = parseInt(isect);
		var die = true;
		if (mz1 <= zbz1) {
		  // we're on the left of the range, so end result should be
		  // [existing] {[us] [existing]}
		  // where { } indicates range of overlap
		  if (i == 563563) {
		    var blahstr = "";
		    for (var blah = 0; blah < zbuff[i].length; blah++)
		      blahstr += zbuff[i][blah] + "\n";
		    alert("Partial Left Before: " + blahstr);
		  }

		  var newx1; var newx2; var newx3; var newx4;
		  newx1 = zbrow[j][0];
		  newx2 = range[0];
		  newx3 = isect;
		  newx4 = zbrow[j][1];

		  var oldz1 = zbrow[j][2];
		  var oldz2 = zbrow[j][3];
		  var oldMat = zbrow[j][4];

		  var addedCount = 0;
		  if (newx1 != newx2) {
		    zbrow.splice(j+1+addedCount, 0, [newx1, newx2, oldz1, zbz1, oldMat]);
		    addedCount++;
		  }
		  if (newx2 != newx3) {
		    zbrow.splice(j+1+addedCount, 0, [newx2, newx3, mz1, zForPoint(newx3, [range[0], range[1], mz1, mz2], "splitRegion"), newColor]);
		    addedCount++;
		  }
		  if (newx3 != newx4) {
		    zbrow.splice(j+1+addedCount, 0, [newx3, newx4, zForPoint(newx3, [range[0], range[1], zbz1, zbz2], "splitRegion"), oldz2, oldMat]);
		    addedCount++;
		  }
		  zbrow.splice(j, 1); // cut the existing one
		  die = false;
		}
		else if (mz2 <= zbz2) {
		  if (i == 563563) {
		    var blahstr = "";
		    for (var blah = 0; blah < zbrow.length; blah++)
		      blahstr += zbrow[blah] + "\n";
		    alert("Partial Right Before: " + blahstr + "\n" + 
			  "scanLine: " + scanLineInfo[i] + "\n" +
			  "zb: " + zbrow[j] + "\n" + 
			  "range: " + range + "\n");
		  }

		  var newx1, newx2, newx3, newx4;
		  newx1 = zbrow[j][0];
		  newx2 = isect;
		  newx3 = range[1];
		  newx4 = zbrow[j][1];
		  if (i == 563563) alert(newx1 + " " + newx2 + " " + newx3 + " " + newx4);

		  var oldz1 = zbrow[j][2];
		  var oldz2 = zbrow[j][3];
		  var oldMat = zbrow[j][4];

		  var addedCount = 0;
		  if (newx1 != newx2) {
		    zbrow.splice(j+1+addedCount, 0, [newx1, newx2, oldz1, zForPoint(isect, [range[0], range[1], zbz1, zbz2], "splitRegion"), oldMat]);
		    addedCount++;
		  }
		  if (newx2 != newx3) {
		    zbrow.splice(j+1+addedCount, 0, [newx2, newx3, zForPoint(isect, [range[0], range[1], mz1, mz2], "splitRegion"), mz2, newColor]);
		    addedCount++;
		  }
		  if (newx3 != newx4) {
		    zbrow.splice(j+1+addedCount, 0, [newx3, newx4, zbz2, oldz1, oldMat]);
		    addedCount++;
		  }
		  zbrow.splice(j, 1); // cut the existing one

		  if (i == 563563) {
		    var blahstr = "";
		    for (var blah = 0; blah < zbrow.length; blah++)
		      blahstr += zbrow[blah] + "\n";
		    alert("Partial Right After: " + blahstr);
		  }
		  die = false;
		}
		else {
		  alert("partial, strange!");
		}
		if (die) {
		  alert("partial :-(");
		  alert("range: " + range + "\n" +
			"zbrow: " + zbrow[j] + "\n" + 
			"poly: " + scanLineInfo[i] + "\n");
		  //			zbz1 + "->" + zbz2 + " vs " + mz1 + "->" + mz2);
		  clearInterval(drawInterval);
		  null[5] = 0;
		}
	      }
	  }
	  if (i == 563563 && zbuff[i]) {
	    var blahstr = "";
	    for (var blah = 0; blah < zbuff[i].length; blah++)
	      blahstr += zbuff[i][blah] + "\n";
	    alert("for poly " + poly + "\n" + 
		  "after item " + j + ": " + blahstr);
	  }
	}
	zbuff[i] = zbrow;

	if (i == 563563) {
	  var blahstr = "";
	  for (var blah = 0; blah < zbuff[i].length; blah++)
	    blahstr += zbuff[i][blah] + "\n";
	  alert("after: " + blahstr);
	}
      }
    }
  }
}

// return x coordinate of intersection point
function findIntersection(range, za1, za2, zb1, zb2) {
  var dx = range[1] - range[0];
  var dza = za2 - za1;
  var dzb = zb2 - zb1;
  var slopea = dza / dx;
  var slopeb = dzb / dx;
  var offseta = zForPoint(0, [range[0], range[1], za1, za2], "findIntersection");
  var offsetb = zForPoint(0, [range[0], range[1], zb1, zb2], "findIntersection");
  var rv = (offseta - offsetb) / (slopeb - slopea);
  return rv;
}

function drawFromZBuff() {
  var str;
  if (dumpZ)
    str = "<table>";
  var j;
  for (j=0; j<HEIGHT; j++) {
    var zbrow = zbuff[j];
    if (zbrow) {
      if (dumpZ)
	str += "<tr><td>"+j+"</td>";
      var i;
      for (i=0; i<zbrow.length; i++) {
	if (!dumpZ)
	  if (zbrow[i][4] == "rgb(255,255,255)") {
	    continue; // don't bother drawing white
	  }
	ctx.beginPath();
	ctx.strokeStyle = zbrow[i][4];
	ctx.moveTo(zbrow[i][0], j+.5);
	ctx.lineTo(zbrow[i][1], j+.5);
	ctx.stroke();

	if (dumpZ)
	  str += "<td>" + zbrow[i] + "</td>";
      }
      if (dumpZ)
	str += "</tr>";
    }
  }
  if (dumpZ) {
    str += "</table>";
    document.getElementById("statusText").innerHTML = str;
  }  
}
window.onload = init;
</script>

Copy All x2

<p>Rotation axis: <input name="axis" value="Z" onclick="axis='Z'" type="radio"> Z
      <input name="axis" value="Y" onclick="axis='Y';" type="radio"> Y
      <input name="axis" value="X" onclick="axis='X';" checked="checked" type="radio"> X</p>

    <p>Draw mode: <input name="drawStyle" value="lines" onclick="mode='lines'" checked="checked" type="radio"> Lines / Polygons
      <input name="drawStyle" value="points" onclick="mode='points'" type="radio"> Points</p>
    <p>View style: <input name="fastLines" value="fast" onclick="fastLines=true;fill=false;" checked="checked" type="radio"> Built in lines (fast) <input name="fastLines" value="slow" onclick="fastLines=false;fill=false;" type="radio"> Manual Bresenham <input name="fastLines" value="true2" onclick="fill=true; fastLines=false;" type="radio"> <b>Filled polygons</b></p>
    <p>Scene: <input name="scene" value="square" onclick="vert=vert1;tri=tri1;twosided=false;" type="radio"> Cube <input name="scene" value="tris" onclick="vert=vert2;tri=tri2;twosided=true;" type="radio"> Mutually-overlapping triangles <input name="scene" value="tie" onclick="vert=vert3;tri=tri3;twosided=true;" checked="checked" type="radio"> <b>TIE fighter</b></p>

    <p>Quality: <input id="qDownButton" value="Worse (faster)" onclick="changeQuality('worse')" type="button"> <input id="qUpButton" disabled="DISABLED" value="Better (slower)" onclick="changeQuality('better')" type="button"> <span id="qualitySpan">100%</span>
    </p><div id="errorMsg" style="border: 5px solid red; display: none; font-size: 14pt;">Your browser doesn't support a required feature (the <a href="http://www.google.com/search?q=html+canvas+tag&amp;start=0&amp;start=0&amp;ie=utf-8&amp;oe=utf-8&amp;client=mozilla&amp;rls=org.mozilla:en-US:unofficial">HTML Canvas tag</a>).  You could get a <a href="http://www.mozilla.org/projects/seamonkey">better browser</a> (or <a href="http://www.mozilla.com/">this one</a>, or, if you're on a Mac, Safari).</div>
    <canvas id="theCanvas" width="800" height="600" onmousemove="return;var y = event.clientY - document.getBoxObjectFor(document.getElementById('theCanvas')).y + document.body.scrollTop; var x = event.clientX - document.getBoxObjectFor(document.getElementById('theCanvas')).x + document.body.scrollLeft; window.status=x+', '+y;"></canvas>

    <div id="statusText2"></div>
    <div id="statusText"></div>

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

11/06/2013
Christopher Thomas [more]
5,109
0
0
0
30.07 KBytes

Simple 3D Graphics Animation in JavaScript

0/5 0 votes / 5,109 previews / 0 comment 11/06/2013 Here are some 3D graphics made with just JavaScript, let teach yourself by this ...Simple 3D Graphics Animation in JavaScript - Simple 3D Graphics Animation in JavaScript

Let's be first member to do this