5 |
6 | Sorry, this image could not be loaded.
7 |
8 |
9 |
Try another
10 |
Open the gallery
11 |
12 |
5 |
6 | Sorry, Depthy works only on browsers supporting WebGL .
7 |
8 |
9 | Unfortunately, there's no official support on iOS. It should work on your Mac / PC / Android though.
10 |
11 |
12 | It's strange, because it should work on Android. Check the latest Chrome , Firefox or Opera .
13 | Built-in browsers may not be fully supported.
14 |
15 |
3 |
4 | RUN locale-gen en_US.UTF-8
5 | ENV LANG en_US.UTF-8
6 | ENV LANGUAGE en_US:en
7 | ENV LC_ALL en_US.UTF-8
8 |
9 | ADD sources.list /etc/apt/
10 |
11 | RUN apt-get update
12 | RUN apt-get install -y git
13 | RUN apt-get install -y nodejs npm ruby-compass
14 |
15 | RUN ln -s /usr/bin/nodejs /usr/bin/node
16 | RUN npm install -g grunt-cli bower
17 |
18 | RUN git clone https://github.com/panrafal/depthy.git
19 | WORKDIR /depthy
20 | RUN npm install
21 | RUN bower install --allow-root --config.interactive=false
22 |
23 | EXPOSE 9000
24 | ENTRYPOINT grunt serve
25 |
26 |
--------------------------------------------------------------------------------
/test/spec/controllers/sharepngmodal.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Controller: SharepngmodalCtrl', function () {
4 |
5 | // load the controller's module
6 | beforeEach(module('depthyApp'));
7 |
8 | var SharepngmodalCtrl,
9 | scope;
10 |
11 | // Initialize the controller and a mock scope
12 | beforeEach(inject(function ($controller, $rootScope) {
13 | scope = $rootScope.$new();
14 | SharepngmodalCtrl = $controller('SharepngmodalCtrl', {
15 | $scope: scope
16 | });
17 | }));
18 |
19 | it('should attach a list of awesomeThings to the scope', function () {
20 | expect(scope.awesomeThings.length).toBe(3);
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/app/views/options-movement.html:
--------------------------------------------------------------------------------
1 |
11 |
20 |
--------------------------------------------------------------------------------
/test/spec/controllers/imageinfomodal.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Controller: ImageinfomodalCtrl', function () {
4 |
5 | // load the controller's module
6 | beforeEach(module('depthyApp'));
7 |
8 | var ImageinfomodalCtrl,
9 | scope;
10 |
11 | // Initialize the controller and a mock scope
12 | beforeEach(inject(function ($controller, $rootScope) {
13 | scope = $rootScope.$new();
14 | ImageinfomodalCtrl = $controller('ImageinfomodalCtrl', {
15 | $scope: scope
16 | });
17 | }));
18 |
19 | it('should attach a list of awesomeThings to the scope', function () {
20 | expect(scope.awesomeThings.length).toBe(3);
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/app/scripts/directives/depthyViewer.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('depthyApp')
4 | .directive('depthyViewer', function () {
5 | return {
6 | restrict: 'A',
7 | scope: true,
8 | controller: function($scope, $element, $attrs) {
9 | var viewer,
10 | options = $scope.$parent.$eval($attrs.depthyViewer);
11 |
12 | $scope.$parent.$watch($attrs.depthyViewer, function(newOptions) {
13 | if (viewer && newOptions) {
14 | viewer.setOptions(options);
15 | }
16 | }, true);
17 |
18 | viewer = new DepthyViewer($element[0], options);
19 |
20 | this.getViewer = function() {
21 | return viewer;
22 | };
23 |
24 | },
25 | };
26 |
27 | });
28 |
--------------------------------------------------------------------------------
/app/scripts/modernizr-platform.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | 'use strict';
3 | Modernizr.addTest('ios', /iPad|iPhone|iPod/.test(window.navigator.userAgent));
4 | Modernizr.addTest('android', /Android/i.test(window.navigator.userAgent));
5 | Modernizr.addTest('winphone', /IEMobile/i.test(window.navigator.userAgent));
6 | Modernizr.addTest('mobile', /iPad|iPhone|iPod|Android|IEMobile/.test(window.navigator.userAgent));
7 | Modernizr.addTest('ff', /Firefox/.test(window.navigator.userAgent));
8 | Modernizr.addTest('ie', /; MSIE/.test(window.navigator.userAgent));
9 | Modernizr.addTest('chrome', /\bChrome\b/.test(window.navigator.userAgent));
10 | Modernizr.addTest('safari', /\bSafari\b/.test(window.navigator.userAgent) && !/\bChrome\b/.test(window.navigator.userAgent));
11 | })();
12 |
--------------------------------------------------------------------------------
/test/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "node": true,
3 | "browser": true,
4 | "esnext": true,
5 | "bitwise": true,
6 | "camelcase": true,
7 | "curly": true,
8 | "eqeqeq": true,
9 | "immed": true,
10 | "indent": 2,
11 | "latedef": true,
12 | "newcap": true,
13 | "noarg": true,
14 | "quotmark": "single",
15 | "regexp": true,
16 | "undef": true,
17 | "unused": true,
18 | "strict": true,
19 | "trailing": true,
20 | "smarttabs": true,
21 | "globals": {
22 | "after": false,
23 | "afterEach": false,
24 | "angular": false,
25 | "before": false,
26 | "beforeEach": false,
27 | "browser": false,
28 | "describe": false,
29 | "expect": false,
30 | "inject": false,
31 | "it": false,
32 | "jasmine": false,
33 | "spyOn": false
34 | }
35 | }
36 |
37 |
--------------------------------------------------------------------------------
/app/scripts/controllers/exportpngmodal.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('depthyApp')
4 | .controller('ExportPngModalCtrl', function ($scope, $sce, $timeout, $window, depthy) {
5 | $scope.loading = true;
6 | // wait for animation
7 | $timeout(function() {
8 | depthy.getViewer().exportToPNG(null).then(
9 | function(url) {
10 | // shorten this!
11 | url = URL.createObjectURL($window.dataURItoBlob(url));
12 | var img = angular.element('img[image-source="export-png-modal"]')[0];
13 | img.onload = function() {
14 | $scope.loading = false;
15 | $scope.$safeApply();
16 | };
17 | img.src = url;
18 | angular.element('a[image-source="export-png-modal"]').attr('href', url);
19 | }
20 | );
21 | }, depthy.modalWait);
22 | });
23 |
--------------------------------------------------------------------------------
/app/scripts/controllers/exportanaglyphmodal.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('depthyApp')
4 | .controller('ExportAnaglyphModalCtrl', function ($scope, $sce, $timeout, $window, depthy) {
5 | $scope.loading = true;
6 | // wait for animation
7 | $timeout(function() {
8 | depthy.getViewer().exportAnaglyph({}).then(
9 | function(url) {
10 | // shorten this!
11 | url = URL.createObjectURL($window.dataURItoBlob(url));
12 | var img = angular.element('img[image-source="export-anaglyph-modal"]')[0];
13 | img.onload = function() {
14 | $scope.loading = false;
15 | $scope.$safeApply();
16 | };
17 | img.src = url;
18 | angular.element('a[image-source="export-anaglyph-modal"]').attr('href', url);
19 | }
20 | );
21 | }, depthy.modalWait);
22 | });
23 |
--------------------------------------------------------------------------------
/app/views/options-animation.html:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
16 |
17 |
18 |
20 |
21 |
22 |
2 |
This image is flat as a pancake!
3 |
4 |
5 |
6 | Depthy works with photos shot using LensBlur camera mode, or created with Depthy itself.
7 |
8 |
9 |
Load depthmap
10 |
Draw it
11 |
Try another
12 |
13 |
14 | Documents when prompted and find your LensBlur photo on your device.
16 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | {{depthy.downloadInstructions}} to save it.
13 |
14 |
15 |
16 | Depthy to see the effects.
19 |
20 |
23 |
24 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | {{depthy.downloadInstructions}} to save it.
13 |
14 |
15 |
16 |
19 |
20 |
23 |
24 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | {{depthy.downloadInstructions}} to save it.
13 |
14 |
15 |
19 |
20 |
21 |
24 |
25 |
26 |
7 |
8 |
9 |
12 |
13 |
16 |
17 |
18 |
19 |
20 |
{{size / 1024 | number: 0}}KB
22 |
23 |
24 |
27 |
28 |
29 |
30 |
31 | You can upload this video to
gfycat , or edit it in any program supporting WebM format.
32 |
33 |
34 |
35 | #depthy if you share it, thanks!
37 |
38 |
39 |
40 |
2 |
5 |
6 |
7 |
8 |
9 |
10 |
Depthmap
11 |
12 |
13 |
Sharp image
14 |
15 |
16 |
17 |
18 | {{depthy.downloadInstructions}} to save it.
19 |
20 |
21 |
23 |
24 |
25 |
You can create depthmaps for any image yourself! Then click "Open depthmap" above to load it.
26 |
27 |
28 |
29 |
Keep in mind that darker spots are closer to the screen. Check the samples for reference.
30 |
31 |
37 |
--------------------------------------------------------------------------------
/app/images/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
8 |
23 |
27 |
--------------------------------------------------------------------------------
/app/scripts/services/statemodal.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('depthyApp')
4 | .service('StateModal', function StateModal($rootScope, $modal, $state, $location, $window, $q) {
5 |
6 | /** Changes $state to show a modal...
7 | Returns deffered which will go back in history if rejected, or replace the location if resolved.
8 | Back buttons will reject the promise. */
9 | this.stateDeferred = function(state, options) {
10 | options = options || {};
11 | var deferred = $q.defer(), deregister;
12 | deferred.state = state;
13 |
14 | // if ($state.current.name === state) state = false;
15 | if (state && !options.stateCurrent && state !== true) $state.go(state, options.stateParams, options.stateOptions);
16 |
17 | deferred.promise.then(
18 | function() {
19 | if (deregister) deregister();
20 | if (state && $state.current.name === state) $location.replace();
21 | },
22 | function() {
23 | if (deregister) deregister();
24 | if (state && $state.current.name === state) $window.history.back();
25 | }
26 | );
27 |
28 | if (state) {
29 | deregister = $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState) {
30 | deregister();
31 | deregister = null;
32 | if (state === true || fromState.name === state) {
33 | state = false;
34 | deferred.reject();
35 | }
36 | });
37 | }
38 | return deferred;
39 | };
40 |
41 | this.showModal = function(state, options) {
42 | var deferred = this.stateDeferred(state, options),
43 | modal;
44 |
45 | modal = $modal.open(options || {});
46 |
47 | modal.result.then(
48 | function() {
49 | deferred.resolve();
50 | },
51 | function() {
52 | deferred.reject();
53 | }
54 | );
55 |
56 | deferred.promise.finally(function() {
57 | modal.close();
58 | });
59 |
60 | return modal;
61 | };
62 |
63 | this.showAlert = function(message, options, state) {
64 | return this.showModal(state || 'alert', angular.extend({
65 | templateUrl: 'views/alert-modal.html',
66 | windowClass: 'alert-modal',
67 | scope: angular.extend($rootScope.$new(), {message: message}),
68 | }, options || {}));
69 | };
70 |
71 |
72 | });
73 |
--------------------------------------------------------------------------------
/app/scripts/pixi/ColorMatrixFilter2.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Mat Groves http://matgroves.com/ @Doormat23
3 | */
4 |
5 | /**
6 | *
7 | * The ColorMatrixFilter2 class lets you apply a 4x4 matrix transformation on the RGBA
8 | * color and alpha values of every pixel on your displayObject to produce a result
9 | * with a new set of RGBA color and alpha values. Its pretty powerful!
10 | * @class ColorMatrixFilter
11 | * @contructor
12 | */
13 | PIXI.ColorMatrixFilter2 = function()
14 | {
15 | 'use strict';
16 | PIXI.AbstractFilter.call( this );
17 |
18 | this.passes = [this];
19 |
20 | // set the uniforms
21 | this.uniforms = {
22 | matrix: {type: 'mat4', value: [1,0,0,0,
23 | 0,1,0,0,
24 | 0,0,1,0,
25 | 0,0,0,1]},
26 | shift: {type: '4fv', value: [0.0,0.0,0.0,0.0]},
27 | };
28 |
29 | this.fragmentSrc = [
30 | 'precision mediump float;',
31 | 'varying vec2 vTextureCoord;',
32 | 'varying vec4 vColor;',
33 | 'uniform float invert;',
34 | 'uniform mat4 matrix;',
35 | 'uniform vec4 shift;',
36 | 'uniform sampler2D uSampler;',
37 |
38 | 'void main(void) {',
39 | ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix + shift;',
40 | // ' gl_FragColor = gl_FragColor;',
41 | '}'
42 | ];
43 | };
44 |
45 | PIXI.ColorMatrixFilter2.prototype = Object.create( PIXI.AbstractFilter.prototype );
46 | PIXI.ColorMatrixFilter2.prototype.constructor = PIXI.ColorMatrixFilter2;
47 |
48 | /**
49 | * Sets the matrix of the color matrix filter
50 | *
51 | * @property matrix
52 | * @type Array and array of 16 numbers
53 | * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
54 | */
55 | Object.defineProperty(PIXI.ColorMatrixFilter2.prototype, 'matrix', {
56 | get: function() {
57 | return this.uniforms.matrix.value;
58 | },
59 | set: function(value) {
60 | this.uniforms.matrix.value = value;
61 | }
62 | });
63 |
64 | /**
65 | * Sets the constant channel shift
66 | *
67 | * @property shift
68 | * @type Array and array of 26 numbers
69 | * @default [0,0,0,0]
70 | */
71 | Object.defineProperty(PIXI.ColorMatrixFilter2.prototype, 'shift', {
72 | get: function() {
73 | return this.uniforms.shift.value;
74 | },
75 | set: function(value) {
76 | this.uniforms.shift.value = value;
77 | }
78 | });
--------------------------------------------------------------------------------
/app/styles/_animations.scss:
--------------------------------------------------------------------------------
1 |
2 | .anim-fade {
3 | transition: all 0.2s ease-in-out;
4 |
5 | &.ng-hide-remove, &.ng-enter,
6 | &.ng-hide-active, &.ng-leave-active,
7 | &.ng-hide {
8 | opacity: 0;
9 | }
10 | &.ng-hide-remove-active, &.ng-enter-active {
11 | opacity: 1;
12 | }
13 |
14 | }
15 |
16 | .anim-slideup-centered {
17 | transition: all 0.5s ease-in-out;
18 | &.ng-hide {
19 | display: block!important;
20 | }
21 |
22 | &.ng-hide-remove, &.ng-enter,
23 | &.ng-hide-active, &.ng-leave-active,
24 | &.ng-hide {
25 | visibility: hidden;
26 | transform: translate(-50%, 100%) translateY(remify(60px));
27 | }
28 | &.ng-hide-remove-active, &.ng-enter-active {
29 | visibility: visible;
30 | transform: translateX(-50%);
31 | }
32 | }
33 |
34 | .anim-expand {
35 | transition: all 0.3s ease-in-out;
36 |
37 | &.ng-animate {
38 | visibility: visible;
39 | max-height: 150px;
40 | overflow:hidden;
41 |
42 | &.long {
43 | transition-duration: 0.3s;
44 | max-height: 300px;
45 | }
46 | &.verylong {
47 | transition-duration: 0.4s;
48 | max-height: 600px;
49 | }
50 | &.short {
51 | transition-duration: 0.2s;
52 | max-height: 50px;
53 | }
54 |
55 | &.ng-hide-remove:not(.ng-hide-remove-active),
56 | &.ng-enter:not(.ng-enter-active),
57 | &.ng-hide-active,
58 | &.ng-leave-active,
59 | &.ng-hide {
60 | overflow:hidden;
61 | display: block!important;
62 | visibility: hidden;
63 | max-height: 0px;
64 | margin-top: 0px;
65 | margin-bottom: 0px;
66 | padding-top: 0px;
67 | padding-bottom: 0px;
68 | }
69 | // &.ng-hide-remove-active, &.ng-enter-active {
70 | // max-height: 100px;
71 | // }
72 |
73 | }
74 |
75 | }
76 |
77 |
78 |
79 |
80 | @keyframes icon-rotate {
81 | 0% {
82 | transform: rotate(0deg);
83 | }
84 | 100% {
85 | transform: rotate(359deg);
86 | }
87 | }
88 |
89 | @keyframes slide-from-bottom {
90 | 0% {
91 | transform: translateY(100%);
92 | }
93 | 100% {
94 | transform: translateY(0%);
95 | }
96 | }
97 |
98 | @keyframes slide-from-left {
99 | 0% {
100 | transform: translateX(-100%);
101 | }
102 | 100% {
103 | transform: translateX(0%);
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/app/views/share-png-modal.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
10 |
11 |
15 |
Uploading, please wait...
16 |
17 |
18 |
19 |
Copy this link and use it however you want:
20 |
24 |
29 |
30 |
31 | #depthy in your shares, thanks!
33 |
34 |
35 |
39 |
40 |
41 |
42 |
Page Not Found :(
6 |
141 |
142 |
143 |
144 |
Not found :(
145 |
Sorry, but the page you were trying to view does not exist.
146 |
It looks like this was the result of either:
147 |
148 | a mistyped address
149 | an out-of-date link
150 |
151 |
154 |
155 |
8 |
9 |
10 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
{{imageSize / 1024 | number: 0}}KB
23 |
24 |
{{depthy.downloadInstructions}} to save it.
25 |
26 |
27 |
30 |
31 | too big too share! You'll have to share it on your own, or make it smaller...
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
44 |
45 |
46 | Your GIF will be uploaded to
Imgur.com .
It will remain relatively private until you share it too much and it goes viral.
47 |
48 |
49 |
50 |
51 |
55 |
Uploading, please wait...
56 |
57 |
70 |
71 |
72 |
73 | #depthy in your shares, thanks!
75 |
76 |
77 |
78 |
$/);
16 | });
17 |
18 | it('should understand dataURI', function() {
19 | var info = GDepthEncoder.dataURIinfo(xmpDataURI);
20 | expect(info.mime).toBe('image/jpeg');
21 | expect(info.data).not.toBe(null);
22 | expect(info.data.length).toBeGreaterThan(500);
23 | });
24 |
25 | it('should accept only ArrayBuffer', function () {
26 | expect(function() { GDepthEncoder.encodeDepthmap([1,2,3]); }).toThrow();
27 | });
28 |
29 | it('should encode image', function () {
30 | var result = GDepthEncoder.encodeDepthmap(dataURItoArrayBuffer(xmpDataURI).buffer, longDataURI, simpleDataURI);
31 |
32 | expect(result.type).toBe('image/jpeg');
33 | expect(result.size).toBeGreaterThan(1500);
34 |
35 | var dr = null, parsed = false, loaded = false;
36 | runs(function() {
37 | var fr = new FileReader();
38 | fr.onload = function() {
39 | dr = new DepthReader();
40 | dr.parseFile(fr.result, function() {
41 | // console.log(dr);
42 | parsed = true;
43 | });
44 | };
45 | fr.readAsArrayBuffer(result);
46 | });
47 |
48 | waitsFor(function() {
49 | return parsed;
50 | }, 'Result should be parsed', 100);
51 |
52 | runs(function() {
53 | expect(dr.depth.mime).toBe('image/jpeg');
54 | // expect(dr.depth.data).toBe(GDepthEncoder.dataURIinfo(longDataURI).data);
55 | expect(dr.depth.data.length).toEqual(longDataURI.length - 23);
56 | expect(dr.image.mime).toBe('image/jpeg');
57 | expect(dr.image.data).toBe(GDepthEncoder.dataURIinfo(simpleDataURI).data);
58 | });
59 |
60 | runs(function() {
61 | var img = document.createElement('img');
62 |
63 | img.onload = function() {
64 | loaded = {w:img.width, h:img.height};
65 | };
66 | img.src = URL.createObjectURL(result);
67 | });
68 |
69 | waitsFor(function() {
70 | return loaded;
71 | }, 'Result should be loadable', 100);
72 |
73 | runs(function() {
74 | expect(loaded).toEqual({w:32, h:32});
75 | });
76 |
77 | console.log('Encoded: %d / %s', result.size, result.type, result);
78 | // expect(xmp).toMatch(/^$/);
79 | });
80 | });
81 |
--------------------------------------------------------------------------------
/app/scripts/vendor/md5.js:
--------------------------------------------------------------------------------
1 | /*
2 | CryptoJS v3.1.2
3 | code.google.com/p/crypto-js
4 | (c) 2009-2013 by Jeff Mott. All rights reserved.
5 | code.google.com/p/crypto-js/wiki/License
6 | */
7 | var CryptoJS=CryptoJS||function(s,p){var m={},l=m.lib={},n=function(){},r=l.Base={extend:function(b){n.prototype=this;var h=new n;b&&h.mixIn(b);h.hasOwnProperty("init")||(h.init=function(){h.$super.init.apply(this,arguments)});h.init.prototype=h;h.$super=this;return h},create:function(){var b=this.extend();b.init.apply(b,arguments);return b},init:function(){},mixIn:function(b){for(var h in b)b.hasOwnProperty(h)&&(this[h]=b[h]);b.hasOwnProperty("toString")&&(this.toString=b.toString)},clone:function(){return this.init.prototype.extend(this)}},
8 | q=l.WordArray=r.extend({init:function(b,h){b=this.words=b||[];this.sigBytes=h!=p?h:4*b.length},toString:function(b){return(b||t).stringify(this)},concat:function(b){var h=this.words,a=b.words,j=this.sigBytes;b=b.sigBytes;this.clamp();if(j%4)for(var g=0;g>>2]|=(a[g>>>2]>>>24-8*(g%4)&255)<<24-8*((j+g)%4);else if(65535>>2]=a[g>>>2];else h.push.apply(h,a);this.sigBytes+=b;return this},clamp:function(){var b=this.words,h=this.sigBytes;b[h>>>2]&=4294967295<<
9 | 32-8*(h%4);b.length=s.ceil(h/4)},clone:function(){var b=r.clone.call(this);b.words=this.words.slice(0);return b},random:function(b){for(var h=[],a=0;a>>2]>>>24-8*(j%4)&255;g.push((k>>>4).toString(16));g.push((k&15).toString(16))}return g.join("")},parse:function(b){for(var a=b.length,g=[],j=0;j>>3]|=parseInt(b.substr(j,
10 | 2),16)<<24-4*(j%8);return new q.init(g,a/2)}},a=v.Latin1={stringify:function(b){var a=b.words;b=b.sigBytes;for(var g=[],j=0;j>>2]>>>24-8*(j%4)&255));return g.join("")},parse:function(b){for(var a=b.length,g=[],j=0;j>>2]|=(b.charCodeAt(j)&255)<<24-8*(j%4);return new q.init(g,a)}},u=v.Utf8={stringify:function(b){try{return decodeURIComponent(escape(a.stringify(b)))}catch(g){throw Error("Malformed UTF-8 data");}},parse:function(b){return a.parse(unescape(encodeURIComponent(b)))}},
11 | g=l.BufferedBlockAlgorithm=r.extend({reset:function(){this._data=new q.init;this._nDataBytes=0},_append:function(b){"string"==typeof b&&(b=u.parse(b));this._data.concat(b);this._nDataBytes+=b.sigBytes},_process:function(b){var a=this._data,g=a.words,j=a.sigBytes,k=this.blockSize,m=j/(4*k),m=b?s.ceil(m):s.max((m|0)-this._minBufferSize,0);b=m*k;j=s.min(4*b,j);if(b){for(var l=0;l>>32-j)+k}function m(a,k,b,h,l,j,m){a=a+(k&h|b&~h)+l+m;return(a<>>32-j)+k}function l(a,k,b,h,l,j,m){a=a+(k^b^h)+l+m;return(a<>>32-j)+k}function n(a,k,b,h,l,j,m){a=a+(b^(k|~h))+l+m;return(a<>>32-j)+k}for(var r=CryptoJS,q=r.lib,v=q.WordArray,t=q.Hasher,q=r.algo,a=[],u=0;64>u;u++)a[u]=4294967296*s.abs(s.sin(u+1))|0;q=q.MD5=t.extend({_doReset:function(){this._hash=new v.init([1732584193,4023233417,2562383102,271733878])},
15 | _doProcessBlock:function(g,k){for(var b=0;16>b;b++){var h=k+b,w=g[h];g[h]=(w<<8|w>>>24)&16711935|(w<<24|w>>>8)&4278255360}var b=this._hash.words,h=g[k+0],w=g[k+1],j=g[k+2],q=g[k+3],r=g[k+4],s=g[k+5],t=g[k+6],u=g[k+7],v=g[k+8],x=g[k+9],y=g[k+10],z=g[k+11],A=g[k+12],B=g[k+13],C=g[k+14],D=g[k+15],c=b[0],d=b[1],e=b[2],f=b[3],c=p(c,d,e,f,h,7,a[0]),f=p(f,c,d,e,w,12,a[1]),e=p(e,f,c,d,j,17,a[2]),d=p(d,e,f,c,q,22,a[3]),c=p(c,d,e,f,r,7,a[4]),f=p(f,c,d,e,s,12,a[5]),e=p(e,f,c,d,t,17,a[6]),d=p(d,e,f,c,u,22,a[7]),
16 | c=p(c,d,e,f,v,7,a[8]),f=p(f,c,d,e,x,12,a[9]),e=p(e,f,c,d,y,17,a[10]),d=p(d,e,f,c,z,22,a[11]),c=p(c,d,e,f,A,7,a[12]),f=p(f,c,d,e,B,12,a[13]),e=p(e,f,c,d,C,17,a[14]),d=p(d,e,f,c,D,22,a[15]),c=m(c,d,e,f,w,5,a[16]),f=m(f,c,d,e,t,9,a[17]),e=m(e,f,c,d,z,14,a[18]),d=m(d,e,f,c,h,20,a[19]),c=m(c,d,e,f,s,5,a[20]),f=m(f,c,d,e,y,9,a[21]),e=m(e,f,c,d,D,14,a[22]),d=m(d,e,f,c,r,20,a[23]),c=m(c,d,e,f,x,5,a[24]),f=m(f,c,d,e,C,9,a[25]),e=m(e,f,c,d,q,14,a[26]),d=m(d,e,f,c,v,20,a[27]),c=m(c,d,e,f,B,5,a[28]),f=m(f,c,
17 | d,e,j,9,a[29]),e=m(e,f,c,d,u,14,a[30]),d=m(d,e,f,c,A,20,a[31]),c=l(c,d,e,f,s,4,a[32]),f=l(f,c,d,e,v,11,a[33]),e=l(e,f,c,d,z,16,a[34]),d=l(d,e,f,c,C,23,a[35]),c=l(c,d,e,f,w,4,a[36]),f=l(f,c,d,e,r,11,a[37]),e=l(e,f,c,d,u,16,a[38]),d=l(d,e,f,c,y,23,a[39]),c=l(c,d,e,f,B,4,a[40]),f=l(f,c,d,e,h,11,a[41]),e=l(e,f,c,d,q,16,a[42]),d=l(d,e,f,c,t,23,a[43]),c=l(c,d,e,f,x,4,a[44]),f=l(f,c,d,e,A,11,a[45]),e=l(e,f,c,d,D,16,a[46]),d=l(d,e,f,c,j,23,a[47]),c=n(c,d,e,f,h,6,a[48]),f=n(f,c,d,e,u,10,a[49]),e=n(e,f,c,d,
18 | C,15,a[50]),d=n(d,e,f,c,s,21,a[51]),c=n(c,d,e,f,A,6,a[52]),f=n(f,c,d,e,q,10,a[53]),e=n(e,f,c,d,y,15,a[54]),d=n(d,e,f,c,w,21,a[55]),c=n(c,d,e,f,v,6,a[56]),f=n(f,c,d,e,D,10,a[57]),e=n(e,f,c,d,t,15,a[58]),d=n(d,e,f,c,B,21,a[59]),c=n(c,d,e,f,r,6,a[60]),f=n(f,c,d,e,z,10,a[61]),e=n(e,f,c,d,j,15,a[62]),d=n(d,e,f,c,x,21,a[63]);b[0]=b[0]+c|0;b[1]=b[1]+d|0;b[2]=b[2]+e|0;b[3]=b[3]+f|0},_doFinalize:function(){var a=this._data,k=a.words,b=8*this._nDataBytes,h=8*a.sigBytes;k[h>>>5]|=128<<24-h%32;var l=s.floor(b/
19 | 4294967296);k[(h+64>>>9<<4)+15]=(l<<8|l>>>24)&16711935|(l<<24|l>>>8)&4278255360;k[(h+64>>>9<<4)+14]=(b<<8|b>>>24)&16711935|(b<<24|b>>>8)&4278255360;a.sigBytes=4*(k.length+1);this._process();a=this._hash;k=a.words;for(b=0;4>b;b++)h=k[b],k[b]=(h<<8|h>>>24)&16711935|(h<<24|h>>>8)&4278255360;return a},clone:function(){var a=t.clone.call(this);a._hash=this._hash.clone();return a}});r.MD5=t._createHelper(q);r.HmacMD5=t._createHmacHelper(q)})(Math);
20 |
--------------------------------------------------------------------------------
/app/scripts/app.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('depthyApp', [
4 | 'ngAnimate',
5 | 'ngTouch',
6 | 'ga',
7 | 'shareUrls',
8 | // 'visibleClass',
9 | // 'mgcrea.ngStrap.modal',
10 | // 'mgcrea.ngStrap.popover',
11 | // 'mgcrea.ngStrap.button'
12 | 'ui.router',
13 | 'ui.bootstrap.buttons',
14 | 'ui.bootstrap.modal',
15 | 'ui.bootstrap.transition',
16 | 'ui.bootstrap.dropdown',
17 | ])
18 | //fix blob
19 | .config(function($compileProvider) {
20 | $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|blob):|data:image\//);
21 | $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|blob):/);
22 | })
23 | .config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
24 | $locationProvider.html5Mode(false);
25 | // $locationProvider.hashPrefix('!');
26 |
27 | $urlRouterProvider.otherwise('/');
28 |
29 | $stateProvider
30 | .state('index', {
31 | url: '/',
32 | onEnter: ['depthy', '$state', function (depthy, $state) {
33 | if (!$state.current.name) {
34 | // first timer
35 | depthy.leftpaneOpen();
36 | depthy.loadSampleImage('flowers');
37 | }
38 | }]
39 | })
40 | .state('sample', {
41 | url: '/sample/:id',
42 | controller: ['$stateParams', 'depthy', function ($stateParams, depthy) {
43 | depthy.loadSampleImage($stateParams.id);
44 | }]
45 | })
46 | .state('imgur', {
47 | url: '/ip/:id',
48 | controller: ['$stateParams', '$state', 'depthy', function ($stateParams, $state, depthy) {
49 | depthy.loadUrlDirectImage('http://i.imgur.com/' + $stateParams.id + '.png', true, {
50 | state: 'imgur',
51 | stateParams: {id: $stateParams.id},
52 | thumb: 'http://i.imgur.com/' + $stateParams.id + 's.jpg',
53 | storeUrl: 'http://imgur.com/' + $stateParams.id,
54 | store: depthy.stores.imgur
55 | });
56 | }]
57 | })
58 | .state('imgur2', {
59 | url: '/ii/:id',
60 | controller: ['$stateParams', 'depthy', function ($stateParams, depthy) {
61 | depthy.loadUrlImage('http://i.imgur.com/' + $stateParams.id + '.png', {
62 | state: 'imgur2',
63 | stateParams: {id: $stateParams.id},
64 | thumb: 'http://i.imgur.com/' + $stateParams.id + 'm.jpg',
65 | storeUrl: 'http://imgur.com/' + $stateParams.id,
66 | store: depthy.stores.imgur
67 | });
68 | }]
69 | })
70 | .state('url-png', {
71 | url: '/up?url',
72 | controller: ['$stateParams', '$state', 'depthy', function ($stateParams, $state, depthy) {
73 | depthy.loadUrlDirectImage($stateParams.url, true, {
74 | state: 'url-png',
75 | stateParams: {url: $stateParams.url},
76 | // thumb: $stateParams.url,
77 | });
78 | }]
79 | })
80 | .state('url-auto', {
81 | url: '/u?url',
82 | controller: ['$stateParams', '$state', 'depthy', function ($stateParams, $state, depthy) {
83 | depthy.loadUrlImage($stateParams.url, {
84 | state: 'url-auto',
85 | stateParams: {url: $stateParams.url},
86 | // thumb: $stateParams.url,
87 | });
88 | }]
89 | })
90 | // hollow state for locally loaded files
91 | .state('local', {
92 | url: '/local/:id',
93 | hollow: true,
94 | controller: ['$stateParams', 'depthy', function($stateParams, depthy) {
95 | depthy.loadLocalImage($stateParams.id);
96 | }]
97 | })
98 | // hollow states for back button on alerts
99 | .state('alert', {
100 | url: '/alert',
101 | })
102 | .state('image', {
103 | url: '/image',
104 | })
105 | .state('image.options', {
106 | url: '/options',
107 | })
108 | .state('image.info', {
109 | url: '/info',
110 | })
111 | .state('export', {
112 | url: '/export',
113 | })
114 | .state('export.png', {
115 | url: '/png',
116 | })
117 | .state('export.jpg', {
118 | url: '/jpg',
119 | })
120 | .state('export.gif', {
121 | url: '/gif',
122 | })
123 | .state('export.gif.options', {
124 | url: '/options',
125 | })
126 | .state('export.gif.run', {
127 | url: '/run',
128 | })
129 | .state('export.webm', {
130 | url: '/webm',
131 | })
132 | .state('export.webm.options', {
133 | url: '/options',
134 | })
135 | .state('export.webm.run', {
136 | url: '/run',
137 | })
138 | .state('export.anaglyph', {
139 | url: '/anaglyph',
140 | })
141 | .state('share', {
142 | url: '/share',
143 | })
144 | .state('share.options', {
145 | url: '/options',
146 | })
147 | .state('share.png', {
148 | url: '/png',
149 | })
150 | .state('draw', {
151 | url: '/draw',
152 | hollow: true,
153 | onEnter: ['depthy', '$timeout', function(depthy, $timeout) {
154 | $timeout(function() {
155 | depthy.drawModeEnable();
156 | })
157 | }],
158 | onExit: ['depthy', function(depthy) {
159 | depthy.drawModeDisable();
160 | }],
161 | })
162 | .state('pane', {
163 | url: '/pane',
164 | hollow: true,
165 | onEnter: ['depthy', function(depthy) {
166 | depthy.leftpaneOpen();
167 | }],
168 | // onExit: ['depthy', function(depthy) {
169 | // depthy.leftpaneClose();
170 | // }]
171 | })
172 | .state('howto', {
173 | url: '/howto',
174 | })
175 | .state('howto.lensblur', {
176 | url: '/lensblur',
177 | onEnter: ['StateModal', function(StateModal) {
178 | StateModal.showModal('howto.lensblur', {
179 | stateCurrent: true,
180 | templateUrl: 'views/howto-lensblur.html',
181 | });
182 | }]
183 | })
184 | ;
185 | })
186 | .run(function($rootScope, ga, $location, $state) {
187 | // check first state
188 | var stateChangeStart = $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState) {
189 | stateChangeStart();
190 | console.log(event, toState, toParams, fromState);
191 | if (toState.hollow || !toState.controller && !toState.onEnter && !toState.template && !toState.templateUrl) {
192 | console.warn('Hollow state %s', toState.name);
193 | event.preventDefault();
194 | $state.go('index');
195 | }
196 | });
197 | $rootScope.$on('$stateChangeSuccess', function() {
198 | ga('set', 'page', $location.url());
199 | ga('send', 'pageview');
200 | });
201 | });
--------------------------------------------------------------------------------
/app/views/draw.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Here you can draw the depthmap with your
6 | {{Modernizr.mobile ? 'finger' : 'mouse'}}. Use the sliders to
7 | setup the brush.black means near the screen, and white is far away.opacity to make subtle changes, and level to draw at the same level as the point you start.
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
34 |
depth
35 |
36 |
37 |
40 |
41 |
42 |
43 |
44 |
45 |
52 |
size
53 |
54 |
55 |
57 |
58 |
59 |
60 |
61 |
62 |
69 |
hardness
70 |
71 |
72 |
75 |
76 |
77 |
78 |
79 |
80 |
87 |
opacity
88 |
89 |
90 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
--------------------------------------------------------------------------------
/app/scripts/controllers/draw.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('depthyApp')
4 | .controller('DrawCtrl', function ($scope, $element, depthy, $window, $timeout) {
5 |
6 | var drawer = depthy.drawMode,
7 | viewer = depthy.getViewer(),
8 | lastPointerPos = null,
9 | oldViewerOpts = angular.extend({}, depthy.viewer);
10 |
11 | drawer.setOptions(depthy.drawOptions || {
12 | depth: 0.5,
13 | size: 0.05,
14 | hardness: 0.5,
15 | opacity: 0.25,
16 | });
17 |
18 | angular.extend(depthy.viewer, {
19 | animate: false,
20 | fit: 'contain',
21 | upscale: 2,
22 | // depthPreview: 0.75,
23 | // orient: false,
24 | // hover: false,
25 | });
26 |
27 | $scope.drawer = drawer;
28 | $scope.drawOpts = drawer.getOptions();
29 |
30 | $scope.preview = 1;
31 | $scope.brushMode = false;
32 |
33 | $scope.$watch('drawOpts', function(options) {
34 | if (drawer && options) {
35 | drawer.setOptions(options);
36 | }
37 | }, true);
38 |
39 | $scope.$watch('preview', function(preview) {
40 | depthy.viewer.orient = preview === 2;
41 | depthy.viewer.hover = preview === 2;
42 | depthy.viewer.animate = preview === 2 && oldViewerOpts.animate;
43 | depthy.viewer.quality = preview === 2 ? false : 1;
44 | depthy.animateOption(depthy.viewer, {
45 | depthPreview: preview === 0 ? 1 : preview === 1 ? 0.75 : 0,
46 | depthScale: preview === 2 ? oldViewerOpts.depthScale : 0,
47 | depthBlurSize: preview === 2 ? oldViewerOpts.depthBlurSize : 0,
48 | enlarge: 1.0,
49 | }, 250);
50 | });
51 |
52 | $scope.togglePreview = function() {
53 | $scope.preview = ++$scope.preview % 3;
54 | };
55 |
56 | $scope.done = function() {
57 | $window.history.back();
58 | };
59 |
60 | $scope.cancel = function() {
61 | drawer.cancel();
62 | $window.history.back();
63 | };
64 |
65 | $scope.brushIcon = function() {
66 | switch($scope.brushMode) {
67 | case 'picker':
68 | return 'target';
69 | case 'level':
70 | return 'magnet';
71 | default:
72 | return 'draw';
73 | }
74 | };
75 |
76 |
77 | $element.on('touchstart mousedown', function(e) {
78 | var event = e.originalEvent,
79 | pointerEvent = event.touches ? event.touches[0] : event;
80 |
81 | if (event.target.id !== 'draw') return;
82 |
83 | lastPointerPos = viewer.screenToImagePos({x: pointerEvent.pageX, y: pointerEvent.pageY});
84 |
85 | if ($scope.brushMode === 'picker' || $scope.brushMode === 'level') {
86 | $scope.drawOpts.depth = drawer.getDepthAtPos(lastPointerPos);
87 | console.log('Picked %s', $scope.drawOpts.depth);
88 | if ($scope.brushMode === 'picker') {
89 | $scope.brushMode = false;
90 | lastPointerPos = null;
91 | $scope.$safeApply();
92 | event.preventDefault();
93 | event.stopPropagation();
94 | return;
95 | } else {
96 | $scope.$safeApply();
97 | }
98 | }
99 |
100 | drawer.drawBrush(lastPointerPos);
101 | event.preventDefault();
102 | event.stopPropagation();
103 | });
104 |
105 | $element.on('touchmove mousemove', function(e) {
106 | if (lastPointerPos) {
107 | var event = e.originalEvent,
108 | pointerEvent = event.touches ? event.touches[0] : event,
109 | pointerPos = viewer.screenToImagePos({x: pointerEvent.pageX, y: pointerEvent.pageY});
110 |
111 | drawer.drawBrushTo(pointerPos);
112 |
113 | lastPointerPos = pointerPos;
114 | }
115 | });
116 |
117 | $element.on('touchend mouseup', function(event) {
118 | // console.log(event);
119 | if (lastPointerPos) {
120 | lastPointerPos = null;
121 | $scope.$safeApply();
122 | }
123 | });
124 |
125 | function getSliderForKey(e) {
126 | var id = 'draw-brush-depth';
127 | if (e.shiftKey && e.altKey) {
128 | id = 'draw-brush-hardness';
129 | } else if (e.altKey) {
130 | id = 'draw-brush-opacity';
131 | } else if (e.shiftKey) {
132 | id = 'draw-brush-size';
133 | }
134 | var el = $element.find('.' + id + ' [range-stepper]');
135 | el.click(); // simulate click to notify change
136 | return el.controller('rangeStepper');
137 | }
138 |
139 | function onKeyDown(e) {
140 | var s, handled = false;
141 | console.log('keydown which %d shift %s alt %s ctrl %s', e.which, e.shiftKey, e.altKey, e.ctrlKey);
142 | if (e.which === 48) { // 0
143 | getSliderForKey(e).percent(0.5);
144 | handled = true;
145 | } else if (e.which >= 49 && e.which <= 57) { // 1-9
146 | getSliderForKey(e).percent((e.which - 49) / 8);
147 | handled = true;
148 | } else if (e.which === 189) { // -
149 | s = getSliderForKey(e);
150 | s.percent(s.percent() - 0.025);
151 | handled = true;
152 | } else if (e.which === 187) { // +
153 | s = getSliderForKey(e);
154 | s.percent(s.percent() + 0.025);
155 | handled = true;
156 | } else if (e.which === 32) {
157 | $element.find('.draw-preview').click();
158 | handled = true;
159 | } else if (e.which === 90) { // z
160 | $element.find('.draw-undo').click();
161 | handled = true;
162 | } else if (e.which === 80) { // p
163 | $element.find('.draw-picker').click();
164 | handled = true;
165 | } else if (e.which === 76) { // l
166 | $element.find('.draw-level').click();
167 | handled = true;
168 | }
169 |
170 | if (handled) {
171 | e.preventDefault();
172 | $scope.$safeApply();
173 | }
174 |
175 | }
176 |
177 | $($window).on('keydown', onKeyDown);
178 |
179 | $element.find('.draw-brush-depth').on('touchstart mousedown click', function() {
180 | $scope.brushMode = false;
181 | });
182 |
183 | $element.on('$destroy', function() {
184 | $element.off('touchstart mousedown');
185 | $element.off('touchmove mousemove');
186 | $($window).off('keydown', onKeyDown);
187 |
188 | depthy.animateOption(depthy.viewer, {
189 | depthPreview: oldViewerOpts.depthPreview,
190 | depthScale: oldViewerOpts.depthScale,
191 | depthBlurSize: oldViewerOpts.depthBlurSize,
192 | enlarge: oldViewerOpts.enlarge,
193 | }, 250);
194 |
195 | $timeout(function() {
196 | angular.extend(depthy.viewer, oldViewerOpts);
197 | }, 251);
198 |
199 | if (drawer.isCanceled()) {
200 | // restore opened depthmap
201 | viewer.setDepthmap(depthy.opened.depthSource, depthy.opened.depthUsesAlpha);
202 | } else {
203 | if (drawer.isModified()) {
204 | depthy.drawOptions = drawer.getOptions();
205 |
206 | // remember drawn depthmap
207 | // store it as jpg
208 | viewer.exportDepthmap().then(function(url) {
209 | depthy.opened.markAsModified();
210 | depthy.opened.depthSource = url; //viewer.getDepthmap().texture;
211 | depthy.opened.depthUsesAlpha = false;
212 | viewer.setDepthmap(url);
213 | depthy.opened.onDepthmapOpened();
214 | });
215 | }
216 | }
217 |
218 | drawer.destroy(true);
219 |
220 | });
221 |
222 |
223 |
224 | });
--------------------------------------------------------------------------------
/app/scripts/classes/DepthyDrawer.js:
--------------------------------------------------------------------------------
1 | /*
2 | MIT Licensed
3 |
4 | Copyright (c) 2014 Rafał Lindemann. http://panrafal.github.com/depthy
5 | */
6 | (function(root){
7 | 'use strict';
8 |
9 | var DepthyDrawer = root.DepthyDrawer = function(viewer) {
10 |
11 | var self = this,
12 | texture, undoTexture,
13 | lastUndoTime, redoMode = false,
14 | brush, brushCanvas, brushTexture, brushContainer, brushLastPos, brushDirty,
15 | options,
16 | renderer = viewer.getRenderer(),
17 | depthmap = viewer.getDepthmap(),
18 | image = viewer.getImage(),
19 | modified = false, canceled = false,
20 | unit;
21 |
22 | options = {
23 | depth: 0.5,
24 | size: 0.02,
25 | hardness: 0.0,
26 | opacity: 1.0,
27 | spacing: 0.1,
28 | slope: 0.5,
29 | blend: PIXI.blendModes.NORMAL,
30 | undoTimeout: 2000,
31 | };
32 |
33 | function initialize() {
34 |
35 | // always start with a new one...
36 | if (true || depthmap.texture instanceof PIXI.RenderTexture === false) {
37 | // replace the texture
38 | viewer.setDepthmap(viewer.exportDepthmapAsTexture({width: 1000, height: 1000}));
39 | depthmap = viewer.getDepthmap();
40 | }
41 |
42 | texture = depthmap.texture;
43 |
44 | unit = Math.max(image.size.width, image.size.height);
45 |
46 | // setup undo...
47 | // undoTexture = new PIXI.RenderTexture(texture.width, texture.height);
48 |
49 | // setup brush
50 | brushCanvas = document.createElement('canvas');
51 | // brushCanvas.id = 'draw-brushcanvas';
52 | // viewer.getElement().appendChild(brushCanvas);
53 | brushDirty = true;
54 | }
55 |
56 | function updateBrush() {
57 |
58 | var ctx = brushCanvas.getContext('2d'),
59 | depth = options.depth,
60 | size = options.size * unit,
61 | hardness = Math.max(0, Math.min(0.99, options.hardness))
62 |
63 | brushCanvas.width = brushCanvas.height = size;
64 | ctx.clearRect(0, 0, size, size);
65 |
66 |
67 | var grd = ctx.createRadialGradient(size / 2, size / 2, size / 2 * hardness, size / 2, size / 2, size / 2),
68 | color = Math.round((depth) * 0xFF)
69 | grd.addColorStop(0, 'rgba(' + color + ',' + color + ',' + color + ',' + options.opacity + ')');
70 | grd.addColorStop(options.slope, 'rgba(' + color + ',' + color + ',' + color + ',' + (0.5 * options.opacity) + ')');
71 | grd.addColorStop(1, 'rgba(' + color + ',' + color + ',' + color + ',0)');
72 | ctx.fillStyle = grd;
73 | ctx.fillRect(0, 0, size, size);
74 |
75 | // console.log('updateBrush!', options, color, grd);
76 |
77 | if (!brushTexture) {
78 | brushTexture = PIXI.Texture.fromCanvas(brushCanvas);
79 | } else {
80 | brushTexture.width = brushTexture.height = size;
81 | // PIXI.texturesToUpdate.push(brushTexture.baseTexture);
82 | PIXI.updateWebGLTexture(brushTexture.baseTexture, renderer.gl);
83 | }
84 | if (!brush) {
85 | brushContainer = new PIXI.DisplayObjectContainer();
86 | brush = new PIXI.Sprite(brushTexture);
87 | brush.anchor.x = 0.5;
88 | brush.anchor.y = 0.5;
89 | brushContainer.addChild(brush);
90 | }
91 | brush.width = brush.height = size;
92 | brushDirty = false;
93 | }
94 |
95 | function throttledStoreUndo(force) {
96 | if (force || redoMode || !lastUndoTime || new Date() - lastUndoTime > options.undoTimeout) {
97 | storeUndo();
98 | }
99 | lastUndoTime = new Date();
100 | }
101 |
102 | function storeUndo() {
103 | if (!undoTexture) {
104 | undoTexture = new PIXI.RenderTexture(texture.width, texture.height);
105 | }
106 | console.log('Undo stored!');
107 | redoMode = false;
108 | var sprite = new PIXI.Sprite(texture);
109 | undoTexture.render(sprite, null, true);
110 | }
111 |
112 | function toggleUndo() {
113 | if (!undoTexture) return;
114 |
115 | var tmp = undoTexture;
116 | undoTexture = texture;
117 | texture = tmp;
118 | redoMode = !redoMode;
119 |
120 | console.log('Toggle undo!', texture);
121 |
122 | depthmap.shared = true; // won't be destroyed
123 | viewer.setDepthmap(texture);
124 | depthmap = viewer.getDepthmap();
125 | }
126 |
127 | this.setOptions = function(newOptions) {
128 | for(var k in newOptions) {
129 | if (options[k] === newOptions[k]) continue;
130 | options[k] = newOptions[k];
131 | switch(k) {
132 | case 'depth':
133 | case 'size':
134 | case 'hardness':
135 | case 'opacity':
136 | case 'spacing':
137 | case 'slope':
138 | brushDirty = true;
139 | break;
140 | }
141 | }
142 | }
143 |
144 | this.getOptions = function() {
145 | var oc = {};
146 | for(var k in options) oc[k] = options[k];
147 | return oc;
148 | };
149 |
150 | /* -1 undo, 1 redo, 0 no history */
151 | this.getUndoMode = function() {
152 | return redoMode ? 1 : undoTexture ? -1 : 0;
153 | }
154 |
155 | this.toggleUndo = toggleUndo;
156 |
157 | this.drawBrush = function(pos) {
158 | if (brushDirty) updateBrush();
159 | throttledStoreUndo();
160 | brushLastPos = {x: pos.x, y: pos.y};
161 | brush.x = pos.x * depthmap.size.width;
162 | brush.y = pos.y * depthmap.size.height;
163 | // brush.alpha = options.opacity;
164 | brush.blendMode = options.blend;
165 | // console.log('Draw', brush.x, brush.y);
166 | texture.render(brushContainer, null, false);
167 | depthmap.renderDirty = true;
168 | modified = true;
169 | };
170 |
171 | this.drawBrushTo = function(pos) {
172 | var from = {x: brushLastPos.x, y: brushLastPos.y},
173 | to = pos,
174 | dst = Math.sqrt(Math.pow((to.x - from.x) * depthmap.size.width, 2) + Math.pow((to.y - from.y) * depthmap.size.height, 2)),
175 | step = Math.round(Math.max(1, options.spacing * options.size * unit)),
176 | steps = dst / step;
177 | // console.log(dst, step, steps/*, from, to*/);
178 | for (var i = 1; i <= steps; ++i) {
179 | var prg = i / steps;
180 | this.drawBrush({x: from.x + (to.x - from.x) * prg, y: from.y + (to.y - from.y) * prg});
181 | }
182 | };
183 |
184 | this.getDepthAtPos = function(pos) {
185 | return PIXI.glReadPixels(renderer.gl, texture, pos.x * depthmap.size.width, pos.y * depthmap.size.height, 1, 1)[0] / 255;
186 | };
187 |
188 | this.isModified = function() {
189 | return modified;
190 | };
191 |
192 | this.isCanceled = function() {
193 | return canceled;
194 | };
195 |
196 | this.cancel = function() {
197 | canceled = true;
198 | };
199 |
200 | this.destroy = function(destroyTexture) {
201 | if (undoTexture) undoTexture.destroy();
202 | if (brushTexture) brushTexture.destroy();
203 | if (destroyTexture && texture) texture.destroy();
204 | depthmap.shared = false;
205 | };
206 |
207 | initialize();
208 | };
209 |
210 | })(window);
--------------------------------------------------------------------------------
/app/scripts/controllers/main.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('depthyApp')
4 | .controller('MainCtrl', function ($rootScope, $window, $scope, $timeout, ga, depthy, $element, $modal, $state, StateModal) {
5 |
6 | $rootScope.depthy = depthy;
7 | $rootScope.viewer = depthy.viewer; // shortcut
8 | $rootScope.Modernizr = window.Modernizr;
9 | $rootScope.Math = window.Math;
10 | $rootScope.screenfull = screenfull;
11 |
12 | $scope.version = depthy.getVersion();
13 |
14 | ga('set', 'dimension1', (Modernizr.webgl ? 'webgl' : 'no-webgl') + ' ' + (Modernizr.webp ? 'webp' : 'no-webp'));
15 |
16 | $rootScope.$safeApply = function(fn) {
17 | var phase = this.$root.$$phase;
18 | if(phase === '$apply' || phase === '$digest') {
19 | if(fn && (typeof(fn) === 'function')) {
20 | fn();
21 | }
22 | } else {
23 | this.$apply(fn);
24 | }
25 | };
26 |
27 | $scope.loadSample = function(name) {
28 | $state.go('sample', {id: name});
29 | // depthy.leftpaneOpen(true);
30 | };
31 |
32 | $scope.openImage = function(image) {
33 | $state.go(image.state, image.stateParams);
34 | // depthy.leftpaneOpen(true);
35 | };
36 |
37 |
38 |
39 | $scope.$watch('compoundFiles', function(files) {
40 | if (files && files.length) {
41 | depthy.loadLocalImage(files[0]).then(
42 | function() {
43 | ga('send', 'event', 'image', 'parsed', depthy.hasDepthmap() ? 'depthmap' : 'no-depthmap');
44 | depthy.leftpaneClose();
45 | depthy.opened.openState();
46 | },
47 | function(e) {
48 | ga('send', 'event', 'image', 'error', e);
49 | depthy.leftpaneClose();
50 | }
51 | );
52 | // depthy.handleCompoundFile(files[0]);
53 | }
54 | });
55 |
56 |
57 | $scope.$watch('depthy.useOriginalImage', function() {
58 | depthy.refreshOpenedImage();
59 | });
60 |
61 |
62 | $scope.imageOptions = function() {
63 | depthy.openPopup('image.options');
64 | };
65 |
66 | $scope.shareOptions = function() {
67 | depthy.openPopup('share.options');
68 | };
69 |
70 | $scope.imageInfo = function() {
71 | StateModal.showModal('image.info', {
72 | templateUrl: 'views/image-info-modal.html',
73 | windowClass: 'info-modal',
74 | controller: 'ImageInfoModalCtrl',
75 | });
76 | };
77 |
78 | $scope.exportAnimationOptions = function(type) {
79 | var oldAnimate = depthy.viewer.animate;
80 | depthy.viewer.animate = true;
81 |
82 | if (type === 'gif') {
83 | depthy.exportSize = Math.min(500, depthy.exportSize);
84 | }
85 |
86 | depthy.openPopup('export.' + type + '.options').promise.finally(function() {
87 | depthy.viewer.animate = oldAnimate;
88 | });
89 |
90 | };
91 |
92 | $scope.exportAnimationRun = function(type) {
93 | depthy.exportActive = true;
94 | StateModal.showModal('export.' + type + '.run', {
95 | // stateOptions: {location: 'replace'},
96 | templateUrl: 'views/export-' + type + '-modal.html',
97 | controller: 'Export' + type.substr(0,1).toUpperCase() + type.substr(1) + 'ModalCtrl',
98 | // backdrop: 'static',
99 | windowClass: 'export-' + type + '-modal',
100 | }).result.finally(function() {
101 | depthy.exportActive = false;
102 | });
103 | };
104 |
105 | $scope.exportPngRun = function() {
106 | StateModal.showModal('export.png', {
107 | // stateOptions: {location: 'replace'},
108 | templateUrl: 'views/export-png-modal.html',
109 | controller: 'ExportPngModalCtrl',
110 | windowClass: 'export-png-modal',
111 | }).result.finally(function() {
112 | });
113 | };
114 |
115 | $scope.exportJpgRun = function() {
116 | StateModal.showModal('export.jpg', {
117 | // stateOptions: {location: 'replace'},
118 | templateUrl: 'views/export-jpg-modal.html',
119 | controller: 'ExportJpgModalCtrl',
120 | windowClass: 'export-jpg-modal',
121 | }).result.finally(function() {
122 | });
123 | };
124 |
125 | $scope.exportAnaglyphRun = function() {
126 | StateModal.showModal('export.anaglyph', {
127 | // stateOptions: {location: 'replace'},
128 | templateUrl: 'views/export-anaglyph-modal.html',
129 | controller: 'ExportAnaglyphModalCtrl',
130 | windowClass: 'export-anaglyph-modal modal-lg',
131 | }).result.finally(function() {
132 | });
133 | };
134 |
135 | $scope.sharePngRun = function() {
136 | StateModal.showModal('share.png', {
137 | // stateOptions: {location: 'replace'},
138 | templateUrl: 'views/share-png-modal.html',
139 | controller: 'SharePngModalCtrl',
140 | // backdrop: 'static',
141 | // keyboard: false,
142 | windowClass: 'share-png-modal',
143 | }).result.finally(function() {
144 | });
145 | };
146 |
147 | $scope.drawDepthmap = function() {
148 | $state.go('draw');
149 | };
150 |
151 | $scope.debugClicksLeft = 2;
152 | $scope.debugClicked = function() {
153 | if (--$scope.debugClicksLeft === 0) depthy.enableDebug();
154 | };
155 |
156 | $scope.$watch('(depthy.activePopup.state === "export.gif.options" || depthy.activePopup.state === "export.webm.options" || depthy.exportActive) && depthy.exportSize', function(size) {
157 | if (size) {
158 | depthy.isViewerOverriden(true);
159 | depthy.viewer.size = {width: size, height: size};
160 | if (depthy.viewer.fit) $scope.oldFit = depthy.viewer.fit;
161 | depthy.viewer.fit = false;
162 | console.log('Store fit ' + $scope.oldFit)
163 | } else {
164 | if ($scope.oldFit) {
165 | depthy.viewer.fit = $scope.oldFit;
166 | console.log('Restore fit ' + $scope.oldFit)
167 | }
168 | $($window).resize();
169 | depthy.isViewerOverriden(false);
170 | }
171 | });
172 |
173 | $scope.$watch('viewer.fit', function(fit) {
174 | if (fit === 'cover') {
175 | depthy.viewer.upscale = 4;
176 | } else if (fit === 'contain') {
177 | depthy.viewer.upscale = 1;
178 | }
179 | });
180 |
181 |
182 | $scope.$on('pixi.webgl.init.exception', function(evt, exception) {
183 | console.error('WebGL Init Exception', exception);
184 | Modernizr.webgl = false;
185 | ga('send', 'event', 'webgl', 'exception', exception.toString(), {nonInteraction: 1});
186 | });
187 |
188 | $($window).on('resize', function() {
189 | var $viewer = $('#viewer');
190 | depthy.viewer.size = {
191 | width: $viewer.width(),
192 | height: $viewer.height(),
193 | };
194 | console.log('Resize %dx%d', $viewer.width(), $viewer.height());
195 | $scope.$safeApply();
196 | });
197 | $($window).resize();
198 |
199 | $($window).on('online offline', function() {
200 | $scope.$safeApply();
201 | });
202 |
203 | $timeout(function() {
204 | $scope.scroll = new IScroll('#leftpane', {
205 | mouseWheel: true,
206 | scrollbars: 'custom',
207 | click: false,
208 | fadeScrollbars: true,
209 | interactiveScrollbars: true,
210 | resizeScrollbars: false,
211 | eventPassthrough: 'horizontal',
212 | });
213 | // refresh on every digest...
214 | $scope.$watch(function() {
215 | setTimeout(function() {
216 | $scope.scroll.refresh();
217 | }, 100);
218 | });
219 | });
220 |
221 |
222 |
223 |
224 | });
--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | DEPTHY
6 |
43 |
44 |
Depthy
45 |
Depthy shows Google Camera Lens Blur photos with 3D parallax effect and creates animated GIFs from them. Plus extracts the depth map and enables you to create your own!
46 |
47 |
Unfortunately your browser is not supported .Use something newer , like Chrome for example.
48 |
49 |
52 |
11 |
12 |
13 |
14 |
15 |
16 |
18 |
19 |
20 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
Move your {{Modernizr.devicemotion && Modernizr.mobile ? 'device' : 'cursor'}} around to see the effect
90 |
91 |
92 |
93 |
94 |
95 |
96 |
114 |
115 |
127 |
128 |
');
43 | xmp.push('');
44 | xmp.push(' ');
53 | return xmp.join('');
54 | },
55 |
56 | dataURIinfo: function(uri) {
57 | var match = uri.match(/^data:(.+?);(.+?),(.+)$/);
58 | return match ? {
59 | mime: match[1],
60 | encoding: match[2],
61 | data: match[3]
62 | } : null;
63 | },
64 |
65 | /**
66 | @param ArrayBuffer buffer image JPG as an ArrayBuffer
67 | @param dataURI depthmap
68 | @param dataURI original
69 | */
70 | encodeDepthmap: function(buffer, depthmap, original, metadata) {
71 | var props = {}, extProps = {}, standardXMP, extendedXMP;
72 | depthmap = this.dataURIinfo(depthmap || '');
73 | original = this.dataURIinfo(original || '');
74 | if (original) {
75 | props['GImage:Mime'] = original.mime;
76 | extProps['GImage:Data'] = original.data;
77 | console.log('Original size', original.data.length);
78 | }
79 | if (depthmap) {
80 | props['GDepth:Format'] = 'RangeInverse';
81 | props['GDepth:Mime'] = depthmap.mime;
82 | extProps['GDepth:Data'] = depthmap.data;
83 | console.log('Depthmap size', depthmap.data.length);
84 | }
85 | for (var k in metadata || {}) {
86 | props[k] = metadata[k];
87 | }
88 | standardXMP = this.buildXMP(props);
89 | extendedXMP = this.buildXMP(extProps);
90 |
91 | return this.encodeXMP(buffer, standardXMP, extendedXMP);
92 | },
93 |
94 | encodeXMP: function(buffer, standardXMP, extendedXMP) {
95 | var data = new DataView(buffer),
96 | offset = 0,
97 | parts = [],
98 | xmpWritten = false,
99 | self = this;
100 |
101 | function writeXMP() {
102 | if (!xmpWritten) {
103 | parts.push.apply(parts, self.buildXMPsegments(standardXMP, extendedXMP));
104 | console.log('XMP written!');
105 | xmpWritten = true;
106 | }
107 | }
108 |
109 | while (offset < data.byteLength) {
110 | var segType, segSize, app1Header, segStart, b;
111 | segStart = offset;
112 | console.log('Offset ' + offset);
113 | if ((b = data.getUint8(offset++)) !== 0xFF) {
114 | throw 'Bad JPG Format, 0xFF expected, got ' + b;
115 | }
116 | do {
117 | segType = data.getUint8(offset++);
118 | if (segType === 0xFF) {
119 | console.log('Padding 0xFF found');
120 | parts.push(new Uint8Array([0xFF]));
121 | } else break;
122 | } while (true);
123 | if (segType === 0xC0 || segType === 0xC2 || segType === 0xDA) {
124 | writeXMP(); // right before SOF / SOS
125 | }
126 | if (segType === 0xDA) {
127 | // copy the rest on SOS... no XMP should exist beyound that point
128 | console.log('SOS found, copy remaining bytes ' + (buffer.byteLength - segStart));
129 | parts.push(new Uint8Array(buffer, segStart, buffer.byteLength - segStart));
130 | break;
131 | }
132 | if (segType === 0x00 || (segType >= 0xD0 && segType <= 0xD9)) {
133 | parts.push(new Uint8Array(buffer, segStart, 2));
134 | console.log('Found ctrl segment ' + segType);
135 | continue;
136 | }
137 | segSize = data.getUint16(offset);
138 | offset += 2;
139 | if (segType === 0xE1) {
140 | // read header
141 | app1Header = '';
142 | while ((b = data.getUint8(offset++)) !== 0x0) {
143 | app1Header += String.fromCharCode(b);
144 | }
145 | console.log('Found APP1 ' + app1Header);
146 | // ignore any existing XMP
147 | if (app1Header === this.xmpHeader || app1Header === this.xmpExtensionHeader) {
148 | console.log('Found old XMP, skipping');
149 | offset += segSize - (offset - segStart - 2);
150 | continue;
151 | }
152 | }
153 | // copying segment
154 | console.log('Copying segment ' + segType + ', size: ' + segSize + ', left:' + (segSize - (offset - segStart - 2)));
155 | offset += segSize - (offset - segStart - 2);
156 | parts.push(new Uint8Array(buffer, segStart, 2 + segSize));
157 | if (segType === 0xE1) {
158 | writeXMP(); // right after EXIF
159 | }
160 | }
161 | // console.log('Parts', parts);
162 | return new Blob(parts, {type: 'image/jpeg'});
163 | },
164 |
165 | buildXMPsegments: function(standardXMP, extendedXMP) {
166 | var extendedUid, parts = [];
167 | if (extendedXMP) {
168 | extendedUid = CryptoJS.MD5(extendedXMP).toString().toUpperCase();
169 | console.log('ExtendedUID', extendedUid);
170 | standardXMP = standardXMP.replace(/(',a,""].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.flexbox=function(){return F("flexWrap")},q.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},q.webgl=function(){return!!a.WebGLRenderingContext},q.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:w(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},q.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},q.webworkers=function(){return!!a.Worker};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f= vectorCutoff && confidenceSum < CONFIDENCE_MAX) {
172 | #endif
173 | float depth = 1.0 - texture2D(displacementMap, vpos * vec2(1, -1) + vec2(0, 1)).r;
174 | depth = clamp(depth, dmin, dmax);
175 | float confidence;
176 |
177 | #if METHOD == 1
178 | confidence = step(dpos, depth + 0.001);
179 |
180 | #elif METHOD == 2
181 | confidence = 1.0 - abs(dpos - depth);
182 | if (confidence < 1.0 - minConfidence * 2.0) confidence = 0.0;
183 |
184 | #elif METHOD == 5
185 | confidence = 1.0 - abs(dpos - depth);
186 | confidence = pow(confidence, maskPower);
187 |
188 | #endif
189 |
190 | #ifndef BRANCHLOOP
191 | confidence *= step(vectorCutoff, dpos);
192 | confidence *= step(confidenceSum, CONFIDENCE_MAX);
193 | #endif
194 |
195 | #ifndef ANTIALIAS
196 | #elif ANTIALIAS == 1 // go back halfstep, go forward fullstep - branched
197 | if (confidence > AA_TRIGGER && i == j) {
198 | j -= 0.5;
199 | } else {
200 | j += 1.0;
201 | }
202 | // confidence *= CONFIDENCE_MAX / 3.0;
203 |
204 | #elif ANTIALIAS == 2 // go back halfstep, go forward fullstep - mult
205 | j += 1.0 + step(AA_TRIGGER, confidence)
206 | * step(i, j) * -1.5;
207 | // confidence *= CONFIDENCE_MAX / 3.0;
208 |
209 | #elif ANTIALIAS == 11
210 | if (confidence >= AA_TRIGGER && i == j && steps - i > 1.0) {
211 | loopStep = AA_POWER * 2.0 / min(AA_MAXITER, steps - i - 1.0);
212 | j -= AA_POWER + loopStep;
213 | }
214 | confidence *= loopStep;
215 | j += loopStep;
216 | #elif ANTIALIAS == 12
217 | float _if_aa = step(AA_TRIGGER, confidence)
218 | * step(i, j)
219 | * step(1.5, steps - i);
220 | loopStep = _if_aa * (AA_POWER * 2.0 / min(AA_MAXITER, max(0.1, steps - i - 1.0)) - 1.0) + 1.0;
221 | confidence *= loopStep;
222 | j += _if_aa * -(AA_POWER + loopStep) + loopStep;
223 | #endif
224 |
225 |
226 | #ifdef BRANCHSAMPLE
227 | if (confidence > 0.0) {
228 | #endif
229 |
230 | #ifdef CORRECT
231 | #define CORRECTION_MATH +( ( vec2((depth - dpos) / (dstep * correctPower)) * vstep ))
232 | #else
233 | #define CORRECTION_MATH
234 | #endif
235 |
236 | #ifdef COLORAVG
237 | colSum += texture2D(uSampler, vpos CORRECTION_MATH) * confidence;
238 | #else
239 | posSum += (vpos CORRECTION_MATH) * confidence;
240 | #endif
241 | confidenceSum += confidence;
242 |
243 | #ifdef BRANCHSAMPLE
244 | }
245 | #endif
246 |
247 |
248 | #if DEBUG > 2
249 | gl_FragColor = vec4(vector[0] / 2.0 + 1.0, vector[1].xy / 2.0 + 1.0);
250 | #elif DEBUG > 1
251 | gl_FragColor = vec4(confidenceSum, depth, dpos, 0);
252 | #elif DEBUG > 0
253 | gl_FragColor = vec4(confidence, depth, dpos, 0);
254 | #endif
255 | #ifdef DEBUGBREAK
256 | if (i == float(DEBUGBREAK)) {
257 | dpos = 0.0;
258 | }
259 | #endif
260 |
261 | #ifdef BRANCHLOOP
262 | }
263 | #endif
264 | };
265 |
266 | #if defined(COLORAVG) && DEBUG == 0
267 | gl_FragColor = colSum / vec4(confidenceSum);
268 | #elif !defined(COLORAVG) && DEBUG == 0
269 | gl_FragColor = texture2D(uSampler, posSum / confidenceSum);
270 | #endif
271 |
272 | }
--------------------------------------------------------------------------------
/app/scripts/directives/rangeStepper.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('depthyApp')
4 | .directive('rangeStepper', function ($parse, $timeout, $compile) {
5 | return {
6 | restrict: 'A',
7 | scope: true,
8 | require: ['rangeStepper', 'ngModel'],
9 | // template: '
',
10 | // transclude: true,
11 | controller: function() {
12 | },
13 | compile: function($element, $attrs) {
14 | // console.log($element);
15 | var labelTemplate;
16 | if (!$element.find('.rs-value, .rs-thumb').length) {
17 | labelTemplate = $element.html();
18 | $element.html('');
19 | }
20 | return function postLink($scope, $element, $attrs, ctrls) {
21 | var values = $scope.$parent.$eval($attrs.values),
22 | options,
23 | position, defaultFormatter,
24 | rangeStepper = ctrls[0],
25 | ngModel = ctrls[1];
26 |
27 | options = angular.extend({
28 | // snap to defined values - 0.0 - 1.0
29 | snap: 0.1,
30 | // step between defined values - 0.0 - 1.0
31 | step: 0,
32 | // interpolated values will have this precision
33 | precision: 0.001,
34 | labelTemplate: labelTemplate || '{{getLabel(v)}}',
35 | valuesTemplate: '',
36 | thumbTemplate: '',
37 | format: 0.1,
38 | units: '',
39 | }, $scope.$parent.$eval($attrs.rangeStepper) || {});
40 |
41 | if (angular.isFunction(options.format)) {
42 | defaultFormatter = options.format;
43 | } else if (angular.isNumber(options.format)) {
44 | var precision = options.format;
45 | defaultFormatter = function(v) {
46 | return precise(v, precision);
47 | };
48 | } else if (options.format === '%') {
49 | defaultFormatter = function(v) {return Math.round(v * 100);};
50 | // } else if (angular.isString(options.format)) {
51 | // defaultFormatter = $format(options.format);
52 | } else {
53 | defaultFormatter = function(v) {return v;};
54 | }
55 |
56 | if (!values || values.length < 2) {
57 | console.error('Values are missing! Expr: %s, evaled to %o', $attrs.values, values);
58 | }
59 |
60 | function initialize() {
61 | // setup templates
62 | if ($element.find('.rs-value').length === 0) {
63 | $element.append($compile(options.valuesTemplate.replace(/