"Obsidian" by xplsv

a (fast made) javascript/webgl demo 

code: mr.doob x three.js
direction: trace
music: om unit x lorn 

source code, video 

start

WebGL是一項在網頁瀏覽器呈現3D畫面的技術，有別於過往需加裝瀏覽器外掛程式，透過WebGL的技術，只需要編寫網頁代碼即可實現3D圖像的展示。WebGL的規格尚在發展中，由非營利的Khronos Group管理。

概覽

WebGL基於OpenGL ES 2.0，提供了3D影像的程式介面。它使用HTML5 Canvas並允許利用文件物件模型介面。可利用部分Javascript實作自動記憶體管理。^[1]

實作

目前，WebGL被大多數處於測試階段的瀏覽器所支援。目前，支援此技術的有Mozilla Firefox、Google Chrome、Opera (需自行啟用)、Safari。另外，它也受Nokia N900 PR1.2支援

發展

WebGL的工作成員包括Mozilla、Opera、蘋果公司，Mozilla的Arun Ranganathan擔任主席。

WebGL 1.0 不需外掛的網頁3D遊戲時代，除IE 9的瀏覽器都支援

只支援Windows Vista、Windows 7的IE 9雖然常強調其3D圖形硬體加速能力，但那畢竟是在有限的平台之下；而事實上Google Chrome、Firefox、Opera、Safari等瀏覽器則普遍支援一個更易跨平台的網頁3D繪圖標準規範，那就是同樣可算在HTML 5架構下的WebGL，這套標準最近更在GDC 2011遊戲開發者大會上提出了WebGL 1.0，讓支持WebGL的瀏覽器可以不需外掛直接呈現具有硬體加速支援的高品質3D圖像。

包含了最新正式版的Google Chrome，以及Beta中的Firefox 4等測試版瀏覽器，都支援WebGL，目前下個世代瀏覽器中只有IE 9尚未支援。透過WebGL標準，設計者可以開發出各種真正的網頁3D遊戲，例如第一人稱射擊、立體迷宮、賽車等等都可能實現，另外像是地圖導航、影片播放也都有3D發揮的空間。

更重要的是這樣開發出來的網頁3D服務，透過Windows、Mac OS X、Android、iOS平台都支援的OpenGL技術，更容易實現只要一個瀏覽器就能簡單的在各種裝置上玩同一個工具的理想，而像是Chrome OS這種瀏覽器作業系統就有更多的發揮應用空間。

對於太過程式技術的東西我也不懂，所以有興趣了解WebGL 1.0與其影響詳情的朋友，可以自行看看這篇文章：「WebGL 1.0 is done. Where's Microsoft？」

簡單的說，HTML 5、WebGL這些標準，將可以為網路帶來更生動活潑、支援性更廣泛的表現方式，讓使用者可以在不需安裝外掛下，於更多裝置享受多媒體、3D圖形互動。

如果你想了解目前WebGL可以製作出什麼樣的3D效果？那麼可以參考下面兩個網頁（建議使用Firefox 4 beta效果最好，Google Chrome正式版亦可，但我實際測試時Google Chrome 9.0有一點點小問題）：

• 「http://code.google.com/p/webglsamples/」
• 「http://www.khronos.org/webgl/wiki/Demo_Repository」

而微軟IE 9一直強調的利用DirectX做的3D硬體加速，和Firefox 4等瀏覽器使用OpenGL的WebGL標準之間有何不同呢？有興趣的朋友可以看看這篇文章：「Drawing Sprites: Canvas 2D vs. WebGL」，該文作者還特地做了一個「IE 9原版FishIE Tank測試」，以及一個「WebGL版本FishIE Tank測試」，比較看看3D圖形的表現效果與速度。

▲左圖為用IE 9開啟IE 9原版測試500隻魚，右圖為用Firefox 4 beta開啟WebGL版本測試500隻魚，兩個測試在我的電腦上執行速度與顯示效果相當。

最後，Mozilla最近也為了Firefox 4正式版即將到來，開啟了一個「Web Open Wonder」網站，必須使用支援HTML5、WebGL的瀏覽器來瀏覽，當然主要是為了展示Firefox 4可以帶來的各種網頁媒體技術的豐富變化性（我們可以使用Firefox 4 Beta或Google Chrome等瀏覽器來享受這樣一個未來網站，不過IE 9不支援）。

相關連結：http://www.mrdoob.com/

                http://learningwebgl.com/blog/

                http://www.playpcesor.com/2011/03/webgl-10-3die-9.html

                http://www.chromeexperiments.com/webgl/

Seriously.js是一個基於nodejs的實時在線視頻合成器，基於HTML5，使用Javascript和WebGL的技術開發。類似於一些專業的軟件如After Effects中和核彈，能夠渲染高質量的視頻效果，並允許它們是動態，互動的。

Slimbox 2, the ultimate lightweight Lightbox clone for jQuery

Version: 2.05
Category: jQuery Javascripts

Introduction

Slimbox 2 is a 4 KB visual clone of the popularLightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

Features

From a functional point of view, Slimbox 2 has the following added features compared to the original Lightbox:

• Slimbox is ready to launch as soon as the document is ready. This means that you don’t have to wait for all images of the page to be loaded before clicking on a link that will launch the Lightbox effect.
• Slimbox also centers images vertically on startup, not just horizontally. Vertical scrolling is still possible.
• It works perfectly on horizontal-scrolling websites.
• It temporary hides flash animations and other embedded videos while it is open to avoid display bugs in some browsers. It also hides select boxes in Internet Explorer 6.
• Using a special option (“loop”), it allows you to navigate between the first and last images.
• Slimbox is more responsive; it allows you to close it immediately at any time using the keyboard or mouse and to instantly navigate to any image before the current image has loaded or the animations are complete.
• The script is more robust; for example you can try to start and stop Slimbox or navigate between images very quickly to interrupt the animations and resume them and you won’t notice any bug like in the original Lightbox where sometimes the animation stops or the elements are wrongly sized or positioned.
• Slimbox can be launched from the traditional image links inside the page like the original Lightbox, but also directly from Javascript using its complete API.

From a design point of view, Slimbox 2 is very different from Lightbox:

• The code is optimized to an insane level and has been written from scratch with efficiency in mind for the jQuery library instead of the huge Prototype/Scriptaculous. The script itself is as tiny as 4kb (minified, uncompressed).
• Slimbox can be entirely customized thanks to many options. You can change the duration of any effect, the counter text translation or even the navigtation keys.
• Slimbox has a much more powerful API, allowing you to apply the Lightbox effect easily on any clickable element or from any script. For example, it can be easily integrated with links pointing to Flickr or Picasa Web Albums pages or with any javascript image gallery.
• The Slimbox CSS are simpler and 100% valid (no more CSS hacks). Also, every visual aspect of Slimbox (including images) is specified in the CSSinstead of the Javascript so it is easier to style. You may even change any border size in the CSS and Slimbox will still work fine, which means that nothing is “hard-coded” in the source code.

Slimbox 2 is currently the smallest Lightbox-like script available for the jQuery library.

Compatibility

Slimbox 2 is compatible with all modern browsers: Firefox 2+, Internet Explorer 6+, Opera 9+ and Opera for Wii, Safari 3+, Camino and Google Chrome.

It works with both strict mode and quirks mode web pages.

Unlike many Lightbox-like scripts, it displays fine in case of horizontal scrolling of the web page.

It is disabled by default on mobile devices (Android, iPhone/iPod, Symbian, Windows Mobile, BlackBerry).

Note: there is a bug in Google Chrome versions 4 to 8 for Linux with many non-english locales, causing the overlay to stay invisible when Slimbox is opened. This bug does not affect other operating systems and was fixed since Chrome 9.

Requirements

Slimbox 2.05 requires the jQuery library, version 1.3 or more recent. If you don’t already have it, you can download jQuery from its official website.

Usage

Usage is exactly the same as for Lightbox by default, but Slimbox 2 offers more options.

Because it was designed to be 100% compatible with Lightbox, you just need to replace the scripts combination “Prototype + Scriptaculous + Lightbox” with “jQuery + Slimbox 2” in the header of your pages and your Lightbox effects will work just as well as before. Well, a little better.

SETUP

1. Include the script in the header of your page, after the inclusion of the jQuery library:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/slimbox2.js"></script>

There are some options that you can specify in the form of a javascript object inside the script (look for “put custom options here”). The default values should be just fine, however if you want you can change the following:

• loop: Boolean; if set to true, allows the user to navigate between the first and last images of a Slimbox gallery, when there is more than one image to display. Default is false.
• overlayOpacity: The level of opacity of the background overlay. 1 Is opaque, 0 is completely transparent. You can change the color in the CSSfile. Default is 0.8.
• overlayFadeDuration: The duration of the overlay fade-in and fade-out animations, in milliseconds. Set it to 1 to disable the overlay fade effects. Default is 400.
• resizeDuration: The duration of the resize animation for width and height, in milliseconds. Set it to 1 to disable resize animations. Default is 400.
• resizeEasing: The name of the easing effect that you want to use for the resize animation (jQuery Easing Plugin required). Many easings require a longer execution time to look good, so you should adjust the resizeDuration option above as well. Default is jQuery’s built-in default easing, "swing".
• initialWidth: The initial width of the box, in pixels. Default is 250.
• initialHeight: The initial height of the box, in pixels. Default is 250.
• imageFadeDuration: The duration of the image fade-in animation, in milliseconds. Set it to 1 to disable this effect and make the image appear instantly. Default is 400.
• captionAnimationDuration: The duration of the caption animation, in milliseconds. Set it to 1 to disable it and make the caption appear instantly. Default is 400.
• counterText: Text value; allows you to customize, translate or disable the counter text which appears in the captions when multiple images are shown. Inside the text, {x} will be replaced by the current image index, and {y} will be replaced by the total number of images. Set it to false(boolean value, without quotes) or "" to disable the counter display. Default is "Image {x} of {y}".
• closeKeys: An array of key codes of the keys to press to close Slimbox. Default is [27, 88, 67] which means Esc (27), “x” (88) and “c” (67).
• previousKeys: An array of key codes of the keys to press to navigate to the previous image. Default is [37, 80] which means Left arrow (37) and “p” (80).
• nextKeys: An array of key codes of the keys to press to navigate to the next image. Default is [39, 78] which means Right arrow (39) and “n” (78).

Example of a custom options object, including french translation:

{
	overlayOpacity: 0.6,
	resizeEasing: "easeOutElastic",
	captionAnimationDuration: 1,
	counterText: "Image {x} sur {y}",
	closeKeys: [27, 70],
	nextKeys: [39, 83]
}

2. Include the CSS file in the header of your page, or add it to an existing CSSstyle sheet:

<link rel="stylesheet" href="/css/slimbox2.css" type="text/css" media="screen" />

Or, if you are using a right-to-left language:

<link rel="stylesheet" href="/css/slimbox2-rtl.css" type="text/css" media="screen" />

If you keep the provided CSS as is, you must place the 4 required images in the same folder as the CSS file. Of course you can change the images or move them to another place, then you just need to edit the CSS URLs (and the image width and height for the “Close” image) to reflect your changes. You don’t even need to edit the javascript.

You can also change the fonts for the caption and the image counter, the width of the border around the lightbox and the caption, the margins in the caption and every color. You must not add new CSS rules.

ACTIVATE

Add the rel="lightbox" attribute to the links pointing to your full-sized images. Use the optional title attribute if you want to show a caption:

<a href="/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

You can even use HTML in the caption if you want. You must replace the < and > characters with HTML entities and use single quotes instead of double quotes.

For sets of related images that you want to group and make navigable, add a group name to the rel attribute just after the “lightbox” word, for example:

<a href="/images/image-1.jpg" rel="lightbox-cats">image #1</a>
<a href="/images/image-2.jpg" rel="lightbox-cats">image #2</a>
<a href="/images/image-3.jpg" rel="lightbox-cats">image #3</a>

I don’t recommend using square brackets “[ ]” around group names in the relattribute like the original Lightbox script does because these characters are invalid for XHTML and XML attributes, meaning that your web page would not validate against the latest standards.

API FOR JAVASCRIPT PROGRAMMING

Additionally, Slimbox also allows you to:

• Launch Slimbox directly from Javascript code to display a single image or a collection of images.
• Register any link or DOM element for opening Slimbox when clicking.
• Change the way the image URL and description are retrieved from DOMelements.
• Create custom image groups based on any criteria.

Please read the complete API documentation to learn how to do this. The possibilities are limitless.

Download

Slimbox is free software released under MIT License.
If you like it, talk about it and promote it by linking to this page.

Slimbox 2.05

原文：http://www.digitalia.be/software/slimbox2

下載AngularJS-sublime-package

原文：http://blog.karachicorner.com/2013/03/fresh-jquery-plugins/