Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]


Groups > comp.lang.javascript > #35023 > unrolled thread

Trying to do 3D (THIRD TRY)

Started bybit-naughty@hotmail.com
First post2018-05-13 12:35 -0700
Last post2018-05-22 13:50 -0700
Articles 19 — 4 participants

Back to article view | Back to comp.lang.javascript


Contents

  Trying to do 3D (THIRD TRY) bit-naughty@hotmail.com - 2018-05-13 12:35 -0700
    Re: Trying to do 3D (THIRD TRY) Leonardo Campos <leonardoscampos@gmail.com> - 2018-05-14 22:29 -0700
      Re: Trying to do 3D (THIRD TRY) bit-naughty@hotmail.com - 2018-05-15 08:15 -0700
        Re: Trying to do 3D (THIRD TRY) Leonardo Campos <leonardoscampos@gmail.com> - 2018-05-15 18:10 -0700
          Re: Trying to do 3D (THIRD TRY) bit-naughty@hotmail.com - 2018-05-16 05:23 -0700
            Re: Trying to do 3D (THIRD TRY) Leonardo Campos <leonardoscampos@gmail.com> - 2018-05-16 21:38 -0700
              Re: Trying to do 3D (THIRD TRY) bit-naughty@hotmail.com - 2018-05-16 23:18 -0700
                Re: Trying to do 3D (THIRD TRY) bit-naughty@hotmail.com - 2018-05-16 23:47 -0700
                  Re: Trying to do 3D (THIRD TRY) Leonardo Campos <leonardoscampos@gmail.com> - 2018-05-17 01:03 -0700
                Re: Trying to do 3D (THIRD TRY) Leonardo Campos <leonardoscampos@gmail.com> - 2018-05-17 00:56 -0700
    Re: Trying to do 3D (THIRD TRY) bit-naughty@hotmail.com - 2018-05-15 10:48 -0700
    Re: Trying to do 3D (THIRD TRY) "Chris M. Thomasson" <invalid_chris_thomasson@invalid.invalid> - 2018-05-15 12:48 -0700
      Re: Trying to do 3D (THIRD TRY) bit-naughty@hotmail.com - 2018-05-16 05:29 -0700
    Re: Trying to do 3D (THIRD TRY) bit-naughty@hotmail.com - 2018-05-16 05:27 -0700
      Re: Trying to do 3D (THIRD TRY) "Christoph M. Becker" <cmbecker69@arcor.de> - 2018-05-16 23:31 +0200
        Re: Trying to do 3D (THIRD TRY) bit-naughty@hotmail.com - 2018-05-16 21:11 -0700
          Re: Trying to do 3D (THIRD TRY) "Christoph M. Becker" <cmbecker69@arcor.de> - 2018-05-17 13:35 +0200
    Re: Trying to do 3D (THIRD TRY) bit-naughty@hotmail.com - 2018-05-22 05:57 -0700
      Re: Trying to do 3D (THIRD TRY) "Chris M. Thomasson" <invalid_chris_thomasson@invalid.invalid> - 2018-05-22 13:50 -0700

#35023 — Trying to do 3D (THIRD TRY)

Frombit-naughty@hotmail.com
Date2018-05-13 12:35 -0700
SubjectTrying to do 3D (THIRD TRY)
Message-ID<e6827ca4-d196-4e91-a9de-42a8f76dfbb4@googlegroups.com>
..OK, I just give up. It's past 1 in the morning - all I'm trying to do is spin a a triangle round the y axis in 3D. Here's my code so far, I cleaned it up since last time. Could someone please tell me what's wrong??:



<html>


<head>
<style>

canvas {
	border: 1px solid black;
}
</style>

<script>




window.onload = function() {

	var canvas = document.getElementById("drawingCanvas");
	var context = canvas.getContext("2d");

function drawpoly(twodpoly) {
	
	context.moveTo (twodpoly[0].x,twodpoly[0].y);
	context.lineTo (twodpoly[1].x,twodpoly[1].y);
	context.lineTo (twodpoly[2].x,twodpoly[2].y);
	context.closePath();
	
	
	context.fill();
	
	
}



var threedpoly = [
	{
		x:50,
		y:50,
		z:1
	},
	
	{
		x:150,
		y:250,
		z:1
	},
	
	{
		x:500,
		y:50,
		z:1
	}
];

var twodpoly = [{
	x:0,
	y:0
	},
	
	{
	x:0,
	y:0
	},
	
	{
	x:0,
	y:0
	
}];




function rotatethreedpoly(threedpoly, angle) {

	
	
	for (var i=0; i<2; i++) {
		threedpoly[i].x = (Math.cos(angle) * threedpoly[i].x) - (Math.sin(angle) * threedpoly[i].z) ;
		threedpoly[i].y = threedpoly[i].y ;
		threedpoly[i].z = (Math.sin(angle) * threedpoly[i].x) + (Math.cos(angle) * threedpoly[i].z) ;
		
	}
	

};

	
function perspproject(threedpoly) {


for (var i=0; i<2; i++) {


	twodpoly[i].x = threedpoly[i].x/threedpoly[i].z ;
	twodpoly[i].y = (threedpoly[i].y/threedpoly[i].z) ;

	}		

}

// DRAW SHIT - MAIN LOOP


var i=0.01;

var rad = i * 0.017453293;



for (x=1; x<30; x++) {
	



rotatethreedpoly(threedpoly, rad);

perspproject(threedpoly);

drawpoly(twodpoly);




canvas.width = canvas.width;

}





}





</script>
</head>

<body>
<canvas id = "drawingCanvas" width="500" height="300">
</canvas>
</body>

</html>

[toc] | [next] | [standalone]


#35025

FromLeonardo Campos <leonardoscampos@gmail.com>
Date2018-05-14 22:29 -0700
Message-ID<69141c0f-bc18-4c72-acbd-83c0555f1efb@googlegroups.com>
In reply to#35023
On Sunday, May 13, 2018 at 4:35:40 PM UTC-3, bit-n...@hotmail.com wrote:
> ..OK, I just give up. It's past 1 in the morning - all I'm trying to do is spin a a triangle round the y axis in 3D. Here's my code so far, I cleaned it up since last time. Could someone please tell me what's wrong??:
> 
> 
> 
> <html>
> 
> 
> <head>
> <style>
> 
> canvas {
> 	border: 1px solid black;
> }
> </style>
> 
> <script>
> 
> 
> 
> 
> window.onload = function() {
> 
> 	var canvas = document.getElementById("drawingCanvas");
> 	var context = canvas.getContext("2d");
> 
> function drawpoly(twodpoly) {
> 	
> 	context.moveTo (twodpoly[0].x,twodpoly[0].y);
> 	context.lineTo (twodpoly[1].x,twodpoly[1].y);
> 	context.lineTo (twodpoly[2].x,twodpoly[2].y);
> 	context.closePath();
> 	
> 	
> 	context.fill();
> 	
> 	
> }
> 
> 
> 
> var threedpoly = [
> 	{
> 		x:50,
> 		y:50,
> 		z:1
> 	},
> 	
> 	{
> 		x:150,
> 		y:250,
> 		z:1
> 	},
> 	
> 	{
> 		x:500,
> 		y:50,
> 		z:1
> 	}
> ];
> 
> var twodpoly = [{
> 	x:0,
> 	y:0
> 	},
> 	
> 	{
> 	x:0,
> 	y:0
> 	},
> 	
> 	{
> 	x:0,
> 	y:0
> 	
> }];
> 
> 
> 
> 
> function rotatethreedpoly(threedpoly, angle) {
> 
> 	
> 	
> 	for (var i=0; i<2; i++) {
> 		threedpoly[i].x = (Math.cos(angle) * threedpoly[i].x) - (Math.sin(angle) * threedpoly[i].z) ;
> 		threedpoly[i].y = threedpoly[i].y ;
> 		threedpoly[i].z = (Math.sin(angle) * threedpoly[i].x) + (Math.cos(angle) * threedpoly[i].z) ;
> 		
> 	}
> 	
> 
> };
> 
> 	
> function perspproject(threedpoly) {
> 
> 
> for (var i=0; i<2; i++) {
> 
> 
> 	twodpoly[i].x = threedpoly[i].x/threedpoly[i].z ;
> 	twodpoly[i].y = (threedpoly[i].y/threedpoly[i].z) ;
> 
> 	}		
> 
> }
> 
> // DRAW SHIT - MAIN LOOP
> 
> 
> var i=0.01;
> 
> var rad = i * 0.017453293;
> 
> 
> 
> for (x=1; x<30; x++) {
> 	
> 
> 
> 
> rotatethreedpoly(threedpoly, rad);
> 
> perspproject(threedpoly);
> 
> drawpoly(twodpoly);
> 
> 
> 
> 
> canvas.width = canvas.width;
> 
> }
> 
> 
> 
> 
> 
> }
> 
> 
> 
> 
> 
> </script>
> </head>
> 
> <body>
> <canvas id = "drawingCanvas" width="500" height="300">
> </canvas>
> </body>
> 
> </html>

Take a look at this code.
https://jsfiddle.net/lscoder/rcxd8rrc/

I hope this help.

[toc] | [prev] | [next] | [standalone]


#35026

Frombit-naughty@hotmail.com
Date2018-05-15 08:15 -0700
Message-ID<fe54c69d-a438-46f0-898b-e3fc38b508c0@googlegroups.com>
In reply to#35025
On Tuesday, May 15, 2018 at 10:59:10 AM UTC+5:30, Leonardo Campos wrote:

> Take a look at this code.
> https://jsfiddle.net/lscoder/rcxd8rrc/
> 
> I hope this help.

Bro, thanks a TON for all that - I just spent ANOTHER 2 hours or so experimenting with my code - still not working. In particular, I'm not sure what you're doing here:

function project(point) {
	const [x, y, z] = point;
  const perspective = fl / (fl + z);

  return [x * perspective, y * perspective];
} 


What does the "const [x, y, z] = point;" do? What is z's value after this statement? (I don't know what "const" is, actually...)

Just for simplicity's sake, I was trying without any focal length, in which case it's just a division by z, am I right? Is my code here correct?:



function perspproject(threedpoly) {


for (var i=0; i<3; i++) {


	twodpoly[i].x = (threedpoly[i].x/threedpoly[i].z) ;
	twodpoly[i].y = (threedpoly[i].y/threedpoly[i].z) ;

	}		

}


Also, how do you prevent the division by zero above, if z happens to be zero, ie. the triangle is sitting on the x axis?


Thanks once again for your help.

[toc] | [prev] | [next] | [standalone]


#35029

FromLeonardo Campos <leonardoscampos@gmail.com>
Date2018-05-15 18:10 -0700
Message-ID<3127f11b-97a0-4cba-b3fe-75f78f2f2f55@googlegroups.com>
In reply to#35026
On Tuesday, May 15, 2018 at 12:16:04 PM UTC-3, bit-n...@hotmail.com wrote:
> On Tuesday, May 15, 2018 at 10:59:10 AM UTC+5:30, Leonardo Campos wrote:
> 
> > Take a look at this code.
> > https://jsfiddle.net/lscoder/rcxd8rrc/
> > 
> > I hope this help.
> 
> Bro, thanks a TON for all that - I just spent ANOTHER 2 hours or so experimenting with my code - still not working. In particular, I'm not sure what you're doing here:
> 
> function project(point) {
> 	const [x, y, z] = point;
>   const perspective = fl / (fl + z);
> 
>   return [x * perspective, y * perspective];
> } 
> 
> 
> What does the "const [x, y, z] = point;" do? What is z's value after this statement? (I don't know what "const" is, actually...)
> 

This is called "Destructuring assignment" and can be replaced by:
const x = point[0];
const y = point[1];
const z = point[2];

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

And "const" means I'll not be able to change x, y and z values (it's constant);

const x = 123;
x = 456; // error
x++; // error

"const" and "let" replaced the old "var" (ES6)
https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/

> Just for simplicity's sake, I was trying without any focal length, in which case it's just a division by z, am I right? Is my code here correct?:
> 

Well... I've started studying more 3D in the last months (I'm not an expert) but it seems that when you rotate a triangle without using a focal length one point of its base will always be behind the "camera" and the other one will be in front of the "camera" and that's not gonna work (you should "clip" the triangle before drawing it). Try changing the Z value on that example that I sent you to something bigger then 500 (focal length). You're gonna break it! Z equals to 501 means the triangle will rotate from 501 (ok) to z=-501 (issue) in the z-axis.

const triangle = [
  [-70, -50, 501],
  [70, -50, 501],
  [0, 50, 501]
];

> 
> function perspproject(threedpoly) {
> 
> 
> for (var i=0; i<3; i++) {
> 
> 
> 	twodpoly[i].x = (threedpoly[i].x/threedpoly[i].z) ;
> 	twodpoly[i].y = (threedpoly[i].y/threedpoly[i].z) ;
> 
> 	}		
> 
> }
> 
> 
> Also, how do you prevent the division by zero above, if z happens to be zero, ie. the triangle is sitting on the x axis?
> 

I'm gonna get an error only when "fl" and "z" are equal to zero because I'm dividing by (fl + z). Because fl is 500 that will happen only when Z is equal to -500 and this will break my code. That's when a point and the "camera" are at the same place. I don't know how to fix this issue using this projection but I'm almost sure that will not happen when you start working with clip-space.

PS: Currently I'm working with orthogonal projection only (medical images).

> 
> Thanks once again for your help.


Leonardo Campos

[toc] | [prev] | [next] | [standalone]


#35030

Frombit-naughty@hotmail.com
Date2018-05-16 05:23 -0700
Message-ID<5454278d-228b-4844-a26c-9cf0afd0fa92@googlegroups.com>
In reply to#35029
Leonardo, thanks once again - could you please take a look at this and see where I'm screwing up? It's STILL not working, and I've just about changed ALL of my code to look like yours....I'd be really obliged if you did: (now, just NOTHING shows up on the screen!!) (btw, what does "requestAnimationFrame" do?)


<html>


<head>
<style>

canvas {
	border: 1px solid black;
}
</style>

<script>




window.onload = function() {

	var canvas = document.getElementById("drawingCanvas");
	var context = canvas.getContext("2d");

var width = canvas.width;
var height = canvas.height;

context.setTransform(1, 0, 0, -1, width / 2, height / 2);


var fl=2;


function drawpoly(twodpoly) {
	
	context.moveTo (twodpoly[0].x,twodpoly[0].y);
	
	
	context.lineTo (twodpoly[1].x,twodpoly[1].y);
	
	
	context.lineTo (twodpoly[2].x,twodpoly[2].y);
	context.closePath();
	
	
	context.fill();
	
	
}



var threedpoly = [
	{
		x:-70,
		y:-50,
		z:0
	},
	
	{
		x:70,
		y:-50,
		z:0
	},
	
	{
		x:0,
		y:50,
		z:0
	}
];

var twodpoly = [

	{
	x:100,
	y:0
	},
	
	{
	x:0,
	y:100
	},
	
	{
	x:-100,
	y:0
	}

]



function rotatethreedpoly(inthreedpoly, angle) {

	
	
for (i=0; i<3; i++) {
		(threedpoly[i].x) = (Math.cos(angle) * inthreedpoly[i].x) - (Math.sin(angle) * inthreedpoly[i].z) ;
//		threedpoly[i].y = threedpoly[i].y ;
		(threedpoly[i].z) = (Math.sin(angle) * inthreedpoly[i].x) + (Math.cos(angle) * inthreedpoly[i].z) ;
		
	}
	

}

	
function perspproject(inthreedpoly) {


for (g=0; g<3; g++) {


	twodpoly[g].x = ((fl*inthreedpoly[g].x)/inthreedpoly[g].z) ;
	twodpoly[g].y = ((fl*inthreedpoly[g].y)/inthreedpoly[g].z) ;

	}		

}

// DRAW SHIT - MAIN LOOP



var ang=0.01;

var rad = ang * 0.017453293;



function loop() {


	// Don't forget the viewport is translated (width/2, height/2)
  context.clearRect(-width / 2, -height / 2, width, height);
  
  



  rotatethreedpoly(threedpoly, rad);
  perspproject(threedpoly);


drawpoly(twodpoly);


  
 window.requestAnimationFrame(loop);
}

loop();


}





</script>
</head>

<body>
<canvas id = "drawingCanvas" width="500" height="300">
</canvas>
</body>

</html>

[toc] | [prev] | [next] | [standalone]


#35035

FromLeonardo Campos <leonardoscampos@gmail.com>
Date2018-05-16 21:38 -0700
Message-ID<66c9d254-df54-4939-ad4b-416a90ee0908@googlegroups.com>
In reply to#35030
On Wednesday, May 16, 2018 at 9:23:21 AM UTC-3, bit-n...@hotmail.com wrote:
> Leonardo, thanks once again - could you please take a look at this and see where I'm screwing up? It's STILL not working, and I've just about changed ALL of my code to look like yours....I'd be really obliged if you did: (now, just NOTHING shows up on the screen!!) (btw, what does "requestAnimationFrame" do?)
> 
> 
> <html>
> 
> 
> <head>
> <style>
> 
> canvas {
> 	border: 1px solid black;
> }
> </style>
> 
> <script>
> 
> 
> 
> 
> window.onload = function() {
> 
> 	var canvas = document.getElementById("drawingCanvas");
> 	var context = canvas.getContext("2d");
> 
> var width = canvas.width;
> var height = canvas.height;
> 
> context.setTransform(1, 0, 0, -1, width / 2, height / 2);
> 
> 
> var fl=2;
> 
> 
> function drawpoly(twodpoly) {
> 	
> 	context.moveTo (twodpoly[0].x,twodpoly[0].y);
> 	
> 	
> 	context.lineTo (twodpoly[1].x,twodpoly[1].y);
> 	
> 	
> 	context.lineTo (twodpoly[2].x,twodpoly[2].y);
> 	context.closePath();
> 	
> 	
> 	context.fill();
> 	
> 	
> }
> 
> 
> 
> var threedpoly = [
> 	{
> 		x:-70,
> 		y:-50,
> 		z:0
> 	},
> 	
> 	{
> 		x:70,
> 		y:-50,
> 		z:0
> 	},
> 	
> 	{
> 		x:0,
> 		y:50,
> 		z:0
> 	}
> ];
> 
> var twodpoly = [
> 
> 	{
> 	x:100,
> 	y:0
> 	},
> 	
> 	{
> 	x:0,
> 	y:100
> 	},
> 	
> 	{
> 	x:-100,
> 	y:0
> 	}
> 
> ]
> 
> 
> 
> function rotatethreedpoly(inthreedpoly, angle) {
> 
> 	
> 	
> for (i=0; i<3; i++) {
> 		(threedpoly[i].x) = (Math.cos(angle) * inthreedpoly[i].x) - (Math.sin(angle) * inthreedpoly[i].z) ;
> //		threedpoly[i].y = threedpoly[i].y ;
> 		(threedpoly[i].z) = (Math.sin(angle) * inthreedpoly[i].x) + (Math.cos(angle) * inthreedpoly[i].z) ;
> 		
> 	}
> 	
> 
> }
> 
> 	
> function perspproject(inthreedpoly) {
> 
> 
> for (g=0; g<3; g++) {
> 
> 
> 	twodpoly[g].x = ((fl*inthreedpoly[g].x)/inthreedpoly[g].z) ;
> 	twodpoly[g].y = ((fl*inthreedpoly[g].y)/inthreedpoly[g].z) ;
> 
> 	}		
> 
> }
> 
> // DRAW SHIT - MAIN LOOP
> 
> 
> 
> var ang=0.01;
> 
> var rad = ang * 0.017453293;
> 
> 
> 
> function loop() {
> 
> 
> 	// Don't forget the viewport is translated (width/2, height/2)
>   context.clearRect(-width / 2, -height / 2, width, height);
>   
>   
> 
> 
> 
>   rotatethreedpoly(threedpoly, rad);
>   perspproject(threedpoly);
> 
> 
> drawpoly(twodpoly);
> 
> 
>   
>  window.requestAnimationFrame(loop);
> }
> 
> loop();
> 
> 
> }
> 
> 
> 
> 
> 
> </script>
> </head>
> 
> <body>
> <canvas id = "drawingCanvas" width="500" height="300">
> </canvas>
> </body>
> 
> </html>

I've updated your code and you can see it here:
https://jsfiddle.net/lscoder/Lxeuhg05/

1. You were updating X and using the new X to update Z instead of using the old X.
2. I changed the perspective to use FL
3. You forgot to call "beginPath" before drawing the triangle
4. You should use requestAnimationFrame to get it running at 60fps. A simple FOR loop would never work because it will run in a few ms. The only thing you would see on the screen would be the last image rendered instead of the entire animation.
5. Don't clear a canvas with "canvas.width = canvas.width". That's not the right way and it also resets the canvas state (incl. its transform matrix)

Watch this video to understand about event loops:
SmashingConf London — Jake Archibald on ‘The Event Loop’ - https://vimeo.com/254947206

Leonardo Campos

[toc] | [prev] | [next] | [standalone]


#35037

Frombit-naughty@hotmail.com
Date2018-05-16 23:18 -0700
Message-ID<30f5f2cb-1a9d-4c33-960e-c922c3ed8818@googlegroups.com>
In reply to#35035
On Thursday, May 17, 2018 at 10:08:20 AM UTC+5:30, Leonardo Campos wrote:
Wow! Thanks sooo much for your help, man!! :)

> 2. I changed the perspective to use FL

Sorry, I'm still not getting what you're doing here:


const perspective = fl / (fl + threedpoly[i].z);

    twodpoly[i].x = threedpoly[i].x * perspective;
    twodpoly[i].y = threedpoly[i].y * perspective;



I was using this Wikipedia page:
https://en.wikipedia.org/wiki/3D_projection#Weak_perspective_projection 

Right at the bottom, where it says "Diagram"..... the formula's given as:

Bx = Ax * (Bz/Az)

, there's no mention of a "fl + something" in the denominator....?



> 3. You forgot to call "beginPath" before drawing the triangle
> 4. You should use requestAnimationFrame to get it running at 60fps.

OK, these were new to me.



Thanks once again, bro :)

[toc] | [prev] | [next] | [standalone]


#35038

Frombit-naughty@hotmail.com
Date2018-05-16 23:47 -0700
Message-ID<04ab8154-34f4-4a08-ae08-84f1d4f6e061@googlegroups.com>
In reply to#35037
..Oh, and btw, where did you get the "Math.PI / 100;" from? Why this value?

[toc] | [prev] | [next] | [standalone]


#35040

FromLeonardo Campos <leonardoscampos@gmail.com>
Date2018-05-17 01:03 -0700
Message-ID<433a9645-3d76-423e-bf0e-bf5d7a5108e7@googlegroups.com>
In reply to#35038
On Thursday, May 17, 2018 at 3:47:31 AM UTC-3, bit-n...@hotmail.com wrote:
> ..Oh, and btw, where did you get the "Math.PI / 100;" from? Why this value?

I tried Math.PI/50, Math.PI/70 and Math.PI/100 to get a better rotation speed and I liked that one. Play with it and you'll see what happens.

Math.PI = 180 degrees => 180 / 100 = 1.8 degrees.
It runs at 60fps => 60 * 1.8 = 108 degrees per second.
And it takes 3.33 seconds to rotate 360 degrees (360 degrees / 108 degrees/sec).

[toc] | [prev] | [next] | [standalone]


#35039

FromLeonardo Campos <leonardoscampos@gmail.com>
Date2018-05-17 00:56 -0700
Message-ID<1b196040-1182-42cc-b553-7739e4f2d3e5@googlegroups.com>
In reply to#35037
On Thursday, May 17, 2018 at 3:18:13 AM UTC-3, bit-n...@hotmail.com wrote:
> On Thursday, May 17, 2018 at 10:08:20 AM UTC+5:30, Leonardo Campos wrote:
> Wow! Thanks sooo much for your help, man!! :)
> 
> > 2. I changed the perspective to use FL
> 
> Sorry, I'm still not getting what you're doing here:
> 
> 
> const perspective = fl / (fl + threedpoly[i].z);
> 
>     twodpoly[i].x = threedpoly[i].x * perspective;
>     twodpoly[i].y = threedpoly[i].y * perspective;
> 

Watch https://www.youtube.com/watch?v=MGj7fnQdpE4#t=5m26s

> 
> I was using this Wikipedia page:
> https://en.wikipedia.org/wiki/3D_projection#Weak_perspective_projection 
> 
> Right at the bottom, where it says "Diagram"..... the formula's given as:
> 
> Bx = Ax * (Bz/Az)
> 
> , there's no mention of a "fl + something" in the denominator....?
> 
> 
> 
> > 3. You forgot to call "beginPath" before drawing the triangle
> > 4. You should use requestAnimationFrame to get it running at 60fps.
> 
> OK, these were new to me.
> 
> 
> 
> Thanks once again, bro :)

[toc] | [prev] | [next] | [standalone]


#35027

Frombit-naughty@hotmail.com
Date2018-05-15 10:48 -0700
Message-ID<0d29b6b1-d84c-4aea-8014-9c2faab088fd@googlegroups.com>
In reply to#35023
Btw, I *can* tamper with threedpoly and twodpoly from inside a function, right? They're global variables, right....?

[toc] | [prev] | [next] | [standalone]


#35028

From"Chris M. Thomasson" <invalid_chris_thomasson@invalid.invalid>
Date2018-05-15 12:48 -0700
Message-ID<pdfdii$2vc$1@dont-email.me>
In reply to#35023
On 5/13/2018 12:35 PM, bit-naughty@hotmail.com wrote:
> ..OK, I just give up. It's past 1 in the morning - all I'm trying to do is spin a a triangle round the y axis in 3D. Here's my code so far, I cleaned it up since last time. Could someone please tell me what's wrong??:

[..snip code...]

Fwiw, the following information just might be of service to you:

http://machinethink.net/blog/3d-rendering-without-shaders

?

[toc] | [prev] | [next] | [standalone]


#35032

Frombit-naughty@hotmail.com
Date2018-05-16 05:29 -0700
Message-ID<e8c75187-2722-4bca-a63a-c0c03eb934fb@googlegroups.com>
In reply to#35028
On Wednesday, May 16, 2018 at 1:18:41 AM UTC+5:30, Chris M. Thomasson wrote:
 
> Fwiw, the following information just might be of service to you:
> 
> http://machinethink.net/blog/3d-rendering-without-shaders
> 
> ?


Hey - thanks, I took a quick look, but I've got an old Michael Abrash book which has just about the same stuff in it (he's the guy who worked on Quake together with John Carmack....). I've still saved it to my HD though :) Thanx :)

[toc] | [prev] | [next] | [standalone]


#35031

Frombit-naughty@hotmail.com
Date2018-05-16 05:27 -0700
Message-ID<ffa518a0-846f-4b94-a03a-f5d84e83e337@googlegroups.com>
In reply to#35023
Also, another question:
If I have a global var, "threedpoly", and there is code like this:



function rotatethreedpoly(threedpoly, angle) {
	
	
	for (i=0; i<3; i++) {
		(threedpoly[i].x) = (Math.cos(angle) * threedpoly[i].x) - (Math.sin(angle) * threedpoly[i].z) ;
//		threedpoly[i].y = threedpoly[i].y ;
		(threedpoly[i].z) = (Math.sin(angle) * threedpoly[i].x) + (Math.cos(angle) * threedpoly[i].z) ;
		
	}
	



, the "threedpoly" that's being referenced on the left hand side - that WILL update the global var "threedpoly", right? Cause that's also what my function argument is called - that's not good, is it? Funny things'll happen, right...? Or won't they...?

[toc] | [prev] | [next] | [standalone]


#35033

From"Christoph M. Becker" <cmbecker69@arcor.de>
Date2018-05-16 23:31 +0200
Message-ID<pdi807$62n$1@solani.org>
In reply to#35031
On 16.05.2018 at 14:27, bit-naughty@hotmail.com wrote:

> If I have a global var, "threedpoly", and there is code like this:
> 
> function rotatethreedpoly(threedpoly, angle) {
> 	
> 	
> 	for (i=0; i<3; i++) {
> 		(threedpoly[i].x) = (Math.cos(angle) * threedpoly[i].x) - (Math.sin(angle) * threedpoly[i].z) ;
> //		threedpoly[i].y = threedpoly[i].y ;
> 		(threedpoly[i].z) = (Math.sin(angle) * threedpoly[i].x) + (Math.cos(angle) * threedpoly[i].z) ;
> 		
> 	}
> 	
> 
> 
> 
> , the "threedpoly" that's being referenced on the left hand side - that WILL update the global var "threedpoly", right? Cause that's also what my function argument is called - that's not good, is it? Funny things'll happen, right...? Or won't they...?

Q: “I don't know how to use a screw driver, but surely I can build that
rocket!”

A: “Learn to use the screw driver first.”

HTH :)

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]


#35034

Frombit-naughty@hotmail.com
Date2018-05-16 21:11 -0700
Message-ID<04f7e837-48a6-4ed2-bd77-e1fbe8ccd72e@googlegroups.com>
In reply to#35033
On Thursday, May 17, 2018 at 3:02:00 AM UTC+5:30, Christoph M. Becker wrote:
> 
> Q: “I don't know how to use a screw driver, but surely I can build that
> rocket!”
> 
> A: “Learn to use the screw driver first.”
> 
> HTH :)
> 
> -- 
> Christoph M. Becker

Yeah, I'll learn how to use the screw driver VIA building the rocket,.....no?

[toc] | [prev] | [next] | [standalone]


#35043

From"Christoph M. Becker" <cmbecker69@arcor.de>
Date2018-05-17 13:35 +0200
Message-ID<pdjpem$4b0$1@solani.org>
In reply to#35034
On 17.05.2018 at 06:11, bit-naughty@hotmail.com wrote:

> On Thursday, May 17, 2018 at 3:02:00 AM UTC+5:30, Christoph M. Becker wrote:
>>
>> Q: “I don't know how to use a screw driver, but surely I can build that
>> rocket!”
>>
>> A: “Learn to use the screw driver first.”
>>
>> HTH :)
> 
> Yeah, I'll learn how to use the screw driver VIA building the rocket,.....no?

That may get expensive.

I strongly suggest to grasp the concept of (variable) scope before going
on.  <https://en.wikipedia.org/wiki/Scope_(computer_science)#JavaScript>
may serve as an introduction.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]


#35097

Frombit-naughty@hotmail.com
Date2018-05-22 05:57 -0700
Message-ID<a50531d2-ce64-4d6c-b878-c6629296931b@googlegroups.com>
In reply to#35023
OK, I saw some of the video - it's still not explaining where he GOT that perspective projection formula from....in fact the first comment on the video says that....


Do you think Wikipedia got it wrong then?

[toc] | [prev] | [next] | [standalone]


#35099

From"Chris M. Thomasson" <invalid_chris_thomasson@invalid.invalid>
Date2018-05-22 13:50 -0700
Message-ID<pe1vq0$ni$1@dont-email.me>
In reply to#35097
On 5/22/2018 5:57 AM, bit-naughty@hotmail.com wrote:
> OK, I saw some of the video - it's still not explaining where he GOT that perspective projection formula from....in fact the first comment on the video says that....
> 
> 
> Do you think Wikipedia got it wrong then?
> 

Fwiw, one can take a look at glm's source code:

https://glm.g-truc.net/0.9.4/api/index.html

;^)

[toc] | [prev] | [standalone]


Back to top | Article view | comp.lang.javascript


csiph-web