Trouble initializing due to init signature and paths to worker thread JS.

[jholmes033169]

This appears to be a fantastic lib. Amazing work.

We're trying to integrate it into our Babylonjs project, having having some difficulties.

Is the README up to date? Because looking at the code, the init signature appears to rely on a "World" object with a constructor of (selector, options) but the README has options as the first parameter. When we just passed in the selector, it appeared to get past the querySelector exception.

Once past the querySelector exception, the next obstacle was that it could not load the work thread code. It appears to expect the js files to be located relative to the root path, but when you try to run from, say... "https://somewhere.com/page1/page2"... it is trying to find the JS files at "https://somewhere.com/page1/page2/offscreenCanvas.worker.bc53e995.js"

Of course, we could be doing everything wrong.

Just so you know, we are the devs of SceneGrinder (https://www.scenegrinder.com) and would love to experiment with integrating your dice roller into our product.

Thanks... any insight is appreciated... and again, hats off to amazing work.

Jerry

[frankieali]

Hi Jerry, My name is Frank. Thanks for checking out my project. I've been working on this dice library for a while in my spare time. It's not up to date with the latest. I would say it's still in the beta phase. I have a couple of branches where I'm working out bugs. I recently helped a friend develop a tabletop character sheet (using React) and we found more than a few code problems when implementing it. If you want to take a look at that project it's available here http://bottledlightninggames.com/. You can see how the Dice roller was implemented in the /static/js/Components/ChartacterSheet/index.js file.

I have quite a bit of spare time this week. I'm going to try to get my bug fixes in and I'll update the documentation as well. Once that's done I'll probably be able to help you out with implementation questions.

I'm checking out Scene Grinder now. That also looks like a pretty fantastic table top project. I'm curious what tools you're using for 3D modeling and animations.

Frank

On Mon, Nov 1, 2021 at 8:58 AM Jerry Holmes @.***> wrote:

This appears to be a fantastic lib. Amazing work.

We're trying to integrate it into our Babylonjs project, having having some difficulties.

Is the README up to date? Because looking at the code, the init signature appears to rely on a "World" object with a constructor of (selector, options) but the README has options as the first parameter. When we just passed in the selector, it appeared to get past the querySelector exception.

Once past the querySelector exception, the next obstacle was that it could not load the work thread code. It appears to expect the js files to be located relative to the root path, but when you try to run from, say... " https://somewhere.com/page1/page2"... it is trying to find the JS files at "https://somewhere.com/page1/page2/offscreenCanvas.worker.bc53e995.js"

Of course, we could be doing everything wrong.

Just so you know, we are the devs of SceneGrinder ( https://www.scenegrinder.com) and would love to experiment with integrating your dice roller into our product.

Thanks... any insight is appreciated... and again, hats off to amazing work.

Jerry

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/3d-dice/dice-box/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEZAIMNOHRW6WDDNGXDN22TUJ2FI7ANCNFSM5HD7K3DQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

-- Frank Ali

--They paved paradise and put up a parking lot

[frankieali]

Looks like the docs are missing an important detail. When instantiating the class, the first argument is the target canvas id. Then come the config options. Currently only the 'purpleRock' theme is available. I'm working on more themes, but that's lower priority right now.

const Box = new DiceBox("#dice-box", {
  theme: "purpleRock",
  assetPath: "/assets/dice-box/",
});

Then I've found putting the init call in document ready is needed to measure the canvas

// initalize DiceBox onDomReady so canvas can be properly measured
document.addEventListener("DOMContentLoaded", () => {
  Box.init();
  // set the onRollComplete callback
  Box.onRollComplete = (results) => {
      // do something with results
      setAttributesFromDice(results)
  };
});

// clear dice on click anywhere on the screen
document.addEventListener("mousedown", () => {
  const diceBoxCanvas = document.getElementById("dice-canvas");
  if (window.getComputedStyle(diceBoxCanvas).display !== "none") {
    Box.hide().clear();
  }
});

Also, some helpful css

#dice-box {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  width: 100%;
  height: 100%;
}

[jholmes033169]

Thanks, Frank... I'll check all this out. It's not surprising there's some rough edges integrating into React.

For SG, we're using stock animations and modeling... pulled in about 1000 models from various 3D libs. We're heading for a kickstarter launch in early 22, so we're gearing up with marketing and about a million other things that have nothing to do with coding.

We were not actually going to even do a 3D dice roller... but market research indicates that was an ill-advised plan. :) So here we are, which lead me to find your project. I'd be willing to help out any way I can. (I'me the lead dev for SG)

I'm particularly impressed with your use of worker threads for BJS. One problem we've had is avoiding too much interaction with React and keeping BJS self contained. They don't play well performance-wise.

I'll be diving into this stuff today. THANK YOU for your quick response, too.

[frankieali]

I've been doing React development for the last few years. As mentioned in the docs, I was inspired by OwlBear Rodeo's https://www.owlbear.rodeo/ implementation of dice. They're using React and implemented a mostly class based dice roller into their platform with useEffect hooks to manage the roll interactions. I wanted to create a vanilla project that was geared towards high performance with a very small footprint so it would be mobile friendly. I compromise some 3D details to keep the footprint small, but I have plans to create different levels of detail in the future so implementers can decide on their own what's more important. Moving the physics to a web worker (giving up the very convenient BabylonJS physics imposters) was very tricky, especially since you lose a lot of your debugging capabilities, but it was necessary to get the performance I was after.

Moving the canvas into an offscreen canvas worker gives a little bump too. It's probably more noticeable in a React environment where you don't want to block the main thread. I'm cleaning up my code now and adding some additional inline comments.

I have another performance booster in the works with Array Buffers that I hope to work in later this week as well. I really notice the difference on my 120Hz monitor.

[jholmes033169]

How do you handle theming?

[frankieali]

There's a theme folder at assets/dice-box/themes that has the texture maps used by the module. The folder name must match the theme name. Then I add the theme name to the code, in src/components/Dice/themes.js https://github.com/3d-dice/dice-box/blob/main/src/components/Dice/themes.js, based on what kind of material it should be generating. This is probably being compiled down into something unrecognisable, so not very user friendly at the moment. To create the textures, I have a set of 3D dice models https://sketchfab.com/3d-models/rpg-dice-set-pbr-game-ready-model-962812cf911545d5a47edea469cfc54e that I bake different procedural textures onto. The dice set I bought does not have the numbers carved out. The author of the dice set probably generated their normal maps from a high resolution version that is not included in the purchase. So I have to manually generate the normal maps by merging the baked texture map with the normal map that came with the dice set. It's a little time consuming, but I get good results. I follow this technique for doing so https://www.youtube.com/watch?v=t8jvroWSCBU In future releases I'm hoping to extend the theme system to be a plug-in system, where users can provide their own models, colliders and textures, but that's probably a 2022 task. In the meantime, I'm thinking I can provide a few empty 'custom' texture slots if people want to provide their own theme. I also chose to keep to standard materials to keep the BabylonJS package small. PBR textures may be in the future as well if people want that level of detail and don't mind adding a megabyte to their deliverable.

[frankieali]

Actually, now that I've looked at the theme.js closer, I can probably adjust the code to generate materials based on text string evaluation, instead of having to fully qualify the theme name. The default for my switch statement is for a HEX color string that generates a flat color material. I could have any string that isn't a HEX value point to standardMaterial and then prefixes for special cases such as 'glass--{themeName}' or 'metallic--{themeName}'. This will free up the need to list all named themes in code. This is a good feature. Then themes can be added without any code changes. I'll get this in later this week as well.

[jholmes033169]

Very cool. Let me know if you want to test or bounce something off me.

This "issue" isn't really a proper issue any more... more a discussion. Let me know if you want to move it something more apropos. :)

[clevett]

Thanks for keeping this issue open. I was also trying to implement this into a React project and ran into similar issues.

[clevett]

@frankieali and @jholmes033169 let me introduce myself as Cassie. I work for a new VTT called Quest Portal. I found this library looking for 3d dice options to prototype dice rolling during our early testing phase.

I have the green light to publish whatever solution I come up with for our prototype to be under MIT license. We are a Typescript and React app. So I have been thinking about forking this library and converting it to TS to get to know the code. I'd love to collaborate on this or a similar project. One of our goals at Quest Portal is to increase the number of table top role players world wide. Reducing the obstacles around dice rolling for inspired developers is one of the ways that we are pursuing to that goal.

[frankieali]

Hi Cassie. Thanks for checking out my dice project. I've made a few updates since Jerry reported his issue. The good news is I discovered that Code Sandbox now supports web workers so here's a react demo using the dice. fantastic-3d-dice-react (You may have to refresh the browser window once if you get an error on load.) I'd be happy to help you implement and understand the project more. I know the basics of Typescript, but I have not taken the plunge yet with project work. A fork might give me a reason to finally complete that Typescript Udemy course I bought last year. Quest Portal certainly has a nice landing page. I'd be interested in seeing what you're developing over there. I play and sometimes DM weekly games with friends on roll20 which I see you're quite familiar with. One thing that was noted with Jerry is that the perspective of this dice roller is fixed from a top-down view. I offer a few zoom levels but no changes in perspective. Let me know if you have any questions.

[frankieali]

Hi @clevett Here's another demo for you showing how to use the dice parser for advanced dice notation which every tabletop RPG needs. https://codesandbox.io/s/fantastic-3d-dice-react-advanced-3d5b7?file=/src/App.js.

[clevett]

@frankieali Send me an email at cassie@questportal.com and I'll add you to our alpha testing so you can take a look around. :) We're still in early phases but people are starting to play games with the initial app.