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:
[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:
[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:
- 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:
[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:
[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:
[asl title="optional"]ASL goes here[/asl]
The title is optional, and if excluded then "ASL Snippet" will be used instead.
Examples
[attach]2[/attach]
[attach width=720 height=360 options={shading:0, wireColor:"#fff", uiColor:"#000000", uiShadow:false, background:"none"}]2[/attach]
[attach options={shading:0, locked:true, background:"#666699"}]2[/attach]
[attach options={shading:0, autorotation:false, background:"http://www.petslovers.info/wp-content/uploads/2014/03/kittens_cute_kitten.jpg"}]2[/attach]
[attach width=400]1[/attach]
[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 (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!
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:
[attach width=608 height=368]1[/attach]