Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[Raxx]

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.

• width: [Integer: Default 640] Width of the plugin
• height: [Integer: Default 480] Height of the plugin

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

• background: [mixed] Can be the url to an image, a css hex color (#000, for example), or "none". Defaults to a generic background image.
• wireColor: [Hex Color: Default #666699] The color of the wireframe lines
• uiColor: [Hex Color: Default #fff] The color of the ui elements (icons and text)
• uiShadow: [Boolean: Default true] Enable/Disable the shadow effect on ui elements
• locked: [Boolean: Default true] Lock the interface (no ui elements or interaction)
• autoRotation: [Boolean: Default false] Disables the autorotate feature
• shading: [Integer: Default 2] Type of shading. 0 is no shading, 1 is flat shading, 2 is smooth shading
• softwareRender: [Boolean: Default false] Enables software (HTML5) canvas rendering. Overall not recommended, webGL incompatible devices will automatically fall back to this
• doubleSided: [Boolean: Default false] If you need backfaces enabled, set this to true. Note: can lead to a performance decrease on large files

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 (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:

• autoplay: [Boolean: Default false] Enable/Disable autoplay. Plays the video as soon as the web page loads
• loop: [Boolean: Default true] Loops the video
• controls: [Boolean: Default true] Show/hide the controls

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:

• You can only view mesh shapes in objects
• Subdivision meshes show up in their unsubdivided state
• Internet Explorer is horrible. If you report problems while using it, you will be ignored.
• Materials aren't 100% accurate. There are differences. For example, if you have a black diffuse rgb color with a texture, the mesh will show up black. In Anim8or, this does not happen.

Something cool: You can view these in mobile browsers that support 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!

[Steve]

Pretty darn cool, Raxx!

[Raxx]

Thanks Steve!

[kreator]

Are you Using Chrome frame from within IE?

[Claude]

Great work, Raxx.

Are you using three.js and your own An8 javascript parser as
planned ?

[Raxx]

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.

[ronaldefarmer]

Raxx,

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

[captaindrewi]

Code: [Select]

[attach <width> <height> <an8={params}>]<1>[/attach] thought i would try it out.

[Raxx]

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

[neirao]

Super COoll!

[Claude]

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.

[bamman62]

Testing this magic.

[kreator]

working?

[ronaldefarmer]

Trying it out.



Raxx, this is very cool and amazing! Excellent work!

[Raxx]

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.