Adding custom properties

mwpowellhtx · June 27, 2016

Hello,

I ask this with some caution, obviously, since Mesh instances are fairly rich with "property" content as it stands.

I'd like to add a couple of custom properties to help some client application code determine whether a mesh is "selectable" or not. I wonder how to go about doing this and keep a sane boundary between the rich existing properties and the application properties.

First if it's even possible, in the face of operations like "clone", etc.

As a strategy, for instance, I see naming conventions such as "CamelCase" or "camelCase", with or without leading "_underScores", and things of this nature, to provide some semblance of separation between so-called "public" and "private" concerns, as far as one can do so with JavaScript, at any rate.

One thought is that I might run with a "__doubleUnderScore" to keep things further separate, but I wondered if there were commonly adopted strategies among the community for such as requirement.

Thank you!

Regards,

Michael Powell

mwpowellhtx · June 27, 2016

Apparently, a similar question was asked. Still, wondered if there were any developments around this notion since then?

GameMonetize · June 27, 2016

Hey

As we are living in a JS world, this is up to you

But we do have some tools for you:

- tagging: http://doc.babylonjs.com/tutorials/How_to_use_the_Tags_System

- custom properties: Like you said,just use __

- State property: http://doc.babylonjs.com/classes/2.4/Node#state-string

mwpowellhtx · June 27, 2016

Experimenting, I haven't added anything yet, but I should be able to find all meshes with something like "!findable" for a string methinks. Or even something like "!!!findable" (?).

However, this yields an error "or.trim" is not a function. I tried this "casually" at the Chrome debugger to see:

AndOrNotEvaluator._HandleParenthesisContent	@	babylon.max.js:29524
AndOrNotEvaluator.Eval	@	babylon.max.js:29500
Tags.MatchesQuery	@	babylon.max.js:29484
Scene._getByTags	@	babylon.max.js:16257
Scene.getMeshesByTags	@	babylon.max.js:16265
(anonymous function)	@	VM616:1

From the debugger:

// where "data" is a dictionary lookup prototype in my application
data._items["canvas-scene"].value.getMeshesByTags("!findable")
// or...
data._items["canvas-scene"].value.getMeshesByTags("!!!findable")

Does not seem to matter if I leave the "!" out; "findable" yields the same error.

GameMonetize · June 27, 2016

can you repro on the PG?

mwpowellhtx · June 27, 2016

I'm not sure what you mean "repro" what, exactly? Take a scene, any scene, call getMeshesByTags("yourtagofchoice"), and that's the error that I got.

mwpowellhtx · June 27, 2016

Assuming you've got access to the scene through the PG, start there.

mwpowellhtx · June 27, 2016

Assuming that I can query based on tags, whether enabled or not, from the sounds of things, I should be interacting with "_tags" (?). Is it necessary. I don't necessarily want to pile on "addTags", necessarily, for instance, but rather "replace", simply with something like this "_tags[0] = 'new value'"? Is it necessary to call BABYLON.Tags.EnableFor(myMesh)? Thanks...

jerome · June 27, 2016

imho, adding a JS property to a mesh although it's absolute legal JS, may be not be good idea.

Why ?

Because, once an object is created, unless its prototype is changed, it will be treated (if possible) in "optimized mode" by the JS compiler and this really matters in terms of performance it's used in the render loop and if there are dozens or hundreds of instances.

Adding a property will change the prototype.

Maybe is it a better idea to embed a mesh in a upper class logical object then :

MyObject = {itsMesh: someBJSmesh, property1: val1, property2: val2, etc} ?

mwpowellhtx · June 27, 2016

I also do not want to enable for all of my meshes; only for some. So, hence back to the original error: getMeshesByTags("yourTag"), should work, by default, and, I expect, either return an empty array or null, consistently.

GameMonetize · June 27, 2016

Works for me:

http://www.babylonjs-playground.com/#1QNI4Y#0

mwpowellhtx · June 27, 2016

Elaborate.

It does not matter when I call getMeshesByTags, I get the same error, called immediately after creating the scene:

s.getMeshesByTags("mytag")

Yields:

AndOrNotEvaluator._HandleParenthesisContent	@	babylon.max.js:29524
AndOrNotEvaluator.Eval	@	babylon.max.js:29500
Tags.MatchesQuery	@	babylon.max.js:29484
Scene._getByTags	@	babylon.max.js:16257
Scene.getMeshesByTags	@	babylon.max.js:16265
(anonymous function)	@	VM1286:1
createScene	@	Plays?playId=1c5001e9-f3a6-49f5-9196-a60e00e8d0b5:818
(anonymous function)	@	Plays?playId=1c5001e9-f3a6-49f5-9196-a60e00e8d0b5:859
fire	@	jquery-1.10.2.js:3062
fireWith	@	jquery-1.10.2.js:3174
ready	@	jquery-1.10.2.js:447
completed	@	jquery-1.10.2.js:118

How do you access scene from PG?

adam · June 27, 2016

http://www.babylonjs-playground.com/#1QNI4Y#1

adam · June 27, 2016

http://www.babylonjs-playground.com/#1QNI4Y#2

https://doc.babylonjs.com/classes/2.4/Tags

JCPalmer · June 27, 2016

If you are not sourcing your geometry from a .babylon, subclassing BABYLON.Mesh is the OO way.

mwpowellhtx · June 27, 2016

@JCPalmer I do not want to subclass the Mesh. That is overkill.

mwpowellhtx · June 27, 2016

I updated my BABYLON reference from 2.3.0 to 2.3.1, and still I got the error:

AndOrNotEvaluator._HandleParenthesisContent	@	babylon.max.js:29524
AndOrNotEvaluator.Eval	@	babylon.max.js:29500
Tags.MatchesQuery	@	babylon.max.js:29484
Scene._getByTags	@	babylon.max.js:16257
Scene.getMeshesByTags	@	babylon.max.js:16265
(anonymous function)	@	VM1456:1
createScene	@	Plays?playId=1c5001e9-f3a6-49f5-9196-a60e00e8d0b5:818
(anonymous function)	@	Plays?playId=1c5001e9-f3a6-49f5-9196-a60e00e8d0b5:859
fire	@	jquery-1.10.2.js:3062
fireWith	@	jquery-1.10.2.js:3174
ready	@	jquery-1.10.2.js:447
completed	@	jquery-1.10.2.js:118

Are there some bits that I should be including in order for the tags subsystem to work properly?

mwpowellhtx · June 27, 2016

What is "x-tag-core.min.js"? Assuming this is enabling the tagging subsystem, why is it not a dependency for BABYLON?

mwpowellhtx · June 27, 2016

In summary thus far, unknown what version(s) of BABYLON are in play. I am running against 2.3.1; this I know for a fact.

Also unknown, what other bits should be included, "x-tag-core", for instance. Assuming that it is required, is not provided as a NuGet dependency.

"Simple" gets, i.e. with undefined tags query, returns an array containing all of the meshes. This is half- to be expected.

"Simple" gets, i.e. with tags that have not be provided to the mesh, yield the error. IMO, this should be a null (best case) or undefined (worst case) when identifying the tag(s) and return an empty array, or even null, whichever is conventional for JavaScript.

I try to add a tag to an existing mesh, and it gets even worse:

// Yields a LineMesh in my environment
BABYLON.Tags.AddTagsTo(data.get("mesh-registry")._meshes[1], "testing")

Which yields:

Uncaught TypeError: tag.trim is not a function(…)
Tags._AddTagTo @ babylon.max.js:29455
Tags.AddTagsTo @ babylon.max.js:29451
(anonymous function) @ VM1725:1

I don't know what the disconnect is between PG and a production-ready usage of tags, but clearly there is some disconnect between the two.

mwpowellhtx · June 27, 2016

Use my feedback as you will, but at this point I think I will pursue the ad-hoc JavaScript attaching properties, i.e. "__mytag" approach.

adam · June 27, 2016

It's working here with 2.3:

http://jsfiddle.net/969d8/4/

I'm not sure what you are doing wrong.

mwpowellhtx · June 27, 2016

The error is plain, it is tripping up over "trim". But to this point, no one seems know what that is about. The error is consistent.

GameMonetize · June 28, 2016

Can you confirm that you have the problem with the PGs created by Adam?

(X-tag is a webComponent library used by the playground itself and not related to babylon.js at all)

As you seem to be the only one with the issue, I assume you are doing something else that you did not mention (or referencing something that you did not mention)

mwpowellhtx · June 28, 2016

@Deltakosh The question isn't the PG's per se; the question is what dependencies are there. Because when I just reference the BABYLON scripts, I get aforementioned documented errors. So obviously there is some dependency, perhaps an order, that is incorrect, etc.

Here are my script references, might be helpful to understand what's out of sync with BABYLON and the "x.trim()" dependency, in the order in which they appear.

<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/themes/base/all.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/PepJS/pep-0.4.1.js"></script>
<script src="/Scripts/ExtensionsJS/str-1.1.0.js"></script>
<script src="/Scripts/ExtensionsJS/arr-1.2.0.js"></script>
<script src="/Scripts/ExtensionsJS/boolean-1.0.0.js"></script>
<script src="/Scripts/ExtensionsJS/math-1.0.0.js"></script>
<script src="/Scripts/poly2tri.js"></script>
<script src="/Scripts/Oimo.js"></script>
<script src="/Scripts/babylon.max.js"></script>
<script src="/Scripts/uuid.js"></script>
<script src="/Scripts/FootballJS/element-1.2.0.js"></script>
<script src="/Scripts/FootballJS/goalpost-1.1.0.js"></script>
<script src="/Scripts/FootballJS/gridiron-1.4.0.js"></script>
<script src="/Scripts/modernizr-2.6.2.js"></script>

mwpowellhtx · June 28, 2016

As compared/contrasted with the PG references:

<script src="http://www.babylonjs.com/poly2tri.js"></script>
<script src="dat.gui.min.js"></script>
<!--x-tag-->
<link href="splitbox.css" rel="stylesheet" />
<script src="x-tag-core.min.js"></script>
<script src="splitbox.js"></script>
<!-- jszip -->
<script src="jszip.min.js"></script>
<script src="fileSaver.js"></script>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--Monaco-->
<link rel="stylesheet" type="text/css" media="screen" data-name="vs/editor/editor.main" href="http://yoda.blob.core.windows.net/monaco/vs/editor/editor.main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://yoda.blob.core.windows.net/monaco/vs/editor/css/vs-theme.css" />
<script type="text/javascript">
var require = {
    baseUrl: "http://yoda.blob.core.windows.net/monaco"
};
</script>
<script type="text/javascript" src="http://yoda.blob.core.windows.net/monaco/vs/loader.js"></script>
<script type="text/javascript" src="http://yoda.blob.core.windows.net/monaco/vs/editor/editor.main.nls.js"></script>
<script type="text/javascript" src="http://yoda.blob.core.windows.net/monaco/vs/editor/editor.main.js"></script>
<script type="text/javascript" src="http://yoda.blob.core.windows.net/monaco/vs/languages/javascript/javascript.js"></script>
<script type="text/javascript" src="http://yoda.blob.core.windows.net/monaco/vs/languages/css/css.js"></script>
<script type="text/javascript" src="http://yoda.blob.core.windows.net/monaco/vs/languages/html/html.js"></script>
<!-- Babylon.js -->
<script src="http://www.babylonjs.com/cannon.js"></script>
<script src="http://www.babylonjs.com/Oimo.js"></script>
<script src="http://www.babylonjs.com/babylon.js"></script>
<script src="babylon.fireMaterial.min.js"></script>
<script src="babylon.waterMaterial.min.js"></script>
<script src="babylon.lavaMaterial.min.js"></script>
<script src="babylon.normalMaterial.min.js"></script>
<script src="babylon.skyMaterial.min.js"></script>
<script src="babylon.triPlanarMaterial.min.js"></script>
<script src="babylon.terrainMaterial.min.js"></script>
<script src="babylon.gradientMaterial.min.js"></script>
<script src="babylon.furMaterial.min.js"></script>
<script src="babylon.gridMaterial.min.js"></script>
<script src="babylon.brickProceduralTexture.min.js"></script>
<script src="babylon.cloudProceduralTexture.min.js"></script>
<script src="babylon.fireProceduralTexture.min.js"></script>
<script src="babylon.grassProceduralTexture.min.js"></script>
<script src="babylon.marbleProceduralTexture.min.js"></script>
<script src="babylon.roadProceduralTexture.min.js"></script>
<script src="babylon.starfieldProceduralTexture.min.js"></script>
<script src="babylon.woodProceduralTexture.min.js"></script>     
<script src="babylon.asciiArtPostProcess.min.js"></script>   
<script src="babylon.objFileLoader.js"></script>    
<link href="index.css" rel="stylesheet" />

Adding custom properties

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members