Glsl-dissolve

Developer
Yoichi Kobayashi
Size
9,379 Kb
Views
36,432
  1. Glsl-dissolve Previews
  2. Glsl-dissolve HTML Codes
  3. Glsl-dissolve CSS Codes
  4. Glsl-dissolve JS Codes

How do I make an glsl-dissolve?

What is a glsl-dissolve? How do you make a glsl-dissolve? This script and codes were developed by Yoichi Kobayashi on 26 August 2022, Friday.

Glsl-dissolve Previews
IQ Test

Glsl-dissolve - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>glsl-dissolve</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="p-contents-summary"> <h1 class="p-contents-summary__head">glsl-dissolve</h1> <p class="p-contents-summary__text">it's dissolve effects for the 2D cross fade by glsl.</p> <p class="p-contents-summary__link-source"><a href="https://github.com/ykob/glsl-dissolve">view source.</a></p> </div> <div class="p-preloader"> <div class="p-preloader__wrap"> <div class="p-preloader__icon"></div> <div class="p-preloader__label">Loading</div> </div> </div> <canvas class="p-canvas-webgl" id="canvas-webgl"></canvas> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Glsl-dissolve - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700");
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }
/** * Remove default margin. */
body { margin: 0; }
/* HTML5 display definitions ========================================================================== */
/** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary { display: block; }
/** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio,
canvas,
progress,
video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }
/** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }
/** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */
[hidden],
template { display: none; }
/* Links ========================================================================== */
/** * Remove the gray background color from active links in IE 10. */
a { background-color: transparent; }
/** * Improve readability when focused and also mouse hovered in all browsers. */
a:active,
a:hover { outline: 0; }
/* Text-level semantics ========================================================================== */
/** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }
/** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
b,
strong { font-weight: bold; }
/** * Address styling not present in Safari and Chrome. */
dfn { font-style: italic; }
/** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; }
/** * Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }
/** * Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }
/** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub,
sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* Embedded content ========================================================================== */
/** * Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; }
/** * Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }
/* Grouping content ========================================================================== */
/** * Address margin not present in IE 8/9 and Safari. */
figure { margin: 1em 40px; }
/** * Address differences between Firefox and other browsers. */
hr { box-sizing: content-box; height: 0; }
/** * Contain overflow in all browsers. */
pre { overflow: auto; }
/** * Address odd `em`-unit font size rendering in all browsers. */
code,
kbd,
pre,
samp { font-family: monospace, monospace; font-size: 1em; }
/* Forms ========================================================================== */
/** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */
/** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button,
input,
optgroup,
select,
textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }
/** * Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }
/** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */
button,
select { text-transform: none; }
/** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }
/** * Re-set default cursor for disabled elements. */
button[disabled],
html input[disabled] { cursor: default; }
/** * Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
/** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */
input { line-height: normal; }
/** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }
/** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { height: auto; }
/** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; }
/** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/** * Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
/** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }
/** * Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }
/** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }
/* Tables ========================================================================== */
/** * Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }
td,
th { padding: 0; }
html { height: 100%; }
body { min-height: 100%; overflow: hidden; color: #fff; font-family: "Noto Sans"; }
a { color: #fff; text-decoration: none; }
::-moz-selection { color: #fff; background: rgba(0, 0, 0, 0.5); }
::selection { color: #fff; background: rgba(0, 0, 0, 0.5); }
.p-canvas-webgl { z-index: 1; position: relative; }
.p-contents-summary { position: absolute; bottom: 4%; left: 2%; z-index: 100; } .p-contents-summary__head { float: left; margin: 0; font-weight: 400; letter-spacing: 2px; background-color: #000; } @media all and (min-width: 1367px) { .p-contents-summary__head { font-size: 54.64px; } } @media all and (min-width: 569px) and (max-width: 1366px) { .p-contents-summary__head { font-size: 4vw; } } @media all and (max-width: 568px) { .p-contents-summary__head { font-size: 22.72px; } } .p-contents-summary__text { clear: left; float: left; line-height: 1.75; margin: 1em 0; letter-spacing: 1px; background-color: #000; } @media all and (min-width: 1367px) { .p-contents-summary__text { font-size: 13.66px; } } @media all and (min-width: 569px) and (max-width: 1366px) { .p-contents-summary__text { font-size: 1vw; } } @media all and (max-width: 568px) { .p-contents-summary__text { font-size: 5.68px; } } .p-contents-summary__link-source { clear: left; margin: 0; letter-spacing: 1px; } @media all and (min-width: 1367px) { .p-contents-summary__link-source { font-size: 15.026px; } } @media all and (min-width: 569px) and (max-width: 1366px) { .p-contents-summary__link-source { font-size: 1.1vw; } } @media all and (max-width: 568px) { .p-contents-summary__link-source { font-size: 6.248px; } } .p-contents-summary__link-source a { position: relative; background-color: #000; } .p-contents-summary__link-source a { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } .p-contents-summary__link-source a:after { -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } .p-contents-summary__link-source a:hover:after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); }
@-webkit-keyframes rotatePreloader { 0% { -webkit-transform: rotateZ(0); transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } }
@keyframes rotatePreloader { 0% { -webkit-transform: rotateZ(0); transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } }
.p-preloader { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; } .p-preloader__icon { width: 40px; height: 40px; box-sizing: border-box; margin: 0 auto 10px; border-top: 2px solid; border-right: 2px solid #000; border-bottom: 2px solid #000; border-left: 2px solid #000; border-radius: 25px; -webkit-animation-name: rotatePreloader; animation-name: rotatePreloader; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .p-preloader__label { color: #000; font-weight: 700; text-align: center; letter-spacing: 2px; padding-left: 2px; } @media all and (min-width: 1367px) { .p-preloader__label { font-size: 10.928px; } } @media all and (min-width: 569px) and (max-width: 1366px) { .p-preloader__label { font-size: 0.8vw; } } @media all and (max-width: 568px) { .p-preloader__label { font-size: 4.544px; } } .p-preloader.is-hidden { opacity: 0; -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .p-preloader.is-stoped .p-preloader__icon { -webkit-animation-name: none; animation-name: none; }
.dg { z-index: 100000 !important;
}

Glsl-dissolve - Script Codes JS Codes

/** * Modules in this bundle * @license * * glsl-dissolve: * * This header is generated by licensify (https://github.com/twada/licensify) */
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var _dissolve = require('./modules/dissolve.js');
var _dissolve2 = _interopRequireDefault(_dissolve);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var canvas = document.getElementById('canvas-webgl');
var renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, alpha: true
});
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
var clock = new THREE.Clock();
var images = ['https://ykob.github.io/glsl-dissolve/img/osaka01.jpg', 'https://ykob.github.io/glsl-dissolve/img/osaka02.jpg', 'https://ykob.github.io/glsl-dissolve/img/osaka03.jpg', 'https://ykob.github.io/glsl-dissolve/img/osaka04.jpg', 'https://ykob.github.io/glsl-dissolve/img/osaka05.jpg'];
var dissolve = new _dissolve2.default(images);
var resizeWindow = function resizeWindow() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); dissolve.resize(); renderer.setSize(window.innerWidth, window.innerHeight);
};
var setEvent = function setEvent() { $(window).on('resize', function () { resizeWindow(); });
};
var initDatGui = function initDatGui() { var gui = new dat.GUI(); var controller = { time: gui.add(dissolve, 'interval', 1, 10).name('interval').step(1), noiseX: gui.add(dissolve.noise, 'x', 0, 100).name('noise x'), noiseY: gui.add(dissolve.noise, 'y', 0, 100).name('noise y'), noiseZ: gui.add(dissolve.noise, 'z', 0, 100).name('noise z'), prevEdgeStart: gui.add(dissolve.edge, 'prev_start', 0, 0.1).name('prev edge start').step(0.001), prevEdgeWidth: gui.add(dissolve.edge, 'prev_width', 0, 0.1).name('prev edge width').step(0.001), nextEdgeStart: gui.add(dissolve.edge, 'next_start', 0, 0.1).name('next edge start').step(0.001), nextEdgeWidth: gui.add(dissolve.edge, 'next_width', 0, 0.1).name('next edge width').step(0.001), stop: gui.add(dissolve, 'stop').name('stop animation') }; controller.time.onChange(function (value) { dissolve.uniforms.interval.value = value; }); controller.noiseX.onChange(function (value) { dissolve.uniforms.noiseX.value = value; }); controller.noiseY.onChange(function (value) { dissolve.uniforms.noiseY.value = value; }); controller.noiseZ.onChange(function (value) { dissolve.uniforms.noiseZ.value = value; }); controller.prevEdgeStart.onChange(function (value) { dissolve.uniforms.prevEdgeStart.value = value; }); controller.prevEdgeWidth.onChange(function (value) { dissolve.uniforms.prevEdgeWidth.value = value; }); controller.nextEdgeStart.onChange(function (value) { dissolve.uniforms.nextEdgeStart.value = value; }); controller.nextEdgeWidth.onChange(function (value) { dissolve.uniforms.nextEdgeWidth.value = value; });
};
var render = function render() { dissolve.render(clock.getDelta()); renderer.render(scene, camera);
};
var renderLoop = function renderLoop() { render(); requestAnimationFrame(renderLoop);
};
var init = function init() { renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xffffff, 0.0); dissolve.loadTexture(images, function () { setTimeout(function () { $('.p-preloader').addClass('is-hidden').on('transitionend', function () { $(this).addClass('is-stoped'); }); scene.add(dissolve.mesh); setEvent(); initDatGui(); resizeWindow(); renderLoop(); }, 200); });
};
init();
},{"./modules/dissolve.js":2}],2:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", { value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Dissolve = function () { function Dissolve() { _classCallCheck(this, Dissolve); this.uniforms = {}; this.textures = []; this.interval = 3; this.noise = { x: 8, y: 6, z: 4 }; this.edge = { prev_start: 0.01, prev_width: 0.05, next_start: 0.01, next_width: 0.05 }; this.prev_num = 0; this.next_num = 0; this.stop = false; this.mesh = null; } _createClass(Dissolve, [{ key: 'loadTexture', value: function loadTexture(images, callback) { var _this = this; var count = 0; var _loop = function _loop() { var index = i; var loader = new THREE.TextureLoader(); loader.load(images[index], function (texture) { texture.magFilter = THREE.NearestFilter; texture.minFilter = THREE.NearestFilter; _this.textures[index] = texture; count++; if (count == images.length) { _this.mesh = _this.createMesh(); callback(); } }); }; for (var i = 0; i < images.length; i++) { _loop(); } } }, { key: 'createMesh', value: function createMesh() { var tex_intro = new THREE.DataTexture(new Uint8Array([255, 255, 255, 0]), 1, 1, THREE.RGBAFormat, THREE.UnsignedByteType); tex_intro.needsUpdate = true; this.uniforms = { time: { type: 'f', value: 0 }, interval: { type: 'f', value: this.interval }, resolution: { type: 'v2', value: new THREE.Vector2(window.innerWidth, window.innerHeight) }, imageResolution: { type: 'v2', value: new THREE.Vector2(2048, 1356) }, texPrev: { type: 't', value: tex_intro }, texNext: { type: 't', value: this.textures[0] }, noiseX: { type: 'f', value: this.noise.x }, noiseY: { type: 'f', value: this.noise.y }, noiseZ: { type: 'f', value: this.noise.z }, prevEdgeStart: { type: 'f', value: this.edge.prev_start }, prevEdgeWidth: { type: 'f', value: this.edge.prev_width }, nextEdgeStart: { type: 'f', value: this.edge.next_start }, nextEdgeWidth: { type: 'f', value: this.edge.next_width } }; return new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), new THREE.ShaderMaterial({ uniforms: this.uniforms, vertexShader: "#define GLSLIFY 1\nvarying vec3 vPosition;\nvarying vec2 vUv;\n\nvoid main(void) {\n vPosition = position;\n vUv = uv;\n gl_Position = vec4(position, 1.0);\n}\n", fragmentShader: "#define GLSLIFY 1\nuniform float time;\nuniform vec2 resolution;\nuniform vec2 imageResolution;\nuniform sampler2D texPrev;\nuniform sampler2D texNext;\nuniform float noiseX;\nuniform float noiseY;\nuniform float noiseZ;\nuniform float prevEdgeStart;\nuniform float prevEdgeWidth;\nuniform float nextEdgeStart;\nuniform float nextEdgeWidth;\n\nvarying vec3 vPosition;\nvarying vec2 vUv;\n\n//\n// GLSL textureless classic 3D noise \"cnoise\",\n// with an RSL-style periodic variant \"pnoise\".\n// Author: Stefan Gustavson ([email protected])\n// Version: 2011-10-11\n//\n// Many thanks to Ian McEwan of Ashima Arts for the\n// ideas for permutation and gradient selection.\n//\n// Copyright (c) 2011 Stefan Gustavson. All rights reserved.\n// Distributed under the MIT license. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n//\n\nvec3 mod289(vec3 x)\n{\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 mod289(vec4 x)\n{\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 permute(vec4 x)\n{\n return mod289(((x*34.0)+1.0)*x);\n}\n\nvec4 taylorInvSqrt(vec4 r)\n{\n return 1.79284291400159 - 0.85373472095314 * r;\n}\n\nvec3 fade(vec3 t) {\n return t*t*t*(t*(t*6.0-15.0)+10.0);\n}\n\n// Classic Perlin noise\nfloat cnoise(vec3 P)\n{\n vec3 Pi0 = floor(P); // Integer part for indexing\n vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1\n Pi0 = mod289(Pi0);\n Pi1 = mod289(Pi1);\n vec3 Pf0 = fract(P); // Fractional part for interpolation\n vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\n vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\n vec4 iy = vec4(Pi0.yy, Pi1.yy);\n vec4 iz0 = Pi0.zzzz;\n vec4 iz1 = Pi1.zzzz;\n\n vec4 ixy = permute(permute(ix) + iy);\n vec4 ixy0 = permute(ixy + iz0);\n vec4 ixy1 = permute(ixy + iz1);\n\n vec4 gx0 = ixy0 * (1.0 / 7.0);\n vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;\n gx0 = fract(gx0);\n vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\n vec4 sz0 = step(gz0, vec4(0.0));\n gx0 -= sz0 * (step(0.0, gx0) - 0.5);\n gy0 -= sz0 * (step(0.0, gy0) - 0.5);\n\n vec4 gx1 = ixy1 * (1.0 / 7.0);\n vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;\n gx1 = fract(gx1);\n vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\n vec4 sz1 = step(gz1, vec4(0.0));\n gx1 -= sz1 * (step(0.0, gx1) - 0.5);\n gy1 -= sz1 * (step(0.0, gy1) - 0.5);\n\n vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\n vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\n vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\n vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\n vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\n vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\n vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\n vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\n\n vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\n g000 *= norm0.x;\n g010 *= norm0.y;\n g100 *= norm0.z;\n g110 *= norm0.w;\n vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\n g001 *= norm1.x;\n g011 *= norm1.y;\n g101 *= norm1.z;\n g111 *= norm1.w;\n\n float n000 = dot(g000, Pf0);\n float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\n float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\n float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\n float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\n float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\n float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\n float n111 = dot(g111, Pf1);\n\n vec3 fade_xyz = fade(Pf0);\n vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\n vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\n float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);\n return 2.2 * n_xyz;\n}\n\nfloat quadraticInOut(float t) {\n float p = 2.0 * t * t;\n return t < 0.5 ? p : -p + (4.0 * t) - 1.0;\n}\n\nvoid main(void) {\n vec2 ratio = vec2(\n min((resolution.x / resolution.y) / (imageResolution.x / imageResolution.y), 1.0),\n min((resolution.y / resolution.x) / (imageResolution.y / imageResolution.x), 1.0)\n );\n\n vec2 uv = vec2(\n vUv.x * ratio.x + (1.0 - ratio.x) * 0.5,\n vUv.y * ratio.y + (1.0 - ratio.y) * 0.5\n );\n vec4 colorPrev = texture2D(texPrev, uv);\n vec4 colorNext = texture2D(texNext, uv);\n\n float noise = (cnoise(vec3(uv.x * noiseX, uv.y * noiseY, noiseZ)) + 1.0) / 2.0\n * (1.0 - (prevEdgeStart + prevEdgeWidth + nextEdgeStart + nextEdgeWidth))\n + (prevEdgeStart + prevEdgeWidth + nextEdgeStart + nextEdgeWidth) * 0.5;\n float step = quadraticInOut(min((time), 1.0));\n\n gl_FragColor = colorPrev * smoothstep(step - (prevEdgeStart + prevEdgeWidth), step - prevEdgeStart, noise)\n + colorNext * smoothstep((1.0 - step) - (nextEdgeStart + nextEdgeWidth), (1.0 - step) - nextEdgeStart, (1.0 - noise));\n}\n", transparent: true })); } }, { key: 'render', value: function render(time) { if (this.stop) return; this.uniforms.time.value += time / this.interval; if (this.uniforms.time.value > 1) { this.uniforms.time.value = 0; this.prev_num = this.next_num; this.uniforms.texPrev.value = this.textures[this.next_num]; while (this.next_num == this.prev_num) { this.next_num = Math.floor(Math.random() * this.textures.length); } this.uniforms.texNext.value = this.textures[this.next_num]; } } }, { key: 'resize', value: function resize() { this.uniforms.resolution.value.set(window.innerWidth, window.innerHeight); } }]); return Dissolve;
}();
exports.default = Dissolve;
},{}]},{},[1]);
Glsl-dissolve - Script Codes
Glsl-dissolve - Script Codes
Home Page Home
Developer Yoichi Kobayashi
Username ykob
Uploaded August 26, 2022
Rating 4.5
Size 9,379 Kb
Views 36,432
Do you need developer help for Glsl-dissolve?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yoichi Kobayashi (ykob) Script Codes
Name
Particles moving to the spherical ver2
Audio Visualizer ver2
Gravity Test
Glsl-bloom
GLSL Glitch
Float Particle
Three.js Points anti-gravity is applied ver3
Gooey Overlay
Red cloud
GLSL Core
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!