mwpowellhtx

Adding custom properties

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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} ? 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

@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>

 

Share this post


Link to post
Share on other sites

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" />

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.