ads

Tuesday, January 14, 2014

Online 3D dice roller

CRITICAL UPDATE!
THE MULTIPLAYER VERSION DOES F*CKING WORK NOW!
It's now a bit slowly and laggy due of short-pulling instead of web-sockets. Amazingly Google desided to turn channel support off, so that was a problem with multiplayer. But now it works. Don't forget to donate, because you guys blow out my traffic tariffs =))

BUG-FIXES. Ok, I've took care of the old bug with preset outcome on d4 that caused to flip its face numbers. Also d10 now reads the "0" face as 10 instead of 0.

This is my pretty online 3D dice roller: http://a.teall.info/dice

I wrote it during practicing in WebGL (actually, it uses beautiful three.js and cannon.js).
It also uses random.org to produce true random numbers (from atmospheric noise).


The main goal is to make a soulful place to roll dices. I did not want a simple calculator as if you clicking a button and they showing you just bald digits in a result. There are a lot of such online textual rollers on the Internet. They are completely ugly ones. No offence, just facts. Rolling dices is one of most significant and emotional part of roleplay board games, such as Dangeons and Dragons. While playing D&D you have to roll dices often, but you will never say: "Oh, this is so tedious". Otherwise, you adore this. You may even have your own set of dices, nicely colored and with sweet texture. You do not want random generator, you want an act of creation, process that extended in time, intrigue with dices stopping rolling one-by-one.

And that is more valuable after all is that you want to be a participant of random. It is great to know that good values are your merit, while bad ones are just a bad luck. This is the reason why my roller have no "Roll" button. To roll you should do a gesture by yourself. This will bring some of your personality into an random act; breathe life into mechanical action. And you will take pleasure in it.

Also note that the roller uses true random numbers from random.org as additional advantage of realy random creation. This is not an ugly computer digital counting.


Demonstration video (sorry about low resulution):


I also added textual notation for future use. It is quite simple by now, but who knows, maybe I will implement more complex forms. See http://en.wikipedia.org/wiki/Dice_notation for more info.

So I think this is realy awesome and cute online dice roller :)
Source code are free to copy, as usual: https://sites.google.com/site/tealyatina/share/dice.zip

Multiplayer version now works. http://www.teall.info/2014/07/multiplayer-3d-dice-roller.html

UPDATE for 4 Aug 2014.
There were a lot of requests, and I added "throw" button. OK, you won. Stupid button is now on =)
In additional, I added a quick URL params as it was suggested. Now it is able to set notation via URL like this: "a.teall.info/dice/?notation=3d8". If param "roll" is present, roller will run a throw instead of showng selector page. For example: "a.teall.info/dice/?notation=3d8&roll". For those who wants to get throw result: it is located in DOM element with id "label". I will try to add more complicated forms of dice notation.

UPDATE for 21 Jan 2016.
I added support for preset result. In notation you may enter comma- or space-separated result after "@" symbol in the order of given notation. For example: "4d4 @ 1 1 1 1" will outcome all d4 dice values to be "1".

If you want to use the roller as front-end for your back-end with such preset result mechanics, let me know =)

Video:


197 comments:

  1. Hi! Are you working on this project? What about to implement random.org webservice?

    ReplyDelete
    Replies
    1. Hi. Random.org is a great service. Thank you for suggestion, maybe I will use their functionality. But there are so much dice rollers of any kind of choice, that I just prefer to use my roller as example application of javascript and webgl, simple enough one to understand. Anyway, if someone interested in usage of my dice roller in their project, he is welcome =)

      Delete
    2. i really want to use it in my Mephit.it project that allows to play D&D 3.5 in your browser. I'd like to pregenerate the results and then animate the launch, can you help me to do this? Can we discuss via mail? Actually you can view my project in Italian only, but in my development server is almost completely translated in English too.

      Delete
    3. You can mail me teal.na AT gmail DOT com if you have questions. Unfortunately, the renderer is not able to roll dice with pre-created result. Random result is produced and read after all dice are stopped. But you still can get the result in your application. After all, I use random.org, so you can feel yourself safe =)

      Delete
  2. Where can i download it? Do you have a github or sourceforge page?

    ReplyDelete
    Replies
    1. Here is the link https://sites.google.com/site/tealyatina/share/dice.zip
      Note that it may run as stand-alone page. Also I added GAE python script from my server side that uses as a proxy to random.org API.

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. This is super cool. Any progress on the multiplayer? What library were you going to use for that?

    ReplyDelete
    Replies
    1. Thanks!
      Unfortunately, I have no time for multiplayer yet now, but idea is still on. First attempt was to use the Google AppEngine, it is the simplest solution for me because I use their back-end. I.e., GAE on server-side to communicate and authorize clients with AJAX. Multiplayer is not so hard to be wrote, but, you know, it have to be tested hard.
      I hope, later I will find a time and a motivation to finish it.

      Delete
  5. Any news about multiplayer version? You will be the first to create an online 3d dice roller!
    Think on it

    ReplyDelete
    Replies
    1. Check it here: a.teall.info/mdice
      This is yet beta version, without log and async throws.

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Cool! You will continue to update this with a log/chat?
      Something like the site rolz do with the room?
      Example:
      Player 1: rolled 1d20-> 18
      Etc. etc. I tried it and works great :)

      Delete
    4. Yep, log will be look like one the rolz.org has. I will update main page (a.teall.info/mdice) as log will be done.

      Delete
    5. Ok thanks man, i really appreciate this!

      Delete
    6. If you still interested, I got free time and did added chat/log =)

      Delete
  6. Is there any way to automatically roll a set of dice, perhaps through a URL parameter? It would be great if I could distribute something like

    http://a.teall.info/dice/?set=2d6&roll

    and automatically get something.

    ReplyDelete
    Replies
    1. Nope for now, but I preparing new version that will include "throw" button and such URL API as well. This is a common request, you know. Anyway, thanks for the comment =) The version will soon be updated - as I think, within a month because I going in a vacation, and there will be no programing experience, I hope =)

      Delete
    2. Check UPDATE section of this post, I added this URL params functionality during lunch break =) You can run it in embedded frame and check if element "label" is visible - this indicates that roll is over. Then get results and parse it.

      Delete
    3. Hey, that's awesome! Thanks!

      Delete
    4. Just chiming in to say I love this feature. Once it can roll two types of dice at the same time, it'll be perfect. Ooh, especially if you could add bonuses separately, like http://a.teall.info/dice/?set=1d20+5&set2=2d6+3&roll

      Keep up the good work!

      Delete
  7. Can I put a background image?
    Let me know how ^^

    ReplyDelete
    Replies
    1. You can. The best way to do this, is to set up texture for desk pane in dice_box function. Check the "three js" manual and examples to figure out how textures are being created and applied. This is good one: http://www.html5canvastutorials.com/three/html5-canvas-webgl-texture-with-three-js/

      Delete
  8. Quick reply thank you.
    But can not I create a 2d image background is a photograph?

    ReplyDelete
    Replies
    1. Actually texture is a 2d image already =) It doesn't matter that it is, photo, drawing or painting =) If I understand you correctly.

      Delete
    2. How to change background color should be white to red?
      Too difficult ...

      Delete
    3. If you need to modify any part of your source?
      I'm not sure I want to change the background color

      Delete
  9. Are you unable to change the background color?

    ReplyDelete
    Replies
    1. It is quite easy. Open dice.js, find line 348, replace 0xf0f0f0 abmient light value to, let's say, 0x606060. Next, find line 375, replace 0xffffff with your color value. This will change color of desk. If you want to change background color of selector page additionaly, find line 560, replace 0xfbfbfb with your color value.
      Also, check three.js documentation to find out how color works.
      If you'd have some more questions, write me directly to email teal.na@gmail.com.

      Delete
    2. What if you want to make the background transparent?

      Delete
  10. Any reason why it doesnt run on Firefox?

    ReplyDelete
    Replies
    1. Strange news. What version and platform do you use? I have the latest Firefox for Windows version on my PC, and it running good.

      Delete
    2. I am currently using Firefox 33.1.1 on W7, i have tried Chrome, IE11, Opera and Safari and the problem seems to be Firefox alone. I got to see "Loading libraries, please wait a bit", and then nothing.

      Delete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Ya wont run on Chrome Version 40.0.2214.91 m and FireFox 33.1

    ReplyDelete
    Replies
    1. Thanks for info. I know about such problems. I have Chrome 40.0.2214.91 m and it works fine for me. So this is obviously not up to browser, but something else. If you have a time, could you send me error message the browser has genetated? To get it on Chrome, press Ctrl-Shift-I and check 'Console' tab after the dice roller loaded.

      p.s. Note how the world has changed... Several years ago IE was a sort of crap and your work was to make your code working on 'good browsers' and damned IE =) Now everything always runs fine on IE, but not on 'good browsers'.

      Delete
  13. This is an awesome dice roller, but I have a tough question. After rolling the dice, could it be possible to re-roll just one or more of the dice by clicking on them (instead of a total reset)? The re-roll would then add to the total, like exploding dice from many popular games like Savage Worlds or Shadowrun. I also noticed on Roll20.net there is also a label that moves with their 3D dice. Is that possible here? It would be cool if when a die came up with its max number (like a 6 on a 1d6) a label would come out next to the die and say "Roll This Again!". Anyways, great job and thanks for your consideration.

    ReplyDelete
  14. Cool job this is! Would you please let me know the license of it?

    ReplyDelete
    Replies
    1. Thanks. You can assume that it has the MIT license (or that else) if you wish so. I do not love any licenses at all and prefer to simply say that it is completely free =) Good luck!

      Delete
    2. Thank you so much! I'll notice you if I make something with this. ;)

      Delete
  15. Ha! I had a cute lil error: http://imgur.com/D0hu9w7

    When a die landed (perfectly?) on its edge, it counted as a -1. If, after three seconds of rolling, proper numbers haven't landed, I wonder if it could re-roll automatically?

    Still love the tool. Thank you for creating it.

    ReplyDelete
    Replies
    1. Known issue. A die stops exactly in a way the ray tracer hits its unnumbered edge. You are right, die have to be re-rolled in such case. During next iteration of update I'm going to fix this. Thanks.

      Delete
    2. You're the best! Thanks!

      Delete
  16. Is it possible to preset the dice outcome?

    ReplyDelete
    Replies
    1. Not in this version. And I think this is a case when the game isn't worth the candle. But well, it's possible by prerender rolling process without showing it to user, - and this will take some time. Then you should catch the numbers in pre-result, rotate dice to correspond position to meet your desired outcome, and then roll them again to show the process to user. This is the only way that guarantees correct rolling.

      Delete
    2. Hi Anton, thanks for the great dice roller! I have the same question as Michael. I need to generate "winning" numbers before I can show the dice roller, because the next stage of the game depends on the results of all players.

      I generate the winning numbers for each player, write them into a database (SQL), and then I was hoping to throw the 3D dice roller preset with the numbers coming from the database. I've spent quite some with your program today, but unsuccessfully. Could you please help?

      Delete
    3. Ok. I have received a thousand requests for the roller next updates. It seems I have to find time and finish it at last. I will focus on log/chat in multiplayer version, and pre-generated rolls for single-player one.
      Do not wait for it soon, though. It will take a week as I suppose, but I have to find this week first ;)
      If you have concrete questions, feel free to write me e-mail.
      BR!

      Delete
    4. If you still interested, I got free time and did added preset result =) See update section of this post.

      Delete
  17. This comment has been removed by the author.

    ReplyDelete
  18. That your application is WONDERFUL for any online rpg narrator !! Wanted sugerir you that you added the fudge dice or fate dice, example: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTUnmsimOA_DUPuXLb8slak73JnnVtFePWMs-S-mXBDLXoYEEh0

    ReplyDelete
  19. Thank you for the great dice roller. I'm working on a Ludo game and for someone with minimal 3D knowledge, this is a lifesaver. When/if complete, I'll surely reference this on the site.

    I am thinking of making some change to the roller so that I can generate the throw vectors on the server. My question is, will the same dice result be produced for same throw vectors on different clients running on different machines, different browser?

    Thanks again for your great effort.

    ReplyDelete
    Replies
    1. Yes, the thing you are asking for is already works, you can download multiplayer version to learn how this can be done. One guy told me that he had a problem on his machine during multiplayer session, but I think this was the only case.

      The idea is in use of fixed-time render and fixed-size of board to get same roll result on all clients and all browsers. The algo of multiplayer mechanics is:
      1) When player is start rolling, client sends to server set of dice positions and velocities (the set of vectors). Animation is not performed.
      2) Server receives this set of vectors and sends it back to all clients in the room (including one who started roll) via long-polling.
      3) Clients receive the set of vectors and do animation.
      4) All players in the room see equal rolling and its result.

      Delete
  20. This is really awesome, thank you for making it!

    Could I use footage of this dice roller for my YouTube gaming account? I would use it as an intro to my videos, and I would be very happy to source you in each of the videos I would use it in.

    ReplyDelete
    Replies
    1. Thanks, Rebecca. Of course, you are welcome to use it. Good luck!

      Delete
  21. Hi.

    I dont know what's exactly what is the meaning of dice.py in source code?

    Please guide. Thanks

    ReplyDelete
    Replies
    1. dice.py is a part of a server-side code of my GAE server. I put it as an example of how to work with random.org API. It is not necessary in general cases, but if you want to use the random.org services.

      Delete
  22. Very Cool stuff! But hey, can you Keep the Grey color when we throw the dice? Because i have a friend that do RPG D&D Streams on Twitch, and to throw the dice in Live with the Chroma key it mess up when the White color appears, also an option to remove all the text. Would be great ^^

    http://www.twitch.tv/player2player/v/30819478

    https://zippy.gfycat.com/QuickFaroffIcelandgull.webm

    ReplyDelete
    Replies
    1. Hi! Can you do more detailed explain what do you mean by writing me at teal.na@gmail.com. I saw video but really confused how did you had produced this =) best regards! =)

      Delete
  23. Wow, jut wow! I had an idea how proper 3d dice roll with preset result should be done (animation precalculation and stuff) but i'm really surprised that i was able to google out an open source thingy doing just this! I mean this dicer is just simply amazing! Now i'm really curious to look at the code itself, and planning to use it as an awesome frontend display of backend calculated results.

    Нет, ну серьезно, может я преувеличиваю, но по моему вы создали потрясный кусок кода, мсье. Кудосы, поклоны и все прочее, спасибо!

    ReplyDelete
  24. Последний коммент мой, профиль как-то сходу не хуканулся.

    ReplyDelete
  25. Вернулся выразить еще одно почтение за человечески написанный код, аж читать приятно.

    ReplyDelete
    Replies
    1. На здоровье =) Если будут вопросы, можете спросить на teal.na@gmail.com Удачи ;)

      Delete
  26. we are triying to use it for a game but we cant join people or at least we dont know how, also sometimes dont create the room

    ReplyDelete
    Replies
    1. Hi =)
      Yes, I know about this problem. I will try to focus on it on my next attempt when I have free time.
      This is all up to google app engine, not me =) Seriously, maybe we have to wait while google make correct sockets... Or, anyway, I will try to rewrite socket long-pull mechanics, let's see.

      Delete
  27. This comment has been removed by the author.

    ReplyDelete
  28. Howdy -- great stuff! I can't seem to figure out which parameters to change if I wanted a two dice to "settle" in a defined spot on the screen... For example, instead of the dice flying around the screen at random angles and settling in random locations, is there a way I could define a small square area where they will end up settling? I have a game where I'd like the dice roll to be contained to a defined area so they don't interfere with the user controls, scoreboard, etc. :) Thanks!

    ReplyDelete
    Replies
    1. Hello. There are two different ways to get what you want. First one is to move rigid-body borders of box, so dice will live only within small predefined area of screen. A throw should be very accurate, with small horizontal velocity. Second way is to emulate throw before rendering, relatively shift starting coordinates and box borders, and only then render dice roll itself, and dice will stop exactly in your predefined area.

      Delete
    2. Thanks for the quick response! Trying to figure out which function handles the starting coordinates ;) -- For your second option, is that defined in the throw_dices function of the dice.js file?

      Delete
  29. This looks awesome. I want to roll dice (with letters on them instead of numbers) for a logic game, and this will do a great job.

    ReplyDelete
  30. This dice is awesome. It's the best web-based dice I ever seen. Is it possible to make three different 12d dice? Like this picture of Astrology dice: http://blog.sina.com.tw/myimages/52/308/images/14262716075415.jpg
    I'm a Tarot diviner, I think it's cool to roll the Astrology dice online. Would you give me some suggestion to modify which function? I'm trying to read the source code but it really complecated...

    ReplyDelete
    Replies
    1. Hi! This is possible, of course. You just have to replace dice face numbers (1, 2, 3 etc.) with astro-character set, see this.standart_d20_dice_face_labels in dice.js. I can make ready-to-use version for you, but it will cost you ;) -- but not so much, write me email (teal.na@gmail.com) if you are interested.

      Delete
  31. Excellent work and thank you for the source.
    http://a.teall.info/dice/?notation=1d4@1 - sometimes draws a wrong texture on the dice

    ReplyDelete
  32. Question: For multiplayer, is it possible to have a URL that directly joins a room? For example: http://a.teall.info/mdice/ROOMNAME/PLAYERNAME

    ReplyDelete
    Replies
    1. That's an idea, thanks. This week I'm going to add some improvements to current versions as you wrote this right in time =)

      Delete
  33. This is a fantastic piece of work!

    I'm trying to get use this as a base for a custom dice roller where instead of numbers we have specific images displayed on the faces, but unfortunately I'm a bit of a novice with using the canvas. I've managed to get custom text to appear on the faces but am having some issues getting images to display

    ReplyDelete
    Replies
    1. Hi. Thanks. Images are easy to display. I have no example right now, but it was somewhere on my home comp. Write me at teal.na@gmail.com. We can make a deal if you wish =)

      Delete
  34. Is it possible to change the size of the dice ?

    ReplyDelete
    Replies
    1. It's a really good job! How to do this? Because on a phone the dice is too small.

      Delete
    2. It's not possible via game itself, only if you're modifying source codes. There is variable named scale. I will see if I can adjust scale to be chosen automatically for phones or whatever with small screen.

      Delete
    3. it was that.scale ? Yes it would be nice if it's possible to ajust this params with the device. (sorry for my english)

      Delete
    4. Tried to set the scale variable on my iPhone, but it does not seem to affect the size of the dice at all. Has someone been successful in adjusting the size, and how did you do it?

      Thanks!

      Delete
  35. This comment has been removed by the author.

    ReplyDelete
  36. where is the link to download the files

    ReplyDelete
  37. I am just curious why this amazing dice script doesn't work on my mobile platform. Is the code mobile friendly or should I look for the problem in my mobile device?

    ReplyDelete
    Replies
    1. It should work. At least, it works on my phones ;) To be serious, try to check your phone's webgl support here: http://webglreport.com/, or check how it runs some of public webgl tests. The answer is somewhere there.
      p.s. thanks for "amazing" =)

      Delete
  38. hello sir, how can i set this to only 1d6 no selector, direct to the 1d6 die roll and if i continue the die will roll again

    ReplyDelete
    Replies
    1. you can use link like this: a.teall.info/dice/?notation=1d6 (but selector will be still visible). Or if you are making some project, I can prepare special version for you. Write me teal.na@gmail.com if you have questions.

      Delete
    2. http://a.teall.info/dice/?notation=1d6&roll will roll without selector. Have a good day =)

      Delete
  39. Hi great program for online D&D, I dislike the click and get random number and really like to see the dice roll.. just feels better. But some days I think the server is overloaded and we can't get into a multiplayer room together. Anyway we can host it ourselves or do you have a standalone program with multiplayer.

    ReplyDelete
  40. Beautiful dice roller!

    What would I need to do in order to run a rand() function instead of using the random.org API so that it can be run offline?

    Also, what direction would you point me in if I wanted my app to display this your dice roller and return the dice roll result?

    Thank you!

    ReplyDelete
  41. I love the visual feedback of rolling dice, but I do have one complaint.

    The way d10's are being added is sort of wrong. It's counting results of "0" as the number 0, taking the die number literally. But a d10 typically, if not always, is supposed to generate a number between 1 and 10, with 0 representing "10." This is fairly important for the d20 systems, White Wolf systems, and other popular gaming systems. Any way it could be implemented without players having to remember to add 1 to each d10 roll, or manually convert results of 0 to 10?

    ReplyDelete
  42. Hello
    Is possible to roll fudge Dices?

    ReplyDelete
  43. Hey Anton,
    thanks for these awesome dice and the mechanic behind them! As you said earlier, that your code is released under public domain, I forked it and released a more modular script, with which other people can easily add dice to their own threejs projects with the possibility to set the value after fall.

    Still, all credits go to you, thanks for creating the code!

    https://github.com/byWulf/threejs-dice

    ReplyDelete
  44. when rolling a d10 dice when you roll a 0 you get a 0 instead of a 10

    ReplyDelete
  45. This comment has been removed by the author.

    ReplyDelete
  46. Can multiple users see the same result?

    ReplyDelete
  47. Hey there Anton, I'm currently doing an internship and I've been told that I need to come up with a dice roll animation and yours fits the bill perfectly. Firstly, do I have permission to use your code? and secondly can you tell me what the teal.js file is for? I've removed all dependency to that file as I don't understand it but I still don't know what to do with all instances of $t.dice...
    Can you please tell me what that is?

    ReplyDelete
    Replies
    1. Hi. You can use it freely. Donation is appreciated. Link on original page is recommended =)
      teal.js is a set of my own wrapper-functions over plain js. You can cut almost half of it without any sorrow.
      Mail directly to teal.na@gmail.com if you meet troubles. GL

      Delete
  48. Hi Anton, I am using dice roller over a background video, but dice canvas shows a white background. How can I make background transparent instead of that white color? Could you please help me?

    ReplyDelete
  49. Anton, I don't know how easy this is, or if it's even possible (not familiar with all the libraries you use), but the physics just seem to be a tad sticky. More often than not, the dice seems to hit the surface and stick, causing it to heavily slow down and even stop spinning. Almost as if the dice and table are covered in a thin layer of... well, something sticky. I imagine changing something like this is out of the scope of your work, but just in case it's not, I really think if the physics of the table or the dice were tweaked to be less sticky, it would be a lot better, even if it's already fine. Then again, I don't know how much random.org has to do with the final roll. If you're getting the final roll, and the physics engine is just getting it to the number, then I guess we're out of luck.
    Thanks for reading!

    ReplyDelete
  50. Hello, I'd like to use your dice roller for my animation. Do I have your permission to use it?

    ReplyDelete
  51. I found a bug. If result.length == 1 and notation.constant == true, the constant is not actually added to the single die to produce a sum. For the input 'd6+1' where a '6' is rolled, this results in the unexpected output '6 +1' (expected output: '6 +1 = 7')

    This can be fixed by adding "|| notation.constant)" to the if statement on line 61 of main.js. Confirmed working locally without console errors. Thanks!

    ReplyDelete
    Replies
    1. I made another couple fixes, which addressed a few behaviors. On Chrome and Opera, preventDefault is ignored for the touchstart event listener. On my devices this caused a doubletap. There's a 'passive' option supported by those browsers to prevent this.

      Once I implemented this, single taps stopped registering while swipes were fine. Turns out there's a function in main.js that's missing the touchend event listener. Adding the missing string gave me responsive single taps.

      For my personal use, I've added code to POST roll results to my Discord channel using a webhook. I'm starting a tabletop RPG campaign and we all live pretty far from each other, which makes online play necessary. This is a much more fun and tactile way for us to resolve dicerolls, and no serverside code for me to write!

      Delete
    2. Hi, would I be able to get a copy of what you've done and how on incorporating the rolls into discord? We also have an RPG game we play and it would be very useful for us! Thanks! steeldragon2k@gmail.com

      Delete
  52. I didnt understand dice.py in 3d dice roller. how to add to my dotnet core mvc application please help me inthat

    ReplyDelete
    Replies
    1. dice.py is a server-side python code for Google App Engine. It contains RPC routine for random-generator call. You can skip this file, it has no use by now =)

      Delete
  53. This comment has been removed by the author.

    ReplyDelete
  54. Would love to be able to roll the dice on a see-through background, but cannot figure how to make this scene have a transparent background. I have made the canvas transparent, added alpha: true to WebGLRenderer, setClearColor to alpha: 0, and set the object to near-transparent. Still the background stays opaque white. What am I missing?

    ReplyDelete
  55. After a lot of things tried, the real problem is controlling the transparency of the underlying UIWebView on iPhone - so nothing for this forum, really.

    ReplyDelete
  56. First of all, fantastic project, it looks great!

    I am trying to add a small animation to the dice after the roll is complete. In the after_roll function I am currently experimenting with changing the rotation variables of the dices so the numbers are completely straight. However I seem to be only able to rotate the dices around their own axis, not around the world axis. How can I do this? I'm a complete noob at three.js

    ReplyDelete
  57. Some problem with the probabilities here. In short, the dice rolls seem to provide too good results. As a proof case, try rolling 2d10 and see how long it takes you to get a result that sums to less than 10.

    Is the roller on the web page using random.org results or the javascript random function? Can anyone explain how the starting random numbers are converted to the end result? The way different vectors are multiplied is a bit opaque.

    ReplyDelete
  58. The dice is first rolled with the physics enginge behind the scenes, until it has finished. Now the system nows, what side is upside and swaps the textures of all sides so that the random generated number is up. Then the same dice roll is executed again and this time shown to the fronend.

    For the randomness: He stated right at the beginning: "It also uses random.org to produce true random numbers (from atmospheric noise)."

    ReplyDelete
  59. I just found some problems trying to create a multiplayer room. Is there something wrong? It never stop loading once i try to create a room. Thank you for creating this cool place to roll dices!

    ReplyDelete
  60. Noticed the multiplayer room crashes when trying to make a room.

    ReplyDelete
  61. The problem is acknowledged, I looking for time to manage a fix.

    ReplyDelete
  62. Trying fhe option to roll a particular preset i find a little problem.

    If it is rolled a d100 or a d100 + d10 and for the first dice the preset input is 9 the dice roll not accept the preset in most of th e occasion.

    I have tried:

    d100 @ 9
    d100 @ 90
    d100 + d10 @ 9 5
    d100 + d10 @ 90 5
    but the result for the first dice is not 9 but it always show 00

    ReplyDelete
  63. Hey Anton, playing in March 2018 - any updates on the multiplayer fix? Are you still working on it? Thanks

    ReplyDelete
    Replies
    1. Hi. Still working on it, sorry for a long time to get rid of this.

      Delete
    2. Hello Anton! I'm a great fan of your dice roller. I was a little sad thinking my team wouldn could play with this tool online, but you're back! :D
      I just want to suggest, or ask, to fix the multiplayer bug.. if it had a self database, wouldn't it work?
      I have an account for a website, a server with SQL, maybe if i could install the dice room in my server, making a db, wouldn't be better?
      Thanks a lot for your return! <3

      Delete
  64. There is a bug, if we choose result of throw for D4, there is sometime an graphical error on dice... It deos't show the good faces...
    Just add "[2, 2, 2, 2]" in callback in beforeThrow (like said in comment), change 4D6 by 4D4 and start... you will see the bug.

    Can you slove it?!!

    ReplyDelete
    Replies
    1. This is known issue, not easy to fix. I will move on it after fixing multiplayer bugs.

      Delete
    2. ok, I found other bug : change the hexa of "this.desk_color" don't change anything :'(

      Thx to notify me when fixed, it's great animation tool !!

      Delete
    3. there is some warning too, when load the page :

      THREE.WebGLShader: Shader couldn't compile.
      three.min.js:658:259
      THREE.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS false gl.getProgramInfoLog Must have an compiled fragment shader attached. 0:2(12): warning: extension `GL_ARB_gpu_shader5' unsupported in vertex shader
      0:2(12): warning: extension `GL_ARB_gpu_shader5' unsupported in fragment shader
      0:110(142): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
      0:115(137): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
      0:120(137): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
      0:125(137): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
      0:130(137): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
      0:135(137): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
      0:140(137): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
      0:145(137): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
      0:150(137): error: sampler arrays indexed with non-constant expressions is forbidden in GLSL 1.30 and later
      three.min.js:647:413

      Delete
  65. Hello Anton!

    Would and incentive $ help to fix the issue? Our RPG team would like to continue using this amazing tool!

    ReplyDelete
  66. Hello! Still workong on this?

    ReplyDelete
  67. This comment has been removed by the author.

    ReplyDelete

  68. I love your post. So can I add images(cat,dog,bird,..) into dice instead of number(1,2,3...). Can you help me.

    ReplyDelete
  69. how can i manage width and height of dice container?

    ReplyDelete
  70. Hi Anton, great work on this simulator. I would like to add sound (shake and rolling of dice) to the script. Any suggestions on how I may accomplish this ? Will it be necessary for me to create a member function for dice in order to make this happen ?

    ReplyDelete
  71. Hi Anton,
    I'm looking to implement a game board as well (something like catan/hex tiles maybe?)

    Would you still recommend using webgl these days, or know of any alternatives that might work better?

    thanks!

    ReplyDelete
  72. This comment has been removed by the author.

    ReplyDelete
  73. Great Job! You would add the support to create new char, for exemple roll 4d6 and drop minor value.
    Ex.: 6 + 4 + 3 + 1 (drop) = 13.
    Thank You

    ReplyDelete
  74. Write me teal.na@gmail.com and we will see ;)

    ReplyDelete
  75. Hi, best online dice type thing, well done. Would it be possible to have custom dice so that you can put an instruction or question on each side of the dice, such as 'Who was the main character?" or, "Draw the character's weapon." I would love to use it for activities in the classroom.

    thanks.

    ReplyDelete
  76. Have you given up on multiplayer??

    ReplyDelete
  77. This particular is usually apparently essential and moreover outstanding truth along with for sure fair-minded and moreover admittedly useful My business is looking to find in advance designed for this specific useful stuffs… psychic reading

    ReplyDelete
  78. Thank you so much for sharing your talent and ideas with us!! I don't have any little ones at home anymore, but we have some friends coming over for the holidays. These will be perfect!! Thanks again! click this check out this site For dadu online

    ReplyDelete
  79. Hello, thanks for your work and thanks for making it available for the public. It's guys like you that make internet awesome !

    ReplyDelete
  80. Love the app! Just noticed an issue, when rolling 12d10, the 0 faces are being treated as 0 and not 10.

    ReplyDelete
  81. This comment has been removed by the author.

    ReplyDelete
  82. A great dice roller - I dont know if it would be possible for you to make a manuel /guide how to put it on a homepage. In with folder goes the different files... would really like to have a go at it but have only made normal html stuff until now... love everything about this dice roller.

    ReplyDelete
    Replies
    1. Hi! You won't believe but it's just a plain html page =) No server-side code. You may write me directly (teal.na@gmail.com) if you have troubles with it.

      Delete
    2. :-D WOW will have al look at it over the summer and will get back to you with questions or the result ;-) thanks you very much !!!

      Delete
  83. Hi,

    I'm currently working on a online dnd battle map and is was wondering if it would be oke if I incorporated your dice roller? (I'm also gone release the project on github at some point)

    ReplyDelete
    Replies
    1. Hey Studiobram u still working on dnd project? What language are you using? Can you send me you contact. I also workind in a dnd project.

      Delete
    2. My email is rogerio.francis@gmail.com. Mail me Studiobram.

      Delete
  84. Hi, this is the most beautiful dice thrower! I was wondering would it be possible to change color of dice? To throw different colored cide? Like 2 black d6 one red one blue two white...that would be awesome for roll and write games

    ReplyDelete
  85. When i added callback result, i've found the results of some dice did not get face correctly. It did not always but sometimes. I dont know how to detect it. Can you help me please?

    ReplyDelete
  86. Hey @Anton Natarov any change this awesome application would be released on GitHub?

    ReplyDelete
  87. I downloaded the code to hide the "sum" box and using it the classroom to practice 3rd grade math. Thank you very much for making it available to us!

    ReplyDelete
    Replies
    1. You are welcome! I'm always happy to help for educational purposes. Used to be a teacher of some kind =)

      Delete
    2. Hello :)
      Could you help me to hide the sum box?
      Thank you in advance!

      Delete
    3. Hi Samuel! In function after_roll of main.js just comment out or delete this line:
      info_div.style.display = 'inline-block';
      or the one right above it. Sum will not be shown.
      I'm not going to add this feature as a url parameter for the dice roller for some reasons.
      Hope this will help.

      Delete
  88. Love this die roller. Have noticed one odd problem though: On an Android device (both my Samsung Galaxy Tab S4 and OnePlus 7 Pro) regardless if I use Chrome or Firefox on either, if I clear the current dice and then tap a single die it increments by 2. It does this with all dice and every tap is always an increment of 2. I've tried tapping faster, using a stylus, etc. Nothing changes.

    ReplyDelete
  89. Buy youtube comment likes for your video on this site https://soclikes.com/

    ReplyDelete
  90. I'm trying to log into the multiplayer but it's not letting me. Not even after logging in. Please advise as your dice roller is perfect for the games I'm running. It is beautiful and simple :)

    ReplyDelete
    Replies
    1. Thank you for your report and response.
      Yes, from time to time server is unstable due of too many people. I added some additional workarounds, hope this help.
      I'm planning to improve responsibility and total performance of the site, but no ETA for this.

      Delete
  91. How are you implementing the roll animation?

    ReplyDelete
  92. I just rolled 0 and 10 and it came up as 10. Shouldn't it read as 100?

    ReplyDelete
    Replies
    1. Sorry, that was a typo - 0 on the d10 and 00 on the percentile added to 10 instead of 100.

      Delete
  93. It is very useful thing! Thank you for making it. Do you want to share your video on tiktok too? I read this post https://expressdigest.com/tiktok-followers-why-would-you-want-to-buy-them-for-your-profile-right-now/ and know how to get tiktok followers. It seems to be very easy

    ReplyDelete
  94. Hi, are you planning to make the dices available under https ? We would like to integrate them in an iframe which part of an https website. Thank you for your wonderful effort.

    ReplyDelete
  95. Hey, this is awesome... I'm no programmer though, what I would love (and I'm sure many others out there would too) be able to incorporate this into a twitch command for my D&D streams. Really I would only want to roll the D20, and to have it roll across the screen with a transparent background. I think I can figure out the commands within the twitch bots, thinking something similar to the !8ball commands that exists. To have the visual with it would be amazing though.

    ReplyDelete
  96. Thanks for share this is my web site;
    https://torrentoyunum.com

    ReplyDelete
  97. Thanks for share this is my web site;
    torrent oyun

    ReplyDelete
  98. Thank you for this video! I think you should promote it and get many likes and comments for it. Just use this site https://viplikes.net/ to buy likes and comments

    ReplyDelete
  99. Generally a great service https://krootez.com/ about instagram. There is everything you need. I always order followers, likes and views right away. Very comfortably.

    ReplyDelete
  100. Türkiye'nin en güvenli ve en hızlı torrent oyun sitesi olan https://torrentoyunum.com herkes davetlidir.

    ReplyDelete
  101. Hi, I accidentally commented on the multiplayer roller—which is awesome too! But I’m interested in the single player roller!
    Can script/animation play on top of a website page? I am creating a site for a specific new tabletop rpg. I’m doing it for free, for a fun yet huge project. I’m disabled and stuck at home, so haven’t got much else to do. LOL
    Anyway, players will be able to go to the site (and an app eventually), and create their character by choosing gender, species, culture, attributes, skills, inventory, etc. Once done the site will show a completed character sheet. I’d love for it to feel like sitting at a table with your character sheet on the table, and rolling the dice on top of the character sheet.
    Is this possible with your code?
    Thank you so much!
    It’s just amazing!
    SMILES

    ReplyDelete
    Replies
    1. As I said, yep, you can make the canvas transparent and place it atop of your character sheet.

      Delete
    2. Any instruction as to how one does this?

      Delete
    3. can you provide directions to how one would so this?

      Delete
  102. I am writing a backgammon game and part of my objective is to make the play more realistic and fun. All of the online backgammon games are really ugly. I would like to talk with you about using a version of this code in the app. Having the dice roll realistically would make the game so much more fun.

    ReplyDelete
    Replies
    1. Hi! Write me on my email teal.na@gmail.com if you have specific questions or request.

      Delete
  103. Amazing and wonderful Dice roller! I am a musician that is experimenting with random notes. So far before finding your roller I used one physical dodecahedron transferring the numbers to note values. I was wondering if I could change the face numbers to represent letters, i.e. 1 = A, 2 = B, etc. This would certainly streamline my process.
    Thank you

    ReplyDelete
  104. Okay! Since writing I poked around in the "dice.js" and found where I was able to change the face values to read as note letters. Now I would like to be able to present the results as the note letter instead of the numerical value in the final report. Any help would be greatly appreciated. This is a wonderful app! Thank you!

    ReplyDelete
  105. Bugün için maksimum sayıda yorum oluşturdunuz, lütfen yarın tekrar deneyin.

    ReplyDelete
  106. I have created a font that has dots instead of numbers, but how would I import it into your code. If you can help me modify this to roll six sided dice that look like dice, I can afford a substantial donation.

    ReplyDelete
  107. Geoff Swenson geewhizbang@gmail.com

    ReplyDelete
  108. is there a way to remove the grey output (ie 8 1 8 7 = 24)?

    ReplyDelete
  109. haven't seen much activity lately, hopefully all is well with you sir.

    I was hoping you could tell me how i can get the dice annotation "dice/?notation=3d8&roll" to work on the standalone?

    ReplyDelete
  110. https://codecanyon.net/item/rolling-the-dices-multipurpose-3d-dices-for-games/44582835

    ReplyDelete