I am in the process of carrying out a small project to learn the alphabet in sign language (and learn p5.js and ml5.js). I got an already trained model that I want to import into my project. The model was in .h5 and I converted it with this command:
$ tensorflowjs_converter --input_format keras model/model.h5 modelJS/
When i load the model with load() i get this error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'load')
let classifier;
function loadModel(){ classifier.load('modelJS/model.json', predict); }
function predict(){ //classifier.classify({image:video},gotResults); }
function setup() {
createCanvas(640, 480); video = createCapture(VIDEO); video.hide();
background(0);
// Load Model
loadModel()
};
function draw(){ image(video, 0, 0, 640, 480); }
As you have it, classifier is null ("undefined"). Therefore it doesn't have the property: load().
In the ml5js Documentaion classifier is set to ml5.imageClassifier('MobileNet') To use a image classification model:
function loadModel(){
classifier = ml5.imageClassifier('modelJS/model.json');
}
Related
I'm trying to get a threeJS Mesh from Autodek Forge objects using the function
'viewer.impl.getRenderProxy(viewer.model, fragId)'.
The problem that I encounter is if I put this function in a loop routine to get Meshs of multiple objects, I get just a random Mesh.
To find out the problem's origin, I used a similar function that is :
'viewer.impl.getFragmentProxy(viewer.model, fragId)'
and it worked just fine.
Her is the routine code that I use and the result :
for(let i = 0, len = nodNamee.length; i < (len); i = i+3){
var instanceTree = viewer.model.getData().instanceTree;
var fragIds = [];
instanceTree.enumNodeFragments(nodNamee[i+1], function(fragId){
fragIds.push(fragId);
});
fragIds.forEach(function(fragId) {
var renderProxy = viewer.impl.getRenderProxy(viewer.model, fragId);
fragtoMesh.push(renderProxy);
//var fragmentproxy = viewer.impl.getFragmentProxy(viewer.model, fragId);
//fragtoProxy.push(fragmentproxy);
});
}
Result :
Arry of fragtoMesh
This is because the getFragmentProxy method always returns the same instance of THREE.Mesh, just with different properties. Basically, the method works like this under the hood:
let cachedMesh = new THREE.Mesh();
// ...
getRenderProxy(model, fragId) {
// Find the geometry, material, and other properties of the fragment
cachedMesh.geometry = fragGeometry;
cachedMesh.material = fragMaterial;
// ...
return cachedMesh;
}
// ...
Note that this is a performance optimization because if the getFragmentProxy (which is only meant for internal use) function returned a new instance every time it's called by other parts of Forge Viewer, it would cause a huge memory churn.
So in your case, if you really need to store all the THREE.Mesh instances in an array, you'll need to clone them or copy their individual properties into separate THREE.Mesh objects.
I'm writing an application draws particles on screen in a chemical reaction.
I have written a Particle class and want to handle the async nature of loading images in P5.js in this class.
My thinking was that if I wrap the loadImage() function in a Promise, I should be able to load all of my particle sprites async and then have the draw code execute as soon as the P5 Image object resolves.
I had this code working fine using just callback functionality of loadImage(), but I ultimately have to hand off the image object to a physics library to model particle motion as well as other constructors, so a Promise pattern seemed to be the right solution.
class Particle {
constructor(name) {
// Set properties on the Particle
this.imageUrl = "THE_URL";
this.imageObject = null;
}
loadParticleImage() {
console.log("attempting to load image: " + this.imageUrl)
return new Promise(function (resolve, reject) {
loadImage(this.imageUrl, (result) => {
// Sets the image object property to the result for other methods to access
this.imageObject = result;
// Resolves the Promise with the result
resolve(result);
}, reject(Error("Image not found")));
})
}
drawParticle() {
console.log("attempting to draw particle");
this.loadParticleImage().then(function (imageObject) {
// code to draw image and handoff to physics library
}, function (error) {
console.log("imageObject not defined", error);
});
}
}
And in the setup() function of the main sketch file, I would initialize a particle and draw it using something like:
theParticle = new Particle("Water");
theParticle.drawParticle();
I get a stack error saying that the image could not be loaded and I can't quite figure out why.
attempting to draw particle
particle.js: attempting to load image: img/svg/Water.svg
particle.js: imageObject not defined Error: Image not found
at particle.js
at new Promise (<anonymous>)
at Particle.loadParticleImage (particle.js)
at Particle.drawParticle (particle.js)
at <anonymous>:1:18
I can spot two mistakes in your code:
you are always immediately calling reject(). You probably wanted to pass a callback to loadImage that will reject the promise:
loadImage(this.imageUrl, (result) => {
…
}, () => {
// ^^^^^^^
reject(new Error("Image not found"));
});
the this keyword in your callback is not the one you expect. Use an arrow function for the promise executor callback as well to have this refer to your Particle instance that loadParticleImage was called on:
return new Promise((resolve, reject) => {
// ^^
loadImage(this.imageUrl, result => {
this.imageObject = result;
…
I followed this tutorial
Wanting to generate SkinnedMesh and bind to bones with Script
public SkinnedMeshRenderer shirtMesh;
public SkinnedMeshRenderer targetMesh;
// Use this for initialization
void Start () {
//SkinnedMeshRenderer sm = Instantiate(shirtPrefab).GetComponent<SkinnedMeshRenderer>();
SkinnedMeshRenderer sm = Instantiate<SkinnedMeshRenderer>(shirtMesh);
sm.transform.parent = targetMesh.transform.parent;
sm.bones = targetMesh.bones;
sm.rootBone = targetMesh.rootBone;
}
As shown in the screen shot the blue mesh (shirt) is deformed incorrectly. (This mesh worked as expected if loaded in the editor when it gets imported)
Am I missing anythings?
I am trying to load some simple keyframe animation (just positions) using the JSON loader.
Using the dev branch r80.
To load the entire scene (made and animated in softimage, exported to FBX, imported into blender, exported using the THREE JSON export script). The file looks good and loads ok.
But when i try to load the animation using:
object.traverse( function ( child ) {
switch(child.name) {
case "dae_scene:helium_balloon_model:helium_balloon_model":
//do anim
console.log(object.animations[0]);
animationClips.balloon1 = object.animations[0]; //
//animationClips.balloon1.weight = 1;
animationMixer = new THREE.AnimationMixer( child );
var sceneAnimation = animationMixer.clipAction(animationClips.balloon1);
sceneAnimation.play();
break;
}
}
it produces:
three.min.js?ver=4.5.4:712 Uncaught Error: cannot parse trackName at all: dae_scene:helium_balloon_model:helium_balloon_model.position
Anyone who can point me in the right direction?
I am making a game engine in haxe/openfl. so far it's just supposed to display the image that belongs to the thing object. what I have built so far runs perfectly on when deployed as a flash application, but closes instantly when I deploy it as a windows application. It just creates a blank screen in html5. I have not tested other targets. I am using HIDE, and every time it crashes, HIDE brings up the message: "File c:\Users\Adu\Documents\HaxeProjects\Downloaded\Export\windows\cpp\bin\Downloaded.exe was changed. Reload?" and gives me the options yes or no. My answer doesn't seem to change the situation. when I manually go into the export directory and run the application, it gives the error: "Error Custom([file_write,stderr]). Here is my code:
Main:
package;
import openfl.display.Graphics;
import openfl.Assets;
import openfl.display.Bitmap;
import openfl.display.Sprite;
import openfl.events.Event;
import openfl.Lib;
import openfl.text.TextField;
import openfl.text.TextFormat;
import openfl.ui.Keyboard;
import openfl.events.*;
class Main
{
static var obj(default,default):ObjectManager; //contains the list that all gameobjects add themselves to
static var stage = Lib.current.stage;
public static function main() // this is the gameloop
{
// static entry point
startUp();
var running = true; // gives me a way to exit the gameloop
while (running)
{
logic();
render();
Lib.current.stage.addEventListener(KeyboardEvent.KEY_DOWN, function(event)
{
if (event.keyCode == Keyboard.ESCAPE)
{
running=false;
}
});
}
}
static function startUp() // runs once, when the game is started
{
obj= new ObjectManager();
stage.align = openfl.display.StageAlign.TOP_LEFT;
stage.scaleMode = openfl.display.StageScaleMode.NO_SCALE;
}
static function logic() // loops, this handles the logic
{
var thing = new GameObject("assets/pixel_thing.png", 1, obj);
var mech = new GameObject("assets/mechwarrior.png", 0, obj);
}
static function render() // runs right after logic and draws everything to the screen
{
for (i in obj.objects) //iterates through a list of gabeobjects and draws them, it is 2 dimensional so that I can draw objects in blocks
{
for (j in i)
{
Lib.current.addChild(j);
}
}
}
}
GameObject:
package ;
import openfl.display.BitmapData;
import openfl.Assets;
import openfl.display.Bitmap;
import openfl.display.Sprite;
import openfl.events.Event;
import openfl.Lib;
import openfl.text.TextField;
import openfl.text.TextFormat;
class GameObject extends Sprite
{
public function new(?image:String, zOrder:Int, objectManager:ObjectManager) // image is the image, zorder is which layer it's drawn on, lower layers are drawn on top objectmanager is just there to help me pass the list to the object
{
super();
var data = Assets.getBitmapData(image);//this is the image data
var bitmap:Bitmap = new Bitmap(data);//this is the actual image
Lib.current.stage.addChild(bitmap);//this sraws the image when the object is instantiated
objectManager.objects[zOrder].push(this);// this adds it to the list of objects
}
}
ObjectManager:
package ;
class ObjectManager
{
public var objects = new Array<Array<GameObject>>();
}
why is it that it works on flash but not windows? How do I fix this?
First off - this doesn't work fine on flash either. Are you running this in the flash debug player? If you don't, which I assume is the case, you won't see any exceptions.
There's a null reference error at this line:
objectManager.objects[zOrder].push(this);// this adds it to the list of objects
You are accessing the array at index zOrder, which doesn't exist. objects is being initialized to [], which does not include the "inner arrays" (it can't, really, how would it know how many of them there should be?).
Now, Windows builds don't give you very helpful debug information by default. A simple way around is to use neko (which mostly behaves the same as hxcpp builds, except it compiles faster and performs worse) for debugging, where you get a stacktrace by default on crashes.
Sure enough, it's the same issue as in flash, the only difference is that native builds crash while flash just "ignores it" and tries to carry on.
Invalid field access : objects
Called from GameObject::new line 92
Called from GameObject::$init line 83
Called from Main::logic line 61
Called from Main::main line 38
Called from Reflect::callMethod line 58
Called from ApplicationMain::main line 91
Called from openfl.Lib::create line 113
For better hxcpp build debug info, you might want to have a look at the crashdumper lib.