continued_at_new_forum The Wingnut Chronicles

[Wingnut]

Hi girls!  Last night, I got demented again.  After talking about lighting and normals and mesh faces with buddy Bob, he found a link to this thread... http://www.html5gamedevs.com/topic/2217-double-sided-normals/#entry14901 .  Yep, this is the secret behind my lack of spotlight shine on the back face of planes.  Interesting.

 

So, Wingnut thought about...

 

Mesh.CreateWall(name, outsideWidth, outsideHeight, insideWidth, insideHeight, gap, scene, updateable);

 

Although similar 2-sided walls can be made by scaling a Mesh.CreateBox, it is not easy to texture ONLY two sides of that standard box.  It might be easier to texture 2 planes of a box made from 6 planes.  To reword, a user likely wants a texture on the inside wall, and a texture on the outside wall, but no need for texture on the end-caps and top/bottom caps of the wall.  (4 planes are used as 'caps').  My new CreateWall will produce a wall that has wall.nx, wall.px, wall.ny, wall.py, wall.nz, wall.pz.  Each of those can have a StandardMaterial, so the user will have full choice of which planes to texture, and which to not texture.

 

So, today, I am building planes.  (No, not the kind of plane that Lindbergh landed at Le Bourget Field.)  I started by referencing my own goofy forum post here... http://www.html5gamedevs.com/topic/4530-create-a-mesh-from-a-list-of-vertices-and-faces/#entry30755 .

 

There was a time when the data in the positions array (plotting data) would make me confused.  But if you imagine each line as a Vector3(-size, -size, 0)... then it becomes easier.

 

I needed a plane to use as the outside plane of my new CreateWall() constructor. And I needed its front face to aim outward, in the opposite direction of my inside wall. I discovered something very fascinating when I was building my plane.  I will try to show you with code:

	BABYLON.Wall.prototype.makeplane = function () {		var hpw = this.owidth/2;		var hph = this.oheight/2;		var plane = new BABYLON.Mesh("plane", this.scene);/*		// counter-clockwise plotting - front face is +z		var positions = [  			-hpw, -hph, 0,  			-hpw, hph, 0,  			hpw, hph, 0,  			hpw, -hph, 0		];*/		// clockwise plotting - front face is -z		var positions = [  			hpw, -hph, 0,  			hpw, hph, 0,  			-hpw, hph, 0,  			-hpw, -hph, 0		];...

owidth is outside wall width, oheight is its height, hpw is half plane width, hph is half plane height, etc.  The fascinating part is the clockwise vs. counter-clockwise.  Plot the positions clockwise, and the normals/frontface are in ONE direction. Plot the positions counter-clockwise, and the normals/frontface are in the opposite direction!  Isn't that cool?  ahhh, fun with babylon.js plane-making!

 

What's the big picture, you ask?  Well, I'm going to make a propeller.  Likely 6-bladed.  I am going to make the propeller blades with my new CreateWall constructor... so I get two-sided normals.  Then I am going to place the propeller (sideways) into the light testing box from the previous fun.

 

Then I am going to spin the propeller, and shine one light from the left side of it, and another light from the right side.  FUN!!!  Then I am going to turn on two ShadowGenerators (one for each light)... so I can see the propeller blade shadows against the walls.  Then I am going to MirrorTexture the walls WHILE the shadowGenerators are still running... but I'm going to alpha (transparent) the wall.diffuseTexture/MirrorTexture a small amount... so the shadows can be seen, still. 

 

Its going to get REAL UGLY and FUN!!  Look out!  Demos coming!  Mad scientist on the loose!    Be good!

 

ps - off-topic: The Big Blower drove down Wingnut's street today: http://urbanproductions.com/wingy/bigblower.jpg  Now THAT is a particle emitter!

[Wingnut]

Hi again, friends!  Did you miss me?  (yeah, right)

   Here... is Wally1 ... http://urbanproductions.com/wingy/babylon/walls/wally1.htm  (wally1.zip is there too)

 

In this goofy thing, we have completed our first version of wall http://urbanproductions.com/wingy/babylon/walls/js/wall01.js  It likely has mistakes, but I'll work on it more. Take it, use it, abuse it, improve it, its free for all to use in any way you like.  Tell us of your discoveries.

 

In the demo above, we have a wall, slowly rotating.  Its big -z and +z faces are green, its -x and +x caps are red, and its -y and +y caps are blue.  The big work box is 100 x 100 x 100, the cam is looking mostly +z and a directional light is at .position -50, -50, -50 (near lower left corner).  The directional light .direction is aiming at 50, 50, 50 (far upper right corner) (where the shadow is). 

 

I think I have all the normals on the rotating wall... pointed outward, though I am still learning about normals. 

 

I was somewhat disappointed to see that spotlights don't make shadows, apparently.  Apparently, pointlights do not make shadows, either.  (I could be wrong.)  No mention of which types of lights to use... in the current shadows tutorial. 

 

For those who are thinking about holes in walls for doors and windows, you might want to look at babylon.js CSG (constructive solid geometry) system, which surely has boolean subtraction power.  CSG is brand new for babylon.js.  http://www.html5gamedevs.com/topic/4427-csg-in-babylon/  We want to send a huge THANKS to Feldspar for kindly donating his excellent libraries!!!  They are still being tested, and demos are still in the works, but it looks to be a VERY promising and welcomed addition to babylon.js systems. 

 

Also, thanks to the Sokrate team for mapping the new CSG api SO QUICKLY!  The Sokrate team is definitely HOT HOT HOT, baby!  Code on!

[Wingnut]

What's that?  You want yet ANOTHER stupid demo?  Fine.  http://urbanproductions.com/wingy/babylon/polygun/polygun01.htm .  Yep, we left lights and walls for a moment, and wandered into the beginnings of "Artillery Duel" (see earlier posts).  Here we have the physics engine turned-on, and we are applyImpulse-ing a polygon into the air.  Polygon Gun... Poly-Gun?  With me?  FUN!! 

 

I think it is an adorable name, personally.    A mesh cannon!

 

Oh, you say that I should turn-off the physics engine, and just learn to fly tumbling polygons the old fashioned way, with Math.Sin and Math.Cos?  Well get real, Clyde!  I let cannon.js do the parabolic tumbling mesh-flying, and the propulsion system.  Easy!  This cannon is currently locked to fire 5 units of force northward, 5 units eastward, and 17 units upward. 

	var cntptvec = cb1.position;	cntptvec.x -= .5;	cntptvec.y -= .5;	cntptvec.z -= .5;	var forcevec = new BABYLON.Vector3(5, 17, 5);

The cannonball (cb1) is 1.4 units wide, and as you can see, I moved my point of contact a half-unit left, back, and down.  (Don't ask me why.  Maybe it helps the box tumble.)  The cannonball is now "armed".  Next step, press fire!

cb1.applyImpulse(forcevec, cntptvec);

POOM!   I still have some "box going through floor" problems (Firefox only).  No zip this time.  A better version coming soon.  Impulse On!

[Wingnut]

Hi kids!  I have been working hard on custodianship of the forum lately (without being anywhere near qualified to do that), tweaking tutorial #6, and playing with planes and lights.  No fun demos to present, but I have turned-on some rather significant keyframe animations, and boy, are they fun!  I came across the need for ANIMATIONTYPE_COLOR3, though.  I wonder if that is possible.  *shrug*  Instead I built 3 separate float animators for discrete r,g,b colors... like this:

var anim3 = new BABYLON.Animation("ani3", "material.diffuseColor.r", 20,     BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);var anim4 = new BABYLON.Animation("ani4", "material.diffuseColor.g", 20,      BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);var anim5 = new BABYLON.Animation("ani5", "material.diffuseColor.b", 20,      BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

Animating material properties.  It works! 

 

Then I thought about... "What if StandardMaterial had an .animations[] array?"  What then?  Scary!  Demented!

 

How about... ANIMATIONTYPE_ARRAYOFTEXTUREURLS ?  Oh my goodness.  That would probably be easier done via incrementing/decrementing an index into an array of texture urls and then setting material.diffuseTexture = arrayOfUrls[index]... inside the render loop.  *nod*  Texture page-flipping. Fun!

 

Cameras and lights allow keyframe animation, too!  How cool is that?  And look at that mysterious BABYLON.Animation.animate() method, with those interesting args/parameters.  I wonder what that is used for. Mad scientist experiments, I bet.

 

BABYLON.Animation sure is an interesting class with a dump truck full of power... and its easy.  It's a mad scientist's dream come true.  See ya there!

[Wingnut]

Hi gang!  Another demo?  Okay.  This time I am back at work in my light testing box.  Doing what?  Testing lights.  I also brought along that RGB color animator from my previous post.  I put that 'color sweeper' on a plane, and hit it with a tiny amount of hemispheric light and a substantial amount of spotlight.  Have a look.  http://urbanproductions.com/wingy/babylon/lights/lightplay6.htm (zip is there too).

 

So you think that the light is animated in some way?  You think I am animating spotlight.exponent or spotlight.angle or spotlight.intensity?  Well wrong-o, deer breath.    The only animation happening in this demo... is a ping-pong (LOOPMODE_CYCLE) color-sweep between Color3(1,0,0) and Color3(0,1,0) ... on the plane.

 

But yes, it sure appears like there is animation on the light.  This shows that the 'saturation' levels on a material.diffuseColor ... has a fun and interesting relationship... with spotlight hot-spots.

 

So far, in my experiments, I have found the babylon.js spotlight to be very powerful and bright, and its .intensity seems to do very little to 'dim' the light.  Have others noticed this?  Once you turn-on a spotlight, its difficult to get that thing under control! 

 

Anyway, I think this demo is fun, interesting, and pretty.  Shine on! (harvest moon?)

[GameMonetize]

Humm.. I should add a Color3 interpolator right ?

[GameMonetize]

Roadmap updated ^^

[Wingnut]

Hi, fellow babylonians!  (and thanks for the future toy, dk!)

 

    Here we go with yet another demo.  (The zipped version is there, too).  This is Wally3, from Uncle Wingnut's world famous 'Adventures in Wall Making' series.    This is early work in plotting a wall with a window hole in it.  All the vertices are currently hard-plotted (but you can change them to variables easily), and I have only 6 indices connected so far.  This is a flat-shaded mesh with a pair of point lights (needed for flat shading), and a tiny amount of hemispheric light.  All the fun takes place in the JS file called wallplot01.js.  This is a 16 point wall, and it's a whole lot of fun and learning about mesh plotting.

 

This originally started as a Gmax/3DMax slightly-extruded rectangular spline.  Then I used the 'Boolean' choice in the Compound Objects section... to create the window hole.  Next, I saved it as an ASE file (an ascii format).  I adjusted that small file, pasted it into a plane-making function, adjusted some more, and that is how I attained the 16 basic vertex coordinates.  Holey Wall, Batman!

 

If you want to experiment with plotting your own meshes... in a super-friendly test area, then this is definitely worth downloading the zip. I have had nothing but fun... playing with this demo... learning about plotting directions, indexing directions, backfaces and frontfaces, per-vertex coloring, normals, you name it.  Plot on!

 

ps: Aren't you glad that Wingnut finally learned how to make links that don't include the entire URL?  Me too!  Just highlight the text you want to be the link, before you hit the link button.  Simple. Thanks for showing me that, gryff!

[Wingnut]

Alright, babylon.js 1.10.0 has been released!  YAY!  Thanks deltakosh!  Thanks to the contributors, too.  Wow, nice added features, and lots of them!  DK, you and the other contributors have been working like crazy!  Excellent!

 

Clouds.  Cool.  Shader code right in the main page, and then abuse it like a mad man in clouds.js.  Sweet.  I think that demo can run offline, too, without hassles from XHR object.  Look out!  I am SURE I can blow up my monitor by doing mad scientist activity on that demo.   I have wanted to have an easy shader experimenting system for a long time... and there it is.  YAY!

[Wingnut]

Hi

 

@deltakosh/codebase maintainers:  BJS 1.10.0 - BABYLON.VertexData.prototype.applyToMesh

 

Should that also have...

 

if (this.colors) {
     mesh.setVerticesData(this.colors, BABYLON.VertexBuffer.ColorKind, updatable);
}

 

??  One would think so, IF applyToMesh is a user-callable method.  *shrug*  (thx)

 

Oh, you want another stupid demo, readers?  Well, the retarded wallpaper lady was here, again, today.  She left a zipped version laying on the coffee table, too.    Don't try to adjust your cameras, its a wall, not a floor. Front face aiming -z, ya know?  Treating a vertical grid like a floor and trying to fly the camera across it like it were a chunk of farm land... will quickly show you bad flight-sim banking.  It's wall paper, not carpeting.  Pft. 

[GameMonetize]

I added colors to applyToMesh

[Wingnut]

Hi dk, thank you for the modification, and I hope you're well!

 

Speaking of colorkind:

 

ground.setVerticesData(colors, BABYLON.VertexBuffer.ColorKind);

 

Huh?  Well, I was setting up a fresh scene today... and I was going to start torturing cameras... to make sure that I had good knowledge to improve tutorial #5.  But, as you all know, I have been playing with mesh plotting (in a modified createPlane function).  Now, most of you don't know this about me, but I am a color junkie (a color addict).  The more colors, the better, on anything.  And I have been setting 'colorkind' data on the planes that I have been experimenting with, lately, so I am in a coloring mood, I guess.  But in the planes experiments, I plotted my own mesh and then added colors.

 

Today, I needed to make a 'ground', so I made one, and I aimed my freeCamera at it, and all was fine... but, then I thought... "I wonder if I can set per-vertex 'colorkind' on a plane that I did not plot myself... like this ground on my screen."

 

First, I set it to wireframe so I could see how many vertices it had.  25.  So then, I knew I needed 3 values for each color [r, g, b], and then I built a simple FOR-NEXT loop, and put a Math.random() inside it, and I pushed 75 random numbers into a colors[] array.  Then, just after I created my ground, I used that colorkind line from earlier in this post... and poom, I got a pile of pretty colors on my no-diffuseColor ground plane.  Cooooool!

 

Well, of course, I could not stop there.  I needed animation... in order to be a real demented 'mad scientist'.  So, it all got ugly from there, and, well, check out the demo!  There is a zipped version nearby, too. Watch it for some time.  It toggles wireframe on and off.

 

I am never going to get any real work done... if I keep playing like this.  But I sure do enjoy it.  I had to use a strange method to apply new colorkind to an already-made ground, though.  It seems that...  when I do...

 

ground = scene.getMeshByName("ground") ... and then try to apply new colorkind data to it, my console reports...

 

Error: WebGL: drawElements: no VBO bound to enabled vertex attrib index 0!

 

So, I made the ground mesh global, and then inside the animation loop, I did ground.dispose(), and then created a new ground mesh, and applied new random colorkind.  It makes for a 'stuttery' animation, and I am still studying why mesh retrieved with scene.getMeshByName... no longer has a VBO to poke colorkind into.  Learning, learning, learning... and having too much fun doing it!  Color on!

[Wingnut]

Attention all geniuses:

 

I have a dream.  It is a big dream, too big for me.

 

Earlier in this thread... I showed everyone a Spherical Harmonics demo... one which I love.  It uses a complicated JS library called ToxiclibsJS, along with added support for ThreeJS.  Toxiclibs produces a mesh, but some conversion is needed for it to render in ThreeJS.  This spherical harmonics thing... is how I make my forum icons.  It makes very beautiful primitive objects.

 

I started working on a babylon.js version... but it is very difficult.  Would someone like to try to finish it?

 

Here is the demo.  (slow loading) (control-mousewheel for sizing)  Here is the zip.

 

It currently runs on ThreeJS, included in the zip.  Toxiclibs2.js is also in the zip.  So is BJS-110 and Hand-137.

 

I named the toxiclibs2 file, because I removed the threeJS support functions from the standard toxiclibs file, and put them in the sh6.html.  All those ThreeJS 'support' functions... are on a small object in the html... named 'sup'.  Inside the html, you will easily see the 'sup' object.  It has very few functions.

 

All that needs to be done, is to make a 'sup' object for babylon.js.  Maybe impossible at this time.  Maybe not.  Just replace the methods on the 'sup' object... with babylon.js-ready methods... and we will have a babylon.js version of Spherical Harmonics. 

 

If anyone can complete this project, and make a 'sup' object for babylon.js, and produce the same beautiful results, then I will forever worship the water you walk-on.    Harmonize on!

[Wingnut]

Hi gang!

   Well, I have begun work on learning everything I can about babylon.js cameras.  This is so I can possibly add-to our Basic Series tutorial #5... flesh-it-out to some degree.  I am just beginning my adventures, but I have found a unique 'thing' about camera.fov (field of view).  That property is Math.PI related.  I guess that is not so unexpected, but I still find it fascinating.

 

Here is a demo where I animate an ArcRotateCamera .fov property... starting at 0, and incrementing upward forever.  Watch what happens to the scene as the number nears 3.14 and 6.28, etc.  The zipped version is available, too.  Pardon the messy code in my 'camera workshop'.  It is a workshop... and workshops are always messy when work (play) is happening inside.    I hope everyone is well.  FOV on!

 

ps:  Did you know that babylon.js is less than 90 kbytes when zipped?  THAT IS AWESOME!

[Wingnut]

Hi kids!  Well, if you have been following my escapades in Tutorial Talk, then you know I have a need to do further study on light.directions.  So, as usual, I built a testing 'jig', and as normal, it turned out to be fun.

 

So, here is a demo (in English) that will help me (and others) learn about the .direction property on many types of babylon.js lights.  And, here is a badly-translated French version.  Here is a zip that contains both versions.  This demo requires some time to watch it and see what is happening.  It also might run too fast in IE11, so you might want to view this in something with a slow frame rate.  The light is red in IE11, and white in FF21.  It is not very exciting, but it explains a semi-difficult subject.

 

As a reminder... the .direction property on the babylon.js DirectionalLight, SpotLight, and HemisphericLight... takes an unusual Vector3(x, y, z)...  where x, y and z are floats that range from -1.0... to 1.0.  Negative 1 to positive 1.  Each value can be said to define the amount of 'pull' or 'influence' they place upon a light... to aim in that direction.   Now try the demo, and sit back and relax as you watch 'influencing' happen.  Party on!

[Wingnut]

Hi friends!

 

No demos today.  Today, I talk.  (What's new there, Uncle Wingnut?)

 

As you might know, I have been working on tutorials, and recently, I did a little adjusting to tutorial #7 - animation.

 

One thing I noticed right away, is that the author said that there are TWO ways to animate.  Well, I disagreed right away, and said that there are THREE ways to animate.

 

1.  Do direct animating... or insert function calls... inside the render loop... like these two examples:

engine.runRenderLoop(function () {      scene.render();      scene.getLightsByID("spot1").position.x += .05;});

engine.runRenderLoop(function () {      scene.render();      animateLights(scene);});

2: Use a babylon.js Animation-class object, with keys.  (I think it should be called 'Animator' class, but that is a different subject.)

 

3a. Use a 'complex' animation by putting a function inside a call to scene.registerBeforeRender... like this:

scene.registerBeforeRender(function () {    // Your code here});

3b. You can also insert the NAME of a function as the parameter/arg for registerBeforeRender()... like this:

scene.registerBeforeRender(animateLights);

(And then you can place the animateLights() function in some other place within your JS)

 

I use #1 often, but then I thought about it more. #1 and #3b, are really the same thing, right?  But there IS one difference.  I cannot send 'args' (parameters) to the animateLights function... when using method #3b.  In other words... THIS does NOT work:

scene.registerBeforeRender(animateLights(scene));  // fails

So, let us pretend that #1 is a bad way to animate because it loads-down the render loop.  Lets pretend I was wrong, (I probably REALLY AM wrong)...  and lets AGREE that there IS only two ways to animate, like the tutorial claims.

 

Since I cannot send 'scene' as a parameter to my animateLights function, I must instead 'look-up' a handle/reference to 'scene'... inside my animateLights() function.  'scene' is NOT a global variable.  But WAY BACK when I did...  var engine = new BABYLON.Engine(canvas, true) ...when I built my basic scene, 'engine' became global.  Careful with capital letters here.  Notice 'engine' is a global variable, but Engine is a function.

 

Let us look at my NEW animateLights() function (with no 'scene' arg/parameter).  Here, I will use the global 'engine' variable, to get a handle/reference to 'scene' :

function animateLights() {     var scene = engine.scenes[0];     var myspot = scene.getLightsByID("spot1");     // animate the light like a crazy person     [...]  <=  this symbol means add more code here}

Quite easy, yes? I did not need to send 'scene' to this function.  I quickly looked it up.  (Quick speed is important in animation functions.)   I could have taken a shortcut, like this:

function animateLights() {     var myspot = engine.scenes[0].getLightsByID("spot1");[...]}

BUT... I think... if you need to 'lookup' MANY scene items in your animation function, it is best to do it the first way.  That is  only my opinion.  It depends upon the amount of scene item lookups.  Do speed tests if you like.

 

Continuing on, often I have more than one animation function that I want to call.  Like a good mad scientist, I tried and failed at this:

scene.registerBeforeRender(animateLights, animateMeshes);  // fails

But, I discovered that you can easily call registerBeforeRender() two or more times, like this:

scene.registerBeforeRender(animateLights);scene.registerBeforeRender(animateMeshes);

Success!  Works fine! 

 

Of course, you can also 'cascade' the functions by calling ONLY animateLights(), and then calling animateMeshes() just before the closing brace in animateLights().  But I think using multiple calls to registerBeforeRender... like shown above, is a smarter way to do multiple animation function calls, and it's VERY easy, yes?  Let babylon.js do the animation time management FOR you.

 

A little warning:  Avoid using FOR loops in your animation functions.  Instead... use STEP... one step forward or backward... of the animation sequence.

 

So, from here forward, I am not going to use animation method #1.  It is clumbsy, and it risks bogging (slowing down) the render loop.  From now-on, in my demos and projects, I am going to use #3a or #3b.  They both work GREAT!  I might use #1 just for tiny little quick-tests, but I think it is wise to use #3a and #3b most of the time.

 

Readers, coders, please comment to this freely.  Show me better ways, fix my mistakes, teach me about animation 'time management' inside of babylon.js, because soon, I (and all of you) will be adjusting some wording inside the animation tutorial.  I could use all the help and knowledge I can get.  THANKS!  Hey... umm... Animate On! 

[Wingnut]

Hi gang!  Wow, the response is ear-shattering!    (The forum has been a bit sleepy, lately.)  Oh well, keep that animation stuff in mind if you please.  I put it into action, recently.  Check out  this new demo.  The zipped version is there, too.

 

This demo does lots of new (for me) things.  First, it uses some cool sine/cosine orbiting fun that deltakosh showed me, seen at the bottom of our lights test demo... in our Samples/Custom folder at GitHub.  I love orbiting!

 

This demo also uses my cool new setLightDirectionByTarget(spotlight, orbitbox);  I love it... it works great, and it keeps the spotlight aimed at the orbiting box perfectly.  I would LOVE to see it installed in the BJS framework, on lights that use .direction, but particularly on spotLights and directionalLights.  HemisphericLights are fairly simple to set .directions on.

 

This also uses two (new to me) occurences of mesh.lookAt(), both with offsets in the args.  That function works real fine, too, but it takes a bit of experimenting to get the offsets correct.  (The offsets are in radians and are often factors of Math.PI)

 

Mesh.lookAt is used on the white wireframe spotlight-matching cone, and on the randomly-colored utility arrow that points at the box as it orbits.  The Mesh.lookAt function has quite a few 'helpful notes' inside the source code for BABYLON.Mesh.

 

And last, just for fun, I turned-on a cool babylon.js particleSystem for a vapor trail coming from the orbiting box.  (The box is its emitter.)  This demo is also fairly well commented, which is quite unusual for a Wingnut-made demo.  Enjoy the fun, and party on!

[GameMonetize]

Could you share the code you used for setLightDirectionByTarget? It is absolutely possible to include it in bjs

[Wingnut]

Hi dk.  I am happy and proud to share.  Free to use, by anybody for anything.  Please adjust and improve, though.

	function setLightDirectionByTarget(light, item) {		light.direction = BABYLON.Vector3.Normalize(item.position.subtract(light.position));		return light.direction;	}

You and other JS Gods write functions like this... blindfolded with one hand (very easily). 

 

I don't know if it should return a value.  I don't know if it should check IF the light HAS a .direction property and if not, raise an error.  Maybe 'item' should be changed to 'mesh' or maybe 'target'?  Maybe setLightDirectionToTarget?  Maybe setLightDirectionToMesh?  Your decision is fine.  I am easy.

 

In other BJS functions, 'target' is a vector, not a mesh/item.  SO... IF... target is a vector, the code would look like this...

	function setLightDirectionByTarget(light, target) {		light.direction = BABYLON.Vector3.Normalize(target.subtract(light.position));		return light.direction;	}

Maybe that way is more wise.  Your decision.  Adjust and change.  Add your expertise, please.  This function has not been well-tested, and I am not able to predict problems that could happen.  I am scared!  :/  I am not qualified to write code for the framework.  I make too many mistakes.  Adjust adjust adjust... and... THANKS!  I am honored by your interest.

 

Of course, if it is installed on light-class objects, it would be called .setDirectionByTarget.  No need to put the word 'light' in its name, when it is ON light-class objects.   Then, assuming 'target' is a vector, it might be:

	function setDirectionByTarget(target) {		this.direction = BABYLON.Vector3.Normalize(target.subtract(this.position));		return this.direction;	}

You know all this, already.  No need for me to tell you how to adjust.  You are a code genius, DK.  Be well!

[Wingnut]

Hi girls!

     Tonight, yet another demo.   My standard 'utility arrow' (seen in a few of my demos) has always been a 2-mesh thing... made from 2 cylinders.  It makes it difficult to use, sometimes.  Also, I did recent work with mesh.lookAt(), and it wants meshes that are drawn facing you.  My old utility arrow did not do that well, and it had a bad pivot point, etc etc.

So, it was time to plot a new one-mesh arrow.  I put some air vents into it... to keep it from over-heating, too.  It is a racing arrow.  It has racing colors, and has been tested in the wind tunnel to ensure low air drag and minimum mesh-skin friction coefficients.    I also used my new best friends... Math.sin and Math.cos.  They make WONDERFUL circles on the graph paper for me.

It is not quite done yet, and OH MAN... I HAD A TOTAL GOOD TIME MAKING IT!  TOO MUCH FUN!!!  I really love my mesh-plotting laboratory.  It makes beautiful things (in my opinion).  I am also using the new BABYLON.VertexData() device to install my dataKinds.

Hey DK... I am using a BJS 110 minified that I DL'd tonight.  Has IT got the colorkind addition done yet?  Take a look near the bottom of my arrow-making code.   vertexData.colors = colors; failed for me... so I had to use the old way.  I could be making a mistake, too.  And maybe, the colorKind addition has not been installed in the BJS 110 minified version yet.  The old method of installing colorKind still works fine, thanks to the Knight of Backward Compat. 

Remember, the missing faces are part of the design.  IndicesKind on the new vertexData object are working perfect.  Those are air vents.  It is a racing arrow, and needs to stay cool at high speeds.   

I hope everyone is well!  Point On!

[GameMonetize]

The colorKind was added after 1.10

[Wingnut]

Ahh, thanks for the information, DK!  No hassle for me at all.  Easily worked-around.

 

Ok, but now, I have a challenge from hell.  I put this function on a mesh of mine:

// Wingnut playing, trying to get hFrame01 to be both wireframe and not, at the same time.hFrame01.bindAndDraw = function (subMesh, effect, wireframe) {	var indexToBind = hFrame01._indexBuffer;	var indexToBind2 = subMesh.getLinesIndexBuffer(hFrame01._indices, engine);	// VBOs	engine.bindMultiBuffers(hFrame01._vertexBuffers, indexToBind, effect);	engine.bindMultiBuffers(hFrame01._vertexBuffers, indexToBind2, effect);	// Draw order	var useTriangles = true;	engine.draw(useTriangles, useTriangles ? subMesh.indexStart : 0, useTriangles ? subMesh.indexCount : subMesh.linesIndexCount);	var useTriangles = false;	engine.draw(useTriangles, useTriangles ? subMesh.indexStart : 0, useTriangles ? subMesh.indexCount : subMesh.linesIndexCount);}  // Even if successful this way, I would not see the wires. Same color as shaded faces.

Of course, it finishes in wireframe, because the final time I call engine.draw, I have useTriangles = false;

 

Objective:  I would like to have a mesh draw with triangles, and then have it re-drawn in wireframe atop, in color choice black or white.  Can it be done?  Would it be useful to other users?  I do not want to use a texture with wires painted on it.  I want to see the real wireframe lines (indices) in user-choice of black or white, over-layed atop the faces of the non-wireframe material.

 

The wires would need to be in black or white, and drawn on top the faces.

 

Possible?  Nightmare?  Thoughts?  Thanks. (.wirediameter or .wirewidth would be fun, too.) 

 

material.wirewidth <float number>

material.wirecolor <Color3>

material.wireframe <true/false/also>

 

Insane, huh?  What?  You say 'also' is not a legal boolean?  Yeah, I know.  hmmm.

[GameMonetize]

Your code should work with just a slightly update. The wireframe should be drawn without the current material else you won't see the wireframe

i think you should change code when a mesh is rendered and re-launch a render with a white material using wireframe

[Wingnut]

Thx for the comments and help, DK.  I think I understand...

var boundermat1 = new BABYLON.StandardMaterial("boundermat", scene);boundermat1.diffuseColor = new BABYLON.Color3(1,0,0);boundermat1.specularColor = new BABYLON.Color3(1,1,1);boundermat1.wireframe = 0;var boundermat2 = new BABYLON.StandardMaterial("boundermat2", scene);boundermat2.diffuseColor = new BABYLON.Color3(1,1,1);boundermat2.specularColor = new BABYLON.Color3(1,1,1);boundermat2.wireframe = 1;var bound1 = new BABYLON.Bounder("bound1", scene, 1);// bound1.convertToFlatShadedMesh();// Wingnut playing, trying to get bound1 to be both wireframe and not, at the same time.bound1.bindAndDraw = function (subMesh, effect, wireframe) {	var engine = bound1._scene.getEngine();	// install red shaded material	bound1.material = boundermat1;	var indexToBind = bound1._indexBuffer;	var useTriangles = true;	if (wireframe) {  // false		indexToBind = subMesh.getLinesIndexBuffer(bound1._indices, engine);		useTriangles = false;	}	// VBOs	engine.bindMultiBuffers(bound1._vertexBuffers, indexToBind, effect);	// Draw	engine.draw(useTriangles, useTriangles ? subMesh.indexStart : 0, useTriangles ? subMesh.indexCount : subMesh.linesIndexCount);	// --------------	// Change to a white wireframe material	bound1.material = boundermat2;	if (wireframe) {  // true		indexToBind = subMesh.getLinesIndexBuffer(bound1._indices, engine);		useTriangles = false;	}	// VBOs	engine.bindMultiBuffers(bound1._vertexBuffers, indexToBind, effect);	// Draw again - seems to erase first draw	engine.draw(useTriangles, useTriangles ? subMesh.indexStart : 0, useTriangles ? subMesh.indexCount : subMesh.linesIndexCount);}

Ends in white wireframe with no shaded red beneath it. 

 

See any mistakes?  (thx)  Sadly, I think the 2nd draw is erasing the 1st.  What a great idea, though, DK!  I can feel it wanting to work.    Here is a big fat demo that uses it.  And here is the zipped version.  Its a fat pig.  Slow loader... because I kept all the positioning boxes active in the plotting laboratory.  The white wireframe mesh is the only mesh of concern.  Ignore the rest.

 

Btw, page-up, page-down (camera lift/drop) is active here.  So is 'w' for wireframe toggle.  So is ` key (upper left keyboard) for memorizing camera location (fails in IE11).  (yawn)

 

Thanks for the try, deltakosh.  Continued suggestions certainly welcome.

 

In case anyone cares, bounder01.js is going to MAYBE be a new primitive for BJS (along with my arrow, maybe).  It is a user-createable completely-dynamic bounding box... used to highlight meshes when they are clicked-on (and other times too).  It has user-settable width, height, depth, padding-around-mesh (all 3 axis), arms-reach (all 3 axis), tubing size, bounding frame material, and mesh-fogging (highlighting) material.  It won't have all those numbered blue boxes when finished, though.  Those are only to help me do indices.

 

As far as I know, we don't have a "show bounding box" kind of thing... to highlight meshes-with (like when they are clicked-on).  This device will hopefully make that task easier. Maybe the bounder has too many vertices to be useful for anything.    Too complicated, probably.  160 vertices for a "mesh-selected" highlighting box?  Maybe that is ridiculous, eh?  *nod*

 

BABYLON.Mesh.CreateBounder(name, width, height, depth, tubesize, widthreach, heightreach, depthreach, widthpadding, heightpadding, depthpadding, scene, updatable, framematerial, fillmaterial )  // last two are optional. Send it material, or set materials after instantiation.  (Maybe the padding will be eliminated.  Not sure that I need it.  Just make the bounder bigger than the mesh.) 

 

What a project.  I think I am getting a tumor. 

 

Thanks again, DK.  See mistakes?  Got more ideas?  I would love to hear them, if/when you have time.  Party on!

[GameMonetize]

You cannot do that at the level of bindAndDraw because the material must be applied before

 

What about cloning your object ?

var boundermat1 = new BABYLON.StandardMaterial("boundermat", scene);boundermat1.diffuseColor = new BABYLON.Color3(1,0,0);boundermat1.specularColor = new BABYLON.Color3(1,1,1);boundermat1.wireframe = 0;var boundermat2 = new BABYLON.StandardMaterial("boundermat2", scene);boundermat2.diffuseColor = new BABYLON.Color3(1,1,1);boundermat2.specularColor = new BABYLON.Color3(1,1,1);boundermat2.wireframe = 1;var bound1 = new BABYLON.Bounder("bound1", scene, 1);var bound2 = bound1.clone("toto");bound1.material = boundermat1 ;bound2.material = boundermat2 ;

BTW I was thinking about adding a .showBoundingBox property on meshes