webgllaboratory

we will now see if the basic 3d rendering maths are as simple as shown below


first here's our test model as rendered by Daz Studio


this model exists as an .obj and and an .mtl file
from content of the obj file we will only retain the mtllib, v, usemtl and f statements
from the content of the mtl file we will retain the newmtl  and Kd statements


since my attempts to get html5 javascript running here at google failed

i have it running on my old old old tripod site

http://mcasual.tripod.com/houze.html

the results were positive !

screen-copy of the HTML5-Canvas javascript ''applet''



the html5/javascript code for this renderer

<canvas id="myCanvasTop" width="400" height="400"></canvas>
<canvas id="myCanvasLeft" width="400" height="400"></canvas>
<br>
<canvas id="myCanvasFront" width="400" height="400"></canvas>
<canvas id="myCanvasX" width="400" height="400"></canvas>

<script type="text/javascript" >
var beige = [ 0.80, 0.59, 0.39 ];
var litegray = [ 1.00, 1.00, 1.00 ];
var red = [ 1.00, 0.00, 0.00 ];

var FocalLength = 3.5;

v = [
[154.715,328.255,0],
[154.715,221.137,-154.715],
[-154.715,221.137,-154.715],
[-154.715,328.255,0],
[-154.715,221.137,154.715],
[154.715,221.137,154.715],
[-154.715,323.782,0],
[154.715,323.782,0],
[154.715,216.664,-151.618],
[-154.715,216.664,-151.618],
[-154.715,216.664,151.618],
[154.715,216.664,151.618],
[-121.92,8.17035,121.92],
[121.92,8.17035,121.92],
[-121.92,238.019,121.92],
[121.92,238.019,121.92],
[-121.92,238.019,-121.92],
[121.92,238.019,-121.92],
[-121.92,8.17035,-121.92],
[121.92,8.17035,-121.92],
[-121.92,322.432,0],
[121.92,322.432,0],
[121.92,192.034,-44.1375],
[121.92,8.12182,-44.1375],
[121.92,192.034,44.1375],
[121.92,8.12182,44.1375],
[-56.9403,54.251,121.92],
[56.9403,54.251,121.92],
[56.9403,145.969,121.92],
[-56.9403,145.969,121.92],
[117.566,238.019,-117.566],
[117.566,8.17035,-117.566],
[-117.566,8.17035,-117.566],
[-117.566,238.019,-117.566],
[117.566,238.019,117.566],
[113.211,322.432,0],
[-117.566,8.17035,117.566],
[-117.566,238.019,117.566],
[-113.211,322.432,0],
[113.211,192.034,44.1375],
[113.211,192.034,-44.1375],
[117.566,8.17035,117.566],
[56.9403,54.251,113.211],
[-56.9403,54.251,113.211],
[56.9403,145.969,113.211],
[-56.9403,145.969,113.211],
[113.211,8.12182,44.1375],
[113.211,8.12182,-44.1375],
[-197.41,8.17035,197.41],
[197.41,8.17035,197.41],
[197.41,8.17035,-197.41],
[-197.41,8.17035,-197.41],
[-197.41,0,197.41],
[197.41,0,197.41],
[197.41,0,-197.41],
[-197.41,0,-197.41]
];

var mats = [];
var f = [];

mats[0] = red;
f[0] = [
[7,8,9,10],
[11,12,8,7],
[4,3,2,1],
[5,4,1,6],
[1,2,9,8],
[2,3,10,9],
[3,4,7,10],
[5,6,12,11],
[6,1,8,12],
[4,5,11,7]
];

mats[1] = litegray;
f[1] = [
[31,32,33,34],
[36,35,31],
[33,37,38,34],
[39,34,38],
[35,40,41,31],
[37,42,43,44],
[42,35,45,43],
[38,46,45,35],
[38,37,44,46],
[40,35,42,47],
[41,48,32,31],
[18,17,19,20],
[22,18,16],
[19,17,15,13],
[21,15,17],
[16,18,23,25],
[13,27,28,14],
[14,28,29,16],
[15,16,29,30],
[15,30,27,13],
[25,26,14,16],
[23,18,20,24],
[17,18,31,34],
[22,16,35,36],
[18,22,36,31],
[21,17,34,39],
[15,21,39,38],
[25,23,41,40],
[28,27,44,43],
[29,28,43,45],
[30,29,45,46],
[16,15,38,35],
[27,30,46,44],
[26,25,40,47],
[23,24,48,41]
];

mats[2] = beige;
f[2] = [
[56,53,54,55],
[49,52,51,50],
[49,50,54,53],
[50,51,55,54],
[51,52,56,55],
[52,49,53,56]
];

function jview( viewname, c0, c1, o0, o1 )
{
    var canvas = document.getElementById( viewname );
    var context = canvas.getContext( '2d' );
    context.fillStyle="#FFFFE0";
    context.fillRect(0,0,canvas.width-1,canvas.height-1 );
    var n = f.length;
    for( var i = 0; i < n; i++ )
    {
        faces = f[i];
        nFaces = faces.length;
        for( var j = 0; j < nFaces; j++ )
        {
            drawFace( faces[j], c0, c1, o0, o1, context );
        }
    }
}

function drawFace( face, c0, c1, o0, o1, context )
{
    context.beginPath();
    vtx = v[face[0]-1];
    context.moveTo( o0 + vtx[c0], 400 - ( o1 + vtx[c1] ) );
    for( var i = 1; i < face.length; i++ )
    {
        vtx = v[face[i]-1];
        context.lineTo( o0 + vtx[c0], 400 - ( o1 + vtx[c1] ) );
    }
    vtx = v[face[0]-1];
    context.lineTo( o0 + vtx[c0], 400 - ( o1 + vtx[c1] ) );
    context.stroke();
}

function drawFace3D( face, context, obsPos )
{
    context.beginPath();
    vtx = project( obsPos, v[face[0]-1] )
    context.moveTo( vtx[0], 400 - vtx[1] );
    for( var i = 1; i < face.length; i++ )
    {
        vtx = project( obsPos, v[face[i]-1] );
        context.lineTo( vtx[0], 400 - vtx[1] );
    }
    vtx = project( obsPos, v[face[0]-1] );
    context.lineTo( vtx[0], 400 - vtx[1] );
    context.stroke();
}

function project( obsPos, v )
{
    var Zratio = FocalLength  / ( v[2] - obsPos[2] );
    var xy = [ Zratio * ( v[0] - obsPos[0] ), Zratio * ( v[1] - obsPos[1] ) ];
    xy[0] *= 200;
    xy[0] += 200;
    xy[1] *= 200;
    xy[1] += 200;
    return( xy );
}

function D3view3D( viewname, obsPos )
{
    var canvas = document.getElementById( viewname );
    var context = canvas.getContext( '2d' );
    context.fillStyle="#F0F0FF";
    context.fillRect(0,0,canvas.width-1,canvas.height-1 );
    var n = f.length;
    for( var i = 0; i < n; i++ )
    {
        faces = f[i];
        nFaces = faces.length;
        for( var j = 0; j < nFaces; j++ )
        {
            drawFace3D( faces[j], context, obsPos );
        }
    }
}
function rotateModel()
{
    var arad = 45 * Math.PI / 180.0;
    var sinA = Math.sin( arad );
    var cosA = Math.cos( arad );
    var n = v.length
    for( var i = 0; i < n; i++ )
    {
        var vtx = v[i];   
        var nux = vtx[0] * cosA - vtx[2] * sinA;
        var nuz = vtx[0] * sinA + vtx[2] * cosA;
        v[i][0] = nux;
        v[i][2] = nuz;
    }
}

jview( 'myCanvasTop', 0, 2, 200, 200 );
jview( 'myCanvasLeft', 2, 1, 200, 0 );
jview( 'myCanvasFront', 0, 1, 200, 0  );
rotateModel();
D3view3D( 'myCanvasX', [0,200,-1200] );
</script>

ċ
mcjHouze.mtl
(0k)
mCasual Jacques,
Feb 28, 2013, 7:50 AM
ċ
mcjHouze.obj
(11k)
mCasual Jacques,
Feb 28, 2013, 7:49 AM
Comments