Merge branch 'AL-7339-media' into 'master'

Al 7339 media

See merge request avvy/web-app-avvy-shaderlib!11

build/avvy-shaderlib.js

@@ -134,7 +134,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__materials_Water__ = __webpack_require__(19);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__materials_Simple__ = __webpack_require__(24);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__materials_PBR__ = __webpack_require__(27);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__materials_Colormap__ = __webpack_require__(32);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__materials_Colormap__ = __webpack_require__(28);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__materials_Media__ = __webpack_require__(33);
+
 
 
 
@@ -157,6 +159,7 @@ function ShaderLib() {
         'flower': __WEBPACK_IMPORTED_MODULE_0__materials_Flower__["a" /* Flower */],
         'PBR': __WEBPACK_IMPORTED_MODULE_7__materials_PBR__["a" /* PBR */],
         'colormap': __WEBPACK_IMPORTED_MODULE_8__materials_Colormap__["a" /* ColorMap */],
+        'media': __WEBPACK_IMPORTED_MODULE_9__materials_Media__["a" /* Media */],
     };
 
     this.matObjects = {};
@@ -768,17 +771,19 @@ PBR.prototype.init = function () {
     this.material.userData.args = this.args;
     this.material.userData.effect = 'PBR';
 
+/*
     this.material.onBeforeCompile = function (shader) {
-        shader.vertexShader = __webpack_require__(28) + shader.vertexShader;
+        shader.vertexShader = require('../glsl/vs/post_outline_pars.vs.glsl') + shader.vertexShader;
 
         shader.vertexShader = shader.vertexShader.replace('#include <begin_vertex>',
-            __webpack_require__(29));
+            require('../glsl/vs/post_outline.vs.glsl'));
 
-        shader.fragmentShader = __webpack_require__(30) + shader.fragmentShader;
+        shader.fragmentShader = require('../glsl/fs/post_outline_pars.fs.glsl') + shader.fragmentShader;
 
         shader.fragmentShader = shader.fragmentShader.replace('#include <dithering_fragment>',
-            __webpack_require__(31));
+            require('../glsl/fs/post_outline.fs.glsl'));
     };
+*/
 
     return this;
 
@@ -789,30 +794,6 @@ PBR.prototype.init = function () {
 
 /***/ }),
 /* 28 */
-/***/ (function(module, exports) {
-
-module.exports = "varying vec2 _vUv;\nvarying vec3 _vPosition;\nvarying vec3 _vNormal;\n\nvarying vec3 fNormal;\nvarying vec3 fPosition;\nvarying vec2 fUv;\n"
-
-/***/ }),
-/* 29 */
-/***/ (function(module, exports) {
-
-module.exports = "vec3 transformed = vec3( position );\n_vPosition = transformed;\n_vUv = uv;\n_vNormal = normal;\n\nfNormal = normalize(normalMatrix * normal);\nvec4 pos = modelViewMatrix * vec4(position, 1.0);\nfPosition = pos.xyz;\nfUv = uv;"
-
-/***/ }),
-/* 30 */
-/***/ (function(module, exports) {
-
-module.exports = "varying vec2 _vUv;\nvarying vec3 _vPosition;\nvarying vec3 _vNormal;\n\nvarying vec3 fNormal;\nvarying vec3 fPosition;\nvarying vec2 fUv;\n\n\n/*float calcFactor(vec2 uv, float threshold, float gap) {\n    return clamp(smoothstep(threshold - gap, threshold + gap, uv.x) + smoothstep(threshold - gap, threshold + gap, uv.y), 0., 1.);\n}*/\n\nfloat border(vec2 uv, float uLineWidth, vec2 gap) {\n    vec2 xy0 = smoothstep(vec2(uLineWidth) - gap, vec2(uLineWidth) + gap, uv);\n    vec2 xy1 = smoothstep(vec2(1. - uLineWidth) - gap, vec2(1. - uLineWidth) + gap, uv);\n    vec2 xy = xy0 - xy1;\n    return clamp(xy.x * xy.y, 0., 1.);\n}\n"
-
-/***/ }),
-/* 31 */
-/***/ (function(module, exports) {
-
-module.exports = "/* dithering_fragment */\n\n#ifdef DITHERING\n    gl_FragColor.rgb = dithering( gl_FragColor.rgb );\n#endif\n\n\n/* custom */\n\n/*\nfloat fn = 0.07;\nif (_vUv.x < fn || _vUv.x > 1.0-fn || _vUv.y < fn|| _vUv.y > 1.0-fn ) {\n    gl_FragColor = vec4(1.0,1,0,1.0);\n}\n*/\n\n/*\nvec3 uLineColor = vec3(1.0,1.0,1.0);\nvec3 uBgColor = gl_FragColor.rgb;\nfloat uLineWidth = 0.01;\n\nfloat threshold = 1. - uLineWidth;\nfloat gap = uLineWidth + .05;\nfloat factor = calcFactor(_vUv, threshold, gap);\ngl_FragColor = mix(vec4(uLineColor, 1.), vec4(uBgColor, 1.), 1. - factor);*/\n\n\nvec3 uLineColor = vec3(1.0,1.0,1.0);\nvec3 uBgColor = gl_FragColor.rgb;\nfloat uLineWidth = 0.01;\n\nvec2 fw = vec2(uLineWidth + 0.005);\nvec2 coords = _vUv.xy;\n\nfloat br = border(coords, uLineWidth, fw);\ngl_FragColor = vec4(mix(uLineColor, uBgColor, br), 1.);\n"
-
-/***/ }),
-/* 32 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -849,15 +830,15 @@ ColorMap.prototype.prepare = function () {
         this.material.onBeforeCompile = function (shader) {
             shader.uniforms.uColor = this.userData.uniforms.uColor;
 
-            shader.fragmentShader = __webpack_require__(33) + shader.fragmentShader;
+            shader.fragmentShader = __webpack_require__(29) + shader.fragmentShader;
 
             shader.fragmentShader = shader.fragmentShader.replace('#include <map_fragment>',
-                __webpack_require__(34));
+                __webpack_require__(30));
 
-            shader.vertexShader = __webpack_require__(35) + shader.vertexShader;
+            shader.vertexShader = __webpack_require__(31) + shader.vertexShader;
 
             shader.vertexShader = shader.vertexShader.replace('#include <begin_vertex>',
-                __webpack_require__(36));
+                __webpack_require__(32));
         };
     }
     return this;
@@ -867,29 +848,139 @@ ColorMap.prototype.prepare = function () {
 
 
 /***/ }),
-/* 33 */
+/* 29 */
 /***/ (function(module, exports) {
 
 module.exports = "uniform vec3 uColor;\nvarying vec3 vWorldPosition;\n\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }\n\n\nfloat snoise(vec2 v) {\n\n    const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);\n\n    vec2 i  = floor(v + dot(v, C.yy));\n    vec2 x0 = v - i + dot(i, C.xx);\n\n    vec2 i1 = vec2(0.0);\n    i1 = (x0.x > x0.y)? vec2(1.0, 0.0):vec2(0.0, 1.0);\n    vec2 x1 = x0.xy + C.xx - i1;\n    vec2 x2 = x0.xy + C.zz;\n\n    i = mod289(i);\n    vec3 p = permute(\n    permute( i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0 ));\n\n    vec3 m = max(0.5 - vec3(\n    dot(x0,x0),\n    dot(x1,x1),\n    dot(x2,x2)\n    ), 0.0);\n\n    m = m*m ;\n    m = m*m ;\n\n    vec3 x = 2.0 * fract(p * C.www) - 1.0;\n    vec3 h = abs(x) - 0.5;\n    vec3 ox = floor(x + 0.5);\n    vec3 a0 = x - ox;\n\n    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0+h*h);\n\n    vec3 g = vec3(0.0);\n    g.x  = a0.x  * x0.x  + h.x  * x0.y;\n    g.yz = a0.yz * vec2(x1.x,x2.x) + h.yz * vec2(x1.y,x2.y);\n    return 130.0 * dot(m, g);\n}\n"
 
 /***/ }),
-/* 34 */
+/* 30 */
 /***/ (function(module, exports) {
 
 module.exports = "#ifdef USE_MAP\n    vec4 texelColor = texture2D( map, vUv );\n    texelColor = mapTexelToLinear( texelColor );\n    diffuseColor *= texelColor;\n\n    vec2 pos = vec2(vWorldPosition.xz*0.25);\n    vec3 color = vec3(0.0);\n\n    pos *= 0.2;\n\n    color = vec3(snoise(pos)*.5+.5);\n    vec4 col =  vec4(uColor.xyz, 0.2) * vec4(vec3(color), 0.8);\n    diffuseColor = mix (diffuseColor, col, col.w);\n\n\n#endif"
 
 /***/ }),
-/* 35 */
+/* 31 */
 /***/ (function(module, exports) {
 
 module.exports = "varying vec3 vWorldPosition;\n"
 
 /***/ }),
-/* 36 */
+/* 32 */
 /***/ (function(module, exports) {
 
 module.exports = "vec3 transformed = vec3( position );\n\n//vec4 _Position = vec4( position, 1.0 );\n\n/*#ifdef USE_INSTANCING\n    _Position = instanceMatrix * _Position;\n#endif\n\nvec4 worldPosition4 = projectionMatrix * _Position;\nvWorldPosition = vec3(worldPosition4);*/\n\nvec4 slWorldPosition = vec4( transformed, 1.0 );\n\n#ifdef USE_INSTANCING\n    slWorldPosition = instanceMatrix * slWorldPosition;\n#endif\n\nslWorldPosition = modelMatrix * slWorldPosition;\n\nvWorldPosition = vec3(slWorldPosition);"
 
+/***/ }),
+/* 33 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Media; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__core_BaseMaterial__ = __webpack_require__(0);
+
+
+function Media(args) {
+    __WEBPACK_IMPORTED_MODULE_0__core_BaseMaterial__["a" /* BaseMaterial */].call(this);
+
+    this.args = args;
+
+    let xSize = this.args.mesh.geometry.boundingBox.max.x - this.args.mesh.geometry.boundingBox.min.x;
+    let ySize = this.args.mesh.geometry.boundingBox.max.y - this.args.mesh.geometry.boundingBox.min.y;
+
+    if (xSize > ySize) {
+        xSize = xSize / ySize;
+        ySize = 1;
+    } else {
+        ySize = ySize / xSize;
+        xSize = 1;
+    }
+
+    this.uniforms = {
+        uTime: {value: 0},
+        uFactorX: {value: xSize},
+        uFactorY: {value: ySize},
+        uScale: {value: 1},
+        outlineSampler: {type: 't', value: new THREE.TextureLoader().load('/static/img/mediablock_alpha.png')},
+    };
+
+    this.material = null;
+
+
+    this.prepare();
+}
+
+Media.prototype = Object.create(__WEBPACK_IMPORTED_MODULE_0__core_BaseMaterial__["a" /* BaseMaterial */].prototype);
+Media.prototype.constructor = Media;
+
+Media.prototype.prepare = function () {
+    this.material = this.copy(this.args.mesh.material);
+
+    this.material.emissiveMap = this.material.map;
+    this.material.map = null;
+    this.material.transparent = true;
+    this.material.depthWrite = false;
+    this.material.depthTest = true;
+    this.material.renderOrder = -1;
+    this.material.side = THREE.FrontSide;
+
+    this.material.userData.effect = 'Media';
+    this.material.userData.args = this.args;
+    this.material.userData.uniforms = this.uniforms;
+
+    this.material.onBeforeCompile = function (shader) {
+
+        shader.uniforms.uTime = this.userData.uniforms.uTime;
+        shader.uniforms.uFactorX = this.userData.uniforms.uFactorX;
+        shader.uniforms.uFactorY = this.userData.uniforms.uFactorY;
+        shader.uniforms.uScale = this.userData.uniforms.uScale;
+        shader.uniforms.outlineSampler = this.userData.uniforms.outlineSampler;
+
+        shader.fragmentShader = __webpack_require__(34) + '\n' + shader.fragmentShader;
+
+        shader.fragmentShader = shader.fragmentShader.replace('#include <dithering_fragment>', //dithering_fragment  map_fragment
+            __webpack_require__(35));
+
+        shader.vertexShader = __webpack_require__(36) + '\n' + shader.vertexShader;
+
+        shader.vertexShader = shader.vertexShader.replace('#include <begin_vertex>',
+            __webpack_require__(37));
+    };
+    return this;
+
+};
+
+Media.prototype.update = function (dt) {
+    this.uniforms.uTime.value += dt;
+
+};
+
+
+
+/***/ }),
+/* 34 */
+/***/ (function(module, exports) {
+
+module.exports = "varying vec2 _vUV;\nvarying vec4 _vTexCoords;\nvarying vec3 _vNormal;\nvarying vec4 _vWorldPosition;\n\nuniform float uTime;\nuniform float uFactorX;\nuniform float uFactorY;\nuniform float uScale;\nuniform sampler2D outlineSampler;\n\nvec2 _voronoi_RandomVector_float (vec2 UV, float offset)\n{\n    mat2 m = mat2(15.27, 47.63, 99.41, 89.98);\n    UV = fract(sin(UV * m));\n    return vec2(sin(UV.y*+offset)*0.5+0.5, cos(UV.x*offset)*0.5+0.5);\n}\n\nvoid _voronoi_float(vec2 UV, float AngleOffset, float CellDensity, out float Out, out float Cells)\n{\n    vec2 g = floor(UV * CellDensity);\n    vec2 f = fract(UV * CellDensity);\n    float t = 8.0;\n    vec3 res = vec3(8.0, 0.0, 0.0);\n\n    for(int y=-1; y<=1; y++)\n    {\n        for(int x=-1; x<=1; x++)\n        {\n            vec2 lattice = vec2(x,y);\n            vec2 offset = _voronoi_RandomVector_float(lattice + g, AngleOffset);\n            float d = distance(lattice + offset, f);\n\n            if(d < res.x)\n            {\n                res = vec3(d, offset.x, offset.y);\n                Out = res.x;\n                Cells = res.y;\n            }\n        }\n    }\n}"
+
+/***/ }),
+/* 35 */
+/***/ (function(module, exports) {
+
+module.exports = "float offset = uTime * 1.0;\n\nfloat cells;\nfloat cells2;\n\nvec2 uv2 = _vUV * uScale;\nuv2.x = uv2.x*uFactorX;\nuv2.y = uv2.y*uFactorY;\n\n_voronoi_float(uv2, offset, 4.0, cells, cells2);\n\ncells = cells * 1.2;\nvec4 tex = texture2D( outlineSampler, _vUV);\ntex  = tex * -1.1;\n\nvec4 col = (vec4(cells) - tex) * vec4(0.7, 0.86, 0.94, 0.18);// * diffuseColor;\n\nvec4 emissiveColor2 = texture2D( emissiveMap, vUv );\nemissiveColor2.rgb = emissiveMapTexelToLinear( emissiveColor2 ).rgb;\ntotalEmissiveRadiance *= emissiveColor2.rgb;\n\ngl_FragColor = mix (col, emissiveColor2, emissiveColor2.w);\n"
+
+/***/ }),
+/* 36 */
+/***/ (function(module, exports) {
+
+module.exports = "varying vec2 _vUV;\nvarying vec4 _vTexCoords;\nvarying vec3 _vNormal;\nvarying vec4 _vWorldPosition;\n"
+
+/***/ }),
+/* 37 */
+/***/ (function(module, exports) {
+
+module.exports = "vec3 transformed = vec3( position );\n_vUV = uv;\n"
+
 /***/ })
 /******/ ]);
 });
\ No newline at end of file

src/editor/mocks/MockMedia.js

+import {EventDispatcher} from "avvyland-editor/src/core/EventDispatcher";
+
+function MockMedia() {
+
+}
+
+MockMedia.prototype.constructor = MockMedia;
+
+MockMedia.prototype.getMock = function () {
+
+    return {};
+
+};
+export {MockMedia}
\ No newline at end of file

src/editor/modules/MockController.js

@@ -8,6 +8,7 @@ import {MockOutline} from "../mocks/MockOutline";
 import {MockFlower} from "../mocks/MockFlower";
 import {MockPBR} from "../mocks/MockPBR";
 import {MockColorMap} from "../mocks/MockColorMap";
+import {MockMedia} from "../mocks/MockMedia";
 
 
 function MockController() {
@@ -21,6 +22,7 @@ function MockController() {
         'PBR': new MockPBR(),
         'flower': new MockFlower(),
         'colormap': new MockColorMap(),
+        'media': new MockMedia(),
     };
 
     const _this = this;

src/editor/settings.js

@@ -8,10 +8,13 @@ export const BLOCK_ID = [
     "1693498425197436682",
     "1693498425197436682",
     "5075465772448925158",
-    "36973535368859058",
+    "17617086485307841930",
+    "7754572731808253331",
+    "15212218644260260682",
+    "17717244977373136322",
 
 
 ];
 
-export const ACTIVE_BLOCK = BLOCK_ID[6];
-export const ACTIVE_SHADER = 'PBR';
+export const ACTIVE_BLOCK = BLOCK_ID[8];
+export const ACTIVE_SHADER = 'media';

src/library/ShaderLib.js

@@ -7,6 +7,7 @@ import {Water} from "./materials/Water";
 import {Simple} from "./materials/Simple";
 import {PBR} from "./materials/PBR";
 import {ColorMap} from "./materials/Colormap";
+import {Media} from "./materials/Media";
 
 function ShaderLib() {
 
@@ -20,6 +21,7 @@ function ShaderLib() {
         'flower': Flower,
         'PBR': PBR,
         'colormap': ColorMap,
+        'media': Media,
     };
 
     this.matObjects = {};

src/library/glsl/fs/media.fs.glsl

+float offset = uTime * 1.0;
+
+float cells;
+float cells2;
+
+vec2 uv2 = _vUV * uScale;
+uv2.x = uv2.x*uFactorX;
+uv2.y = uv2.y*uFactorY;
+
+_voronoi_float(uv2, offset, 4.0, cells, cells2);
+
+cells = cells * 1.2;
+vec4 tex = texture2D( outlineSampler, _vUV);
+tex  = tex * -1.1;
+
+vec4 col = (vec4(cells) - tex) * vec4(0.7, 0.86, 0.94, 0.18);// * diffuseColor;
+
+vec4 emissiveColor2 = texture2D( emissiveMap, vUv );
+emissiveColor2.rgb = emissiveMapTexelToLinear( emissiveColor2 ).rgb;
+totalEmissiveRadiance *= emissiveColor2.rgb;
+
+gl_FragColor = mix (col, emissiveColor2, emissiveColor2.w);

src/library/glsl/fs/media_pars.fs.glsl

+varying vec2 _vUV;
+varying vec4 _vTexCoords;
+varying vec3 _vNormal;
+varying vec4 _vWorldPosition;
+
+uniform float uTime;
+uniform float uFactorX;
+uniform float uFactorY;
+uniform float uScale;
+uniform sampler2D outlineSampler;
+
+vec2 _voronoi_RandomVector_float (vec2 UV, float offset)
+{
+    mat2 m = mat2(15.27, 47.63, 99.41, 89.98);
+    UV = fract(sin(UV * m));
+    return vec2(sin(UV.y*+offset)*0.5+0.5, cos(UV.x*offset)*0.5+0.5);
+}
+
+void _voronoi_float(vec2 UV, float AngleOffset, float CellDensity, out float Out, out float Cells)
+{
+    vec2 g = floor(UV * CellDensity);
+    vec2 f = fract(UV * CellDensity);
+    float t = 8.0;
+    vec3 res = vec3(8.0, 0.0, 0.0);
+
+    for(int y=-1; y<=1; y++)
+    {
+        for(int x=-1; x<=1; x++)
+        {
+            vec2 lattice = vec2(x,y);
+            vec2 offset = _voronoi_RandomVector_float(lattice + g, AngleOffset);
+            float d = distance(lattice + offset, f);
+
+            if(d < res.x)
+            {
+                res = vec3(d, offset.x, offset.y);
+                Out = res.x;
+                Cells = res.y;
+            }
+        }
+    }
+}
\ No newline at end of file

src/library/glsl/vs/media.vs.glsl

+vec3 transformed = vec3( position );
+_vUV = uv;

src/library/glsl/vs/media_pars.vs.glsl

+varying vec2 _vUV;
+varying vec4 _vTexCoords;
+varying vec3 _vNormal;
+varying vec4 _vWorldPosition;

src/library/materials/Media.js

+import {BaseMaterial} from "../core/BaseMaterial";
+
+function Media(args) {
+    BaseMaterial.call(this);
+
+    this.args = args;
+
+    let xSize = this.args.mesh.geometry.boundingBox.max.x - this.args.mesh.geometry.boundingBox.min.x;
+    let ySize = this.args.mesh.geometry.boundingBox.max.y - this.args.mesh.geometry.boundingBox.min.y;
+
+    if (xSize > ySize) {
+        xSize = xSize / ySize;
+        ySize = 1;
+    } else {
+        ySize = ySize / xSize;
+        xSize = 1;
+    }
+
+    this.uniforms = {
+        uTime: {value: 0},
+        uFactorX: {value: xSize},
+        uFactorY: {value: ySize},
+        uScale: {value: 1},
+        outlineSampler: {type: 't', value: new THREE.TextureLoader().load('/static/img/mediablock_alpha.png')},
+    };
+
+    this.material = null;
+
+
+    this.prepare();
+}
+
+Media.prototype = Object.create(BaseMaterial.prototype);
+Media.prototype.constructor = Media;
+
+Media.prototype.prepare = function () {
+    this.material = this.copy(this.args.mesh.material);
+
+    this.material.emissiveMap = this.material.map;
+    this.material.map = null;
+    this.material.transparent = true;
+    this.material.depthWrite = false;
+    this.material.depthTest = true;
+    this.material.renderOrder = -1;
+    this.material.side = THREE.FrontSide;
+
+    this.material.userData.effect = 'Media';
+    this.material.userData.args = this.args;
+    this.material.userData.uniforms = this.uniforms;
+
+    this.material.onBeforeCompile = function (shader) {
+
+        shader.uniforms.uTime = this.userData.uniforms.uTime;
+        shader.uniforms.uFactorX = this.userData.uniforms.uFactorX;
+        shader.uniforms.uFactorY = this.userData.uniforms.uFactorY;
+        shader.uniforms.uScale = this.userData.uniforms.uScale;
+        shader.uniforms.outlineSampler = this.userData.uniforms.outlineSampler;
+
+        shader.fragmentShader = require('../glsl/fs/media_pars.fs.glsl') + '\n' + shader.fragmentShader;
+
+        shader.fragmentShader = shader.fragmentShader.replace('#include <dithering_fragment>', //dithering_fragment  map_fragment
+            require('../glsl/fs/media.fs.glsl'));
+
+        shader.vertexShader = require('../glsl/vs/media_pars.vs.glsl') + '\n' + shader.vertexShader;
+
+        shader.vertexShader = shader.vertexShader.replace('#include <begin_vertex>',
+            require('../glsl/vs/media.vs.glsl'));
+    };
+    return this;
+
+};
+
+Media.prototype.update = function (dt) {
+    this.uniforms.uTime.value += dt;
+
+};
+
+export {Media}
\ No newline at end of file