Anim8or Community

General Category => General Anim8or Forum => Topic started by: Raxx on April 08, 2014, 02:24:49 pm

Title: Anim8or 3D Viewer
Post by: Raxx on April 08, 2014, 02:24:49 pm
Anim8or 3D Viewer


3D and...more?


Good day ladies and gentlemen. I present to you the first release of the Anim8or 3D Viewer. This is an encompassing forum mod that not only lets you embed Anim8or attachments directly in your post, but also images, videos, and ASL.


Usage

.an8 Attachments
If you attach a .an8 file and its textures (if applicable), you can embed it directly in the post using this BBC:
Code: [Select]
[attach <width> <height> <options={params}>]<index>[/attach]
<index>
This is the attachment number (counting down the list of attachments for that message, starting with index 1). If you're embedding the first attachment in the list, the index would be 1. If you want to embed the 4th attachment, the index would be 4.

<width> and <height>
The width and height use the standard width=# height=# syntax within the attach tag. If one or the other is missing, the default values will be used instead.

<options={params}>
Optional parameters for when embedding .an8 files. The syntax for the parameters is something like this {parameter: value, parameter: value, ...}. You can include one, some, all ,or none of the following:

IMPORTANT: All hex colors and background (none/url/color) data must be enclosed in quotes. All other values (booleans and integers) must NOT be enclosed in quotes. Note the camelcase (capitalized letters within the parameter name). Eventually I'll make it case-insensitive, but for now please follow it strictly.

Image Attachments
If you wish to embed an image attachment, you can embed it the same way as .an8 attachments, except without the "options" parameter.
The width and height will be scaled accordingly if one or the other is missing. If no width or height is set, the width will be set to the default (and height scaled).

An image attachment would look something like this, in code:
Code: [Select]
[attach width=640 height=480]1[/attach]
Video Attachments
If you want to attach a video file, you can upload flv, mp4, ogg/ogv, and/or webm. If you need a program to convert to those formats, try the Freemake Video Converter (http://www.freemake.com/free_video_converter/) (opt out of the addon software during installation--it's an excellent program otherwise), or another converter of your choosing. Attaching and embedding video files is done exactly the same way as with .an8 attachments, except with different options:


An example of the video attachment code, with options, would be:
Code: [Select]
[attach width=640 height=480 options={controls:false, loop:true, autoplay:false}]1[/attach]
If you choose mp4/ogg/webm, consider uploading all of them into the same post. Those use HTML5 video embedding, and one format may not be compatible with a browser, but another will. I made it so that it automatically sources all videos of the same name, of those formats, into the same video so that the browser can fallback to whichever one it's compatible with. You'll need modern versions of Internet Explorer, FireFox, or Chrome that support HTML5 video playback.

Flv (flash video) could be your best bet for universal compatibility. Granted, some (mobile) browsers/operating systems don't support flash, but otherwise it's widely supported. If you choose flv, include both the width and the height in the parameters since there is no automatic aspect ratio retention.

.a8s Attachments
Attaching and embedding .a8s files is the same as with the others, except that there are no parameters:
Code: [Select]
[attach]1[/attach]
What this does is embed the content of the .a8s file into your post with syntax highlighting and line numbering.

ASL Snippets
You can copy and paste ASL directly into your post and it'll be syntax highlighted just like with .a8s attachments. Make sure you put the ASL text in between asl tags, like so:
Code: [Select]
[asl title="optional"]ASL goes here[/asl]
The title is optional, and if excluded then "ASL Snippet" will be used instead.


Examples


Code: [Select]
[attach]2[/attach]


Code: [Select]
[attach width=720 height=360 options={shading:0, wireColor:"#fff", uiColor:"#000000", uiShadow:false, background:"none"}]2[/attach]


Code: [Select]
[attach options={shading:0, locked:true, background:"#666699"}]2[/attach]


Code: [Select]
[attach options={shading:0, autorotation:false, background:"http://www.petslovers.info/wp-content/uploads/2014/03/kittens_cute_kitten.jpg"}]2[/attach]

Code: [Select]
[attach width=400]1[/attach]

Code: [Select]
[attach options={controls:false, autoplay:true}]10[/attach]


Hiding Attachments


You might have noticed that when you edit or make a new post, the attachments have a new option next to them labeled "Do Not List". When checked, that attachment will no longer show up on the list of attachments that gets displayed under that message. This post is an example of all of the attachments being hidden.


Notes About The 3D Viewer


The 3D viewer is still in its rough initial stages. Here are some things to keep in mind:

Something cool: You can view these in mobile browsers that support WebGL (http://caniuse.com/webgl). Looks awesome in Opera Browser for Android ;)

Summary


I intend on adding more features over time, eventually allowing everything to be viewed in the 3D viewer, from objects to scenes.

If you have bug reports, suggestions, or other feedback, the place to do so is in this post or via pm. If it's a 3D viewer bug report, please provide your browser (and version), the offending .an8 file and related textures, and specific information about what you're experiencing.

Thanks and enjoy the update!
Title: Re: New Embeddable Content!
Post by: Steve on April 09, 2014, 01:13:02 am
Pretty darn cool, Raxx!
Title: Re: Anim8or 3D Viewer
Post by: Raxx on April 09, 2014, 06:46:55 am
Thanks Steve!
Title: Re: Anim8or 3D Viewer
Post by: kreator on April 09, 2014, 03:58:36 pm
Are you Using Chrome frame from within IE?
Title: Re: Anim8or 3D Viewer
Post by: Claude on April 09, 2014, 04:12:12 pm
Great work, Raxx.

Are you using three.js and your own An8 javascript parser as
planned ?
Title: Re: Anim8or 3D Viewer
Post by: Raxx on April 09, 2014, 04:40:55 pm
kreator, I'm not using Chrome Frame (which is being discontinued). Eventually I'll get it fully compatible with the latest IE (or the latest IE will become fully compatible with this--whichever comes first). For some reason embedded images aren't showing up within IE either. *sigh*

Claude, yep! I even managed to do a (tiny) contribution to three.js on github. What I made was a loader that directly interfaces with Three.js, so it's just as fast to load .an8 files as it is with their other formats (like JSON or DAE). Then I made a script that interfaces with that loader and webpages, which generates the viewer elements and makes it so that you can embed any number of files into any html element using a syntax like:
Code: [Select]
var viewer = new An8Viewer('target', 'file', { params });
Where 'target' is the ID of the element (usually a div), 'file' is the url to the .an8 file, and { params } are the parameters, same as described in the first post.

The real nightmare was making the SMF mod. It's an actual mod, so that technically you can one-click install it in any forum and it'll work automagically. Ugh, I spent two days trying to wrangle the regex matching for making actual bbc code matching (like uicolor=#eee directly in the tag instead of having it in the parameters as {uiColor: "#eee"}. But SMF's custom BBC Code regex match filtering always caused unpredictable results even though the regex patterns were correct. Long story short(er), I stuck with just using the parameters directly instead of trying to match them.

I'll be releasing the loader, viewer, and mod publicly for use by anyone once I'm comfortable with their levels of progress.
Title: Re: Anim8or 3D Viewer
Post by: ronaldefarmer on April 09, 2014, 05:43:39 pm
Raxx,

This is amazing!! Will subdivision eventually be supported in the viewer?

Title: Re: Anim8or 3D Viewer
Post by: captaindrewi on April 09, 2014, 06:09:31 pm

Code: [Select]
[attach <width> <height> <an8={params}>]<1>[/attach] ??? thought i would try it out.
Title: Re: Anim8or 3D Viewer
Post by: Raxx on April 09, 2014, 06:50:53 pm
ronaldefarmer, yup :)

captaindrewi, I fixed it for ya, and added some example parameters (they are optional). Take a look at it and play around with it if you want. Also, watch out for flipped normals. Backfaces are culled, so you can only see whatever side the normal is facing.

I never showed it in my examples, but files with multiple objects (as in, actual Anim8or "objects", not shapes in objects) have a navigation feature to them and can be viewed separately by clicking the arrows

Title: Re: Anim8or 3D Viewer
Post by: neirao on April 09, 2014, 06:59:32 pm
Super COoll!
Title: Re: Anim8or 3D Viewer
Post by: Claude on April 09, 2014, 08:14:45 pm
As far as features are concerned,the arrow to skip
through objects is well thought,but my personal best
is the full screen.I'm always zoomed in and I hate
zooming in and out, or using the slider.
Title: Re: Anim8or 3D Viewer
Post by: bamman62 on April 10, 2014, 06:26:47 am
Testing this magic.
Title: Re: Anim8or 3D Viewer
Post by: kreator on April 10, 2014, 06:58:01 pm


working?


Title: Re: Anim8or 3D Viewer
Post by: ronaldefarmer on April 11, 2014, 04:20:15 am
Trying it out.



Raxx, this is very cool and amazing! Excellent work!
Title: Re: Anim8or 3D Viewer
Post by: Raxx on April 11, 2014, 06:10:10 am
Lookin' good guys :)

Kreator, seems like your Tilly is disagreeing with the viewer. [edit] Turns out it's the grouped shapes. Groups aren't supported yet.
Title: Re: Anim8or 3D Viewer
Post by: lppena on April 11, 2014, 08:50:51 am
Very cool! Thanks Raxx. Leroy
Title: Re: Anim8or 3D Viewer
Post by: kreator on April 11, 2014, 04:17:48 pm
trying another, ungrouped,

Nope... no go...
too big a file at 4meg keep getting error!

Quote
Your attachment couldn't be saved. This might happen because it took too long to upload or the file is bigger than the server will allow.

Please consult your server administrator for more information.
seems the stated 9999K  is incorrect for the max server allowance, or the timeout needs increasing.

Just out of curiosity can Zip files containing all necessary textures be used at some stage, which Verold use.Their system is built around Three.js
Title: Re: Anim8or 3D Viewer
Post by: Raxx on April 11, 2014, 05:12:14 pm
kreator, yeah the server has a lot of limitations in place. Ever wonder why oftentimes you get a "can't connect to database" error, yet the rest of the website runs fine? The host only allows ten simultaneous connections to the mysql database :-X

The attachment problem is a hurdle I ran into before as well, wanting to use a pre-subdivided robin for the examples (only 2.4mb). File uploads are being limited to 2mb by the webhost. I emailed Steve about it, no guarantees though.

I would like to use zip files. The zip file feature isn't three.js related, but rather it's just a server-side processing issue. I didn't implement it yet because there are a lot more factors that come into play. [edit] I'm looking at client-side alternatives now[/edit]. Rest assured, it is on my to-do list!
Title: Re: Anim8or 3D Viewer
Post by: kreator on April 11, 2014, 07:55:14 pm
transporter



No textures show up with the object, Transparency seems not to work too well
Title: Re: Anim8or 3D Viewer
Post by: Raxx on April 11, 2014, 08:31:39 pm
Hi kreator, it seems the file had no textures associated with it (there were no texture blocks in the .an8 file, just pointers to the textures in the materials). Did you save it after it notified you that textures were missing? Also make sure you upload the textures in the same post as well.

I fixed the transparency issue, should be working now. Depending on your browser, you may have to force the refresh to clear the cache.
Title: Re: Anim8or 3D Viewer
Post by: kreator on April 11, 2014, 09:19:50 pm
I`m a doughnut! Yeah forgot to add the textures to the post now they are showing , transparency looks good now,apart from the back of the Cab which has no window .

Title: Re: Anim8or 3D Viewer
Post by: Raxx on April 11, 2014, 09:58:17 pm
Glad you got it to work :)

The see-through walls are the result of the backface culling. Your truck cab is composed of single-sided polygons, so your cab walls are see-through inside. I just added an option to the parameters that will disable the backface culling for materials (note: this can lead to a performance decrease on large files). Later, when I implement Anim8or's native two-sided materials, that will override it whenever applicable.

So in the list of options in an8={}, add "doubleSided: true" if you need it. Default is false.
Title: Re: Anim8or 3D Viewer
Post by: ronaldefarmer on April 12, 2014, 05:21:41 am
Trying a larger file.


Title: Re: Anim8or 3D Viewer
Post by: Raxx on April 12, 2014, 06:58:59 am
The fish almost looks animated, being rotated like that ;)

Steve was able to increase the maximum upload size, so there should be no problems posting up to the 9999kb file limit!
Title: Re: Anim8or 3D Viewer
Post by: kreator on April 12, 2014, 07:22:34 am
Hope this one works my Tilly was S/Divided now single mesh....

 


its not having it with the bodywork texture, this is v2.0 version have merged various bits so that the bodywork is seperate entity, but refuses to play ball. The canvas back is ok though...strange.
Title: Re: Anim8or 3D Viewer
Post by: Raxx on April 12, 2014, 07:31:17 am
Hi kreator, looks like Tilly's a good one for finding bugs ;) Textures are having problems, but it's not your file's fault. I'll have it fixed by tomorrow!
Title: Re: Anim8or 3D Viewer
Post by: ronaldefarmer on April 13, 2014, 11:05:20 pm
Another one.


Title: Re: Anim8or 3D Viewer
Post by: Raxx on April 28, 2014, 03:25:31 am
Alright, I added .mp4 embeddable attachments.

The .mp4 file must have h.264 encoding. If you need a program to convert to that format, try the Freemake Video Converter (http://www.freemake.com/free_video_converter/) (opt out of the addon software during installation--it's an excellent program otherwise), or HandBrake (http://www.videohelp.com/tools/HandBrake), or another converter of your choosing. Attaching and embedding .mp4 files is done exactly the same way as with images.

You'll need modern versions of Internet Explorer, FireFox, or Chrome that support HTML5 video playback.

Code: [Select]
[attach]1[/attach]
Title: Re: Anim8or 3D Viewer
Post by: Raxx on April 30, 2014, 11:49:39 pm
Added support for ogv/ogg/webm, and flv. If you choose an ogv/ogg/webm/mp4, you can upload all of those formats of the same video (give them the same name) into the post, so that when embedding it, the browser can fallback to whatever it's compatible with. Naturally, you'll hit the maximum upload limit faster. Consider using flv otherwise.

Flv example:
Code: [Select]
[attach width=608 height=368]1[/attach]
Title: Re: Anim8or 3D Viewer
Post by: davdud101 on May 02, 2014, 10:09:21 pm
had trouble picking my jaw up off the floor, Raxx.

really, just incredible
Title: Re: Anim8or 3D Viewer
Post by: Raxx on May 02, 2014, 11:59:40 pm
CrashDrive, glad it works! Rock (the dog) is an old character I made for a mobile game that didn't make it. Sadly, none of it's new. I'm hoping to be able to put up some fresh work later though :)

davdud101, thanks!

I'm working on animation for the 3D viewer now, we'll see how far I get with it...
Title: Re: Anim8or 3D Viewer
Post by: Raxx on May 04, 2014, 10:10:52 pm
Alright, so I decided to flesh out some of the other viewer elements first.

Firstly, I added .a8s embedded support. What this does is embed the contents of a .a8s file directly within the post with syntax highlighting.

I also added the asl tags so that you can embed ASL just by copying and pasting into those tags. The syntax would be
Code: [Select]
[asl title="optional"]ASL Script[/asl]
If a title isn't given, "ASL Snippet" is used instead. Please note that the syntax highlighter isn't very mature yet, and will be fleshed out over time.

Finally, I added options for the video attachments. You can now set to enable/disable the controls, autoplay, or loop.

Related to that, I'm replacing "an8={}" for the more universal "options={}". Please use that instead (first post will be updated to reflect this).

Examples
.a8s Attachment:
Code: [Select]
[attach]1[/attach]

ASL code snippet:
Code: [Select]
[asl]ASL Text (not shown in full here)[/asl]
ASL Snippet
  1. /**
  2.  * @author Randall Bezant (aka Raxx)
  3.  * @attribution "Fast, Minimum Storage Ray/Triangle Intersection" by Tomas Moller and Ben Trumbore:
  4.  * http://www.cs.virginia.edu/~gfx/Courses/2003/ImageSynthesis/papers/Acceleration/Fast%20MinimumStorage%20RayTriangle%20Intersection.pdf
  5.  *
  6.  * @param <point3> $v0, $v1, $v2 - The three points of the colliding triangle in clockwise direction
  7.  * @param <point3> $rSource - Ray source point
  8.  * @param <point3> $rDir - Ray Direction
  9.  *
  10.  * @return point2 - If collision, returns the length along the ray direction (known as t),
  11.  * and collided indicator of 1 for a value of (1, t). Otherwise returns (0, 0). If t is negative,
  12.  * that means it collided in the opposite direction of the specified ray direction, behind the
  13.  * ray source.
  14.  *
  15.  * Single-sided ray/triangle intersection method. To get the point of intersection on the triangle,
  16.  * use this formula:
  17.  *
  18.  * pI = p + t*d
  19.  *
  20.  * pI: Point of intersection (point3)
  21.  * p: Ray source (point3)
  22.  * t: length along ray (float)
  23.  * d: Ray direction (point3)
  24.  *
  25. */
  26. point2 $rayTriangleIntersect (point3 $V0, point3 $V1, point3 $V2, point3 $rSource, point3 $rDir)
  27. {
  28. // Determinant
  29. point3 $pvec, $tvec, $qvec, $edge1, $edge2;
  30. float $determinant, $triangleV, $triangleU;
  31.  
  32. $edge1 = $V1 - $V0;
  33. $edge2 = $V2 - $V0;
  34.  
  35. $pvec = cross($rDir, $edge2);
  36. $determinant = dot($edge1, $pvec);
  37.  
  38. if ($determinant < 0.000001)
  39. return (0,0);
  40.  
  41. $tvec = $rSource - $V0;
  42. $triangleU = dot($tvec, $pvec);
  43.  
  44. if($triangleU < 0.0 || $triangleU > $determinant)
  45. return (0,0);
  46.  
  47. $qvec = cross($tvec, $edge1);
  48. $triangleV = dot($rDir, $qvec);
  49.  
  50. if ($triangleV < 0.0 || $triangleU + $triangleV > $determinant)
  51. return (0,0);
  52.  
  53. return (1, dot($edge2, $qvec) / $determinant);
  54.  
  55. }


Title: Re: Anim8or 3D Viewer
Post by: ianross on May 06, 2014, 04:48:42 pm
This is great!!!
Title: Re: Anim8or 3D Viewer
Post by: siragin on July 12, 2014, 10:30:11 pm
Hello, I was hoping that someone would be able to help me create my own 3d viewer. I wanted to make one for my website to show off my 3d models but I can;t get it to work completely just yet. I viewed example codes on the internet and even downloaded the source code. I can get my model to load in the scene but that is about all. I can;t load textures, add light or get the camera movement that I want. Just wanted to know if someone can help me build one. I don't need one with a lot of fancy features. It can be pretty basic.
Title: Re: Anim8or 3D Viewer
Post by: Deepthought on July 23, 2014, 11:58:44 pm
*jaw drops*
can it display figures or play sequences?
Title: Re: Anim8or 3D Viewer
Post by: Raxx on July 25, 2014, 07:57:55 pm
siragin, what's your approach? The three.js source code has plenty of examples in all areas that you can use, along with its API documentation.

Deepthought, no figures, sequences, or scenes just yet. I've decided to wait and see where Steve takes it before I begin implementation in those areas.
Title: Re: Anim8or 3D Viewer
Post by: siragin on July 28, 2014, 09:57:49 pm
I'm looking for a basic obj loader that has a transparent background so I can use the background from the website it will be on. I have tried to study the examples that comes with the three.js source code, butI only have gotten as far as loading the model. The camera is too close to the model or the model is too big. I only know how to import one full model. An obj with multiple mesh will not show all of the mesh just one. There is no lights of environment in the scene. Even if I copy a light setup from an example it will not display. They must all be code dependent. Plus my model has not texture.
Title: Re: Anim8or 3D Viewer
Post by: MvGulik on October 21, 2014, 01:18:14 pm
A option the stop the model rendering would not be a bad addition.
- As it can be a bit CPU heavy at times (for some).
- Rendering currently persists when the render-box is off screen.
* Reloading a page works, but its not really a nice workaround.

Other than that, its a nice forum feature. :)
Title: Re: Anim8or 3D Viewer
Post by: johnar on October 21, 2014, 11:42:04 pm
Good point MvGulik.
 Very relevant in my case. Its not the time thing so much for me, but the data usage. (expensive data prices here)
 I used to turn images off in web browser, but thats a bit of a shame.
 It would be nice to have a better option for stopping rendering.
 Also agree that its a nice forum feature. (really cool actually. Thumbs up Raxx)
Title: Re: Anim8or 3D Viewer
Post by: kreator on December 05, 2014, 07:33:56 am
CrashDrive:
 If you look at earlier posts The host has limited uploads to 2 meg I don`t know if it was resolved later
Title: Re: Anim8or 3D Viewer
Post by: civic71 on March 09, 2015, 12:04:38 pm
Fantastic
Title: Re: Anim8or 3D Viewer
Post by: civic71 on March 09, 2015, 05:04:01 pm
test pepita

Title: Re: Anim8or 3D Viewer
Post by: civic71 on December 25, 2015, 10:41:43 pm
Hi, this topic introduced me to Three.js and for this I thank Raxx.
After several tests with Three.js I realized a 2d game .

Then I wanted to try the files an8, having Anim8or 3D Viewer modified slightly, to better understand how it worked.
Here I made for Christmas this demo of a mini crib :http://gamequiz.altervista.org/files/html5/Presepio/index.php?Text=Anim8or.com (http://gamequiz.altervista.org/files/html5/Presepio/index.php?Text=Anim8or.com)

Now I hope that Raxx, may in the future implement animations :)
Greetings and Merry Christmas
Title: Re: Anim8or 3D Viewer
Post by: Raxx on December 26, 2015, 01:30:00 am
civic71, very cool nativity scene, and happy Holidays!

I'm surprised you were able to utilize it for the demo, good job! As for animation, we'll see ;)
Title: Re: Anim8or 3D Viewer
Post by: Steve on December 26, 2015, 02:49:14 am
Yes,nice nativity scene.  Thanks for the timely post :-)
Title: Re: Anim8or 3D Viewer
Post by: TheIndianGuy on April 29, 2016, 08:30:47 pm
Good work....