mcasualsdazscripts2 - webgllaboratory

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

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>