Glsl-bloom

Developer
Yoichi Kobayashi
Size
8,398 Kb
Views
40,480
  1. Glsl-bloom Previews
  2. Glsl-bloom HTML Codes
  3. Glsl-bloom CSS Codes
  4. Glsl-bloom JS Codes

How do I make an glsl-bloom?

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

Glsl-bloom Previews
IQ Test

Glsl-bloom - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>glsl-bloom</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="p-contents-summary"> <h1 class="p-contents-summary__head">glsl-bloom</h1> <p class="p-contents-summary__text">test of the glsl bloom effect.</p> <p class="p-contents-summary__link-source"><a href="https://github.com/ykob/glsl-bloom">view source.</a></p> </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/r79/three.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.js'></script> <script src="js/index.js"></script>
</body>
</html>

Glsl-bloom - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700");
html { height: 100%;
}
body { min-height: 100%; overflow: hidden; color: #eee; font-family: "Noto Sans"; background: -webkit-radial-gradient(center ellipse, #050200 60%, #32280a 100%); background: radial-gradient(ellipse at center, #050200 60%, #32280a 100%);
}
a { color: #eee; 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-contents-summary { position: absolute; bottom: 4%; left: 2%; z-index: 100;
}
.p-contents-summary__head { margin: 0; font-weight: 400; letter-spacing: 2px;
}
.p-contents-summary__text { max-width: 360px; line-height: 1.75; margin: 1em 0; font-size: 13px; font-size: 0.8125rem; letter-spacing: 1px;
}
.p-contents-summary__link-source { margin: 0; font-size: 13px; font-size: 0.8125rem; letter-spacing: 1px;
}
.p-contents-summary__link-source a { position: relative;
}
.p-contents-summary__link-source a:after { content: ''; display: block; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background-color: #eee;
}
.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 center; -ms-transform-origin: left center; transform-origin: left center; -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 { color: #333;
}
.p-contents-summary__link-source a:hover:after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1);
}

Glsl-bloom - Script Codes JS Codes

/** * Modules in this bundle * @license * * glsl-bloom: * * 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 _bloom = require('./modules/bloom/bloom.js');
var _bloom2 = _interopRequireDefault(_bloom);
var _sphere = require('./modules/sphere.js');
var _sphere2 = _interopRequireDefault(_sphere);
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 render_base = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
var scene_base = new THREE.Scene();
var camera_base = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
var clock = new THREE.Clock();
var stats = new Stats();
var bloom = new _bloom2.default(render_base.texture);
var sphere = new _sphere2.default();
var resizeWindow = function resizeWindow() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; camera_base.aspect = window.innerWidth / window.innerHeight; camera_base.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); render_base.setSize(window.innerWidth, window.innerHeight); bloom.resize(); sphere.resize();
};
var setEvent = function setEvent() { $(window).on('resize', function () { resizeWindow(); });
};
var initDatGui = function initDatGui() { var gui = new dat.GUI(); var controller = { blurCount: gui.add(bloom, 'blurCount', 1, 10).name('blur count').step(1), minBright: gui.add(bloom.plane.bright, 'minBright', 0, 1).name('min bright'), strength: gui.add(bloom.plane.bloom, 'strength', 0, 3).name('bright strength'), tone: gui.add(bloom.plane.bloom, 'tone', 0, 1).name('original tone') }; controller.minBright.onChange(function (value) { bloom.plane.bright.uniforms.minBright.value = value; }); controller.strength.onChange(function (value) { bloom.plane.bloom.uniforms.strength.value = value; }); controller.tone.onChange(function (value) { bloom.plane.bloom.uniforms.tone.value = value; });
};
var initStats = function initStats() { stats.showPanel(0); document.body.appendChild(stats.dom);
};
var render = function render() { sphere.render(clock.getDelta()); renderer.render(scene_base, camera_base, render_base); bloom.render(renderer);
};
var renderLoop = function renderLoop() { stats.begin(); render(); stats.end(); requestAnimationFrame(renderLoop);
};
var init = function init() { renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x222222, 0.0); camera_base.position.set(0, 200, 1000); camera_base.lookAt(new THREE.Vector3()); scene_base.add(sphere.mesh); setEvent(); initDatGui(); //initStats(); resizeWindow(); renderLoop();
};
init();
},{"./modules/bloom/bloom.js":2,"./modules/sphere.js":6}],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; }; }();
var _plane_bright = require('./plane_bright.js');
var _plane_bright2 = _interopRequireDefault(_plane_bright);
var _plane_blur = require('./plane_blur.js');
var _plane_blur2 = _interopRequireDefault(_plane_blur);
var _plane_bloom = require('./plane_bloom.js');
var _plane_bloom2 = _interopRequireDefault(_plane_bloom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Bloom = function () { function Bloom(tex_base) { _classCallCheck(this, Bloom); this.blurCount = 3; this.renderTarget = [new THREE.WebGLRenderTarget(window.innerWidth / 4, window.innerHeight / 4), new THREE.WebGLRenderTarget(window.innerWidth / 4, window.innerHeight / 4)]; this.scene = { bright: new THREE.Scene(), blurh: new THREE.Scene(), blurv: new THREE.Scene(), bloom: new THREE.Scene() }; this.camera = new THREE.PerspectiveCamera(45, 1, 1, 2); this.plane = { bright: new _plane_bright2.default(tex_base), blurh: new _plane_blur2.default(this.renderTarget[0].texture, new THREE.Vector2(1.0, 0.0)), blurv: new _plane_blur2.default(this.renderTarget[1].texture, new THREE.Vector2(0.0, 1.0)), bloom: new _plane_bloom2.default(tex_base, this.renderTarget[0].texture) }; this.init(); } _createClass(Bloom, [{ key: 'init', value: function init() { this.scene.bright.add(this.plane.bright.mesh); this.scene.blurh.add(this.plane.blurh.mesh); this.scene.blurv.add(this.plane.blurv.mesh); this.scene.bloom.add(this.plane.bloom.mesh); } }, { key: 'render', value: function render(renderer) { renderer.render(this.scene.bright, this.camera, this.renderTarget[0]); for (var i = 0; i < this.blurCount; i++) { renderer.render(this.scene.blurh, this.camera, this.renderTarget[1]); renderer.render(this.scene.blurv, this.camera, this.renderTarget[0]); } renderer.render(this.scene.bloom, this.camera); } }, { key: 'resize', value: function resize() { this.renderTarget[0].setSize(window.innerWidth / 4, window.innerHeight / 4); this.renderTarget[1].setSize(window.innerWidth / 4, window.innerHeight / 4); this.plane.blurh.resize(); this.plane.blurv.resize(); } }]); return Bloom;
}();
exports.default = Bloom;
},{"./plane_bloom.js":3,"./plane_blur.js":4,"./plane_bright.js":5}],3:[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 PlaneBloom = function () { function PlaneBloom(tex_base, tex_blur) { _classCallCheck(this, PlaneBloom); this.uniforms = null; this.tone = 0.7; this.strength = 1.5; this.texBase = tex_base; this.texBlur = tex_blur; this.mesh = this.createMesh(); } _createClass(PlaneBloom, [{ key: 'createMesh', value: function createMesh() { this.uniforms = { tone: { type: 'f', value: this.tone }, strength: { type: 'f', value: this.strength }, texBase: { type: 't', value: this.texBase }, texBlur: { type: 't', value: this.texBlur } }; return new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), new THREE.ShaderMaterial({ uniforms: this.uniforms, vertexShader: "#define GLSLIFY 1\nvarying vec2 vUv;\n\nvoid main(void) {\n vUv = uv;\n gl_Position = vec4(position, 1.0);\n}\n", fragmentShader: "#define GLSLIFY 1\nuniform float tone;\nuniform float strength;\nuniform sampler2D texBase;\nuniform sampler2D texBlur;\n\nvarying vec2 vUv;\n\nvoid main(void) {\n gl_FragColor = texture2D(texBase, vUv) * tone + texture2D(texBlur, vUv) * strength;\n}\n" })); } }]); return PlaneBloom;
}();
exports.default = PlaneBloom;
},{}],4:[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 PlaneBlur = function () { function PlaneBlur(texture, direction) { _classCallCheck(this, PlaneBlur); this.uniforms = null; this.texture = texture; this.direction = direction; this.mesh = this.createMesh(); } _createClass(PlaneBlur, [{ key: 'createMesh', value: function createMesh() { this.uniforms = { resolution: { type: 'v2', value: new THREE.Vector2(window.innerWidth / 10, window.innerHeight / 10) }, direction: { type: 'v2', value: this.direction }, texture: { type: 't', value: this.texture } }; return new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), new THREE.ShaderMaterial({ uniforms: this.uniforms, vertexShader: "#define GLSLIFY 1\nvarying vec2 vUv;\n\nvoid main(void) {\n vUv = uv;\n gl_Position = vec4(position, 1.0);\n}\n", fragmentShader: "#define GLSLIFY 1\nuniform vec2 resolution;\nuniform vec2 direction;\nuniform sampler2D texture;\nuniform float weight[10];\n\nvarying vec2 vUv;\n\nvec4 blur13(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n vec4 color = vec4(0.0);\n vec2 off1 = vec2(1.411764705882353) * direction;\n vec2 off2 = vec2(3.2941176470588234) * direction;\n vec2 off3 = vec2(5.176470588235294) * direction;\n color += texture2D(image, uv) * 0.1964825501511404;\n color += texture2D(image, uv + (off1 / resolution)) * 0.2969069646728344;\n color += texture2D(image, uv - (off1 / resolution)) * 0.2969069646728344;\n color += texture2D(image, uv + (off2 / resolution)) * 0.09447039785044732;\n color += texture2D(image, uv - (off2 / resolution)) * 0.09447039785044732;\n color += texture2D(image, uv + (off3 / resolution)) * 0.010381362401148057;\n color += texture2D(image, uv - (off3 / resolution)) * 0.010381362401148057;\n return color;\n}\n\nvec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n vec4 color = vec4(0.0);\n vec2 off1 = vec2(1.3846153846) * direction;\n vec2 off2 = vec2(3.2307692308) * direction;\n color += texture2D(image, uv) * 0.2270270270;\n color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;\n color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;\n color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;\n color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;\n return color;\n}\n\nvec4 blur5(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n vec4 color = vec4(0.0);\n vec2 off1 = vec2(1.3333333333333333) * direction;\n color += texture2D(image, uv) * 0.29411764705882354;\n color += texture2D(image, uv + (off1 / resolution)) * 0.35294117647058826;\n color += texture2D(image, uv - (off1 / resolution)) * 0.35294117647058826;\n return color; \n}\n\nfloat gaussianPdf(in float x, in float sigma) {\n return 0.39894 * exp( -0.5 * x * x/(sigma * sigma))/sigma;\n}\n\nvoid main(void) {\n gl_FragColor = blur9(texture, vUv, resolution, direction);\n}\n" })); } }, { key: 'resize', value: function resize() { this.uniforms.resolution.value.set(window.innerWidth / 10, window.innerHeight / 10); } }]); return PlaneBlur;
}();
exports.default = PlaneBlur;
},{}],5:[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 PlaneBright = function () { function PlaneBright(texture) { _classCallCheck(this, PlaneBright); this.uniforms = null; this.minBright = 0.2; this.texture = texture; this.mesh = this.createMesh(); } _createClass(PlaneBright, [{ key: 'createMesh', value: function createMesh() { this.uniforms = { minBright: { type: 'f', value: this.minBright }, texture: { type: 't', value: this.texture } }; return new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), new THREE.ShaderMaterial({ uniforms: this.uniforms, vertexShader: "#define GLSLIFY 1\nvarying vec2 vUv;\n\nvoid main(void) {\n vUv = uv;\n gl_Position = vec4(position, 1.0);\n}\n", fragmentShader: "#define GLSLIFY 1\nuniform float minBright;\nuniform sampler2D texture;\n\nvarying vec2 vUv;\n\nvoid main(void) {\n vec4 bright = max(vec4(0.0), (texture2D(texture, vUv) - minBright));\n gl_FragColor = bright;\n}\n" })); } }]); return PlaneBright;
}();
exports.default = PlaneBright;
},{}],6:[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 Sphere = function () { function Sphere() { _classCallCheck(this, Sphere); this.time = 3; this.radius = 200; this.uniforms = null; this.mesh = this.createMesh(); } _createClass(Sphere, [{ key: 'createMesh', value: function createMesh() { this.uniforms = { time: { type: 'f', value: 0 }, resolution: { type: 'v2', value: new THREE.Vector2(window.innerWidth, window.innerHeight) }, radius: { type: 'f', value: this.radius } }; return new THREE.Mesh(new THREE.OctahedronGeometry(240, 7), new THREE.ShaderMaterial({ uniforms: this.uniforms, vertexShader: "#define GLSLIFY 1\nuniform float time;\n\nvarying vec4 vColor;\nvarying vec4 vPosition;\nvarying mat4 vInvertMatrix;\n\nfloat inverse(float m) {\n return 1.0 / m;\n}\n\nmat2 inverse(mat2 m) {\n return mat2(m[1][1],-m[0][1],\n -m[1][0], m[0][0]) / (m[0][0]*m[1][1] - m[0][1]*m[1][0]);\n}\n\nmat3 inverse(mat3 m) {\n float a00 = m[0][0], a01 = m[0][1], a02 = m[0][2];\n float a10 = m[1][0], a11 = m[1][1], a12 = m[1][2];\n float a20 = m[2][0], a21 = m[2][1], a22 = m[2][2];\n\n float b01 = a22 * a11 - a12 * a21;\n float b11 = -a22 * a10 + a12 * a20;\n float b21 = a21 * a10 - a11 * a20;\n\n float det = a00 * b01 + a01 * b11 + a02 * b21;\n\n return mat3(b01, (-a22 * a01 + a02 * a21), (a12 * a01 - a02 * a11),\n b11, (a22 * a00 - a02 * a20), (-a12 * a00 + a02 * a10),\n b21, (-a21 * a00 + a01 * a20), (a11 * a00 - a01 * a10)) / det;\n}\n\nmat4 inverse(mat4 m) {\n float\n a00 = m[0][0], a01 = m[0][1], a02 = m[0][2], a03 = m[0][3],\n a10 = m[1][0], a11 = m[1][1], a12 = m[1][2], a13 = m[1][3],\n a20 = m[2][0], a21 = m[2][1], a22 = m[2][2], a23 = m[2][3],\n a30 = m[3][0], a31 = m[3][1], a32 = m[3][2], a33 = m[3][3],\n\n b00 = a00 * a11 - a01 * a10,\n b01 = a00 * a12 - a02 * a10,\n b02 = a00 * a13 - a03 * a10,\n b03 = a01 * a12 - a02 * a11,\n b04 = a01 * a13 - a03 * a11,\n b05 = a02 * a13 - a03 * a12,\n b06 = a20 * a31 - a21 * a30,\n b07 = a20 * a32 - a22 * a30,\n b08 = a20 * a33 - a23 * a30,\n b09 = a21 * a32 - a22 * a31,\n b10 = a21 * a33 - a23 * a31,\n b11 = a22 * a33 - a23 * a32,\n\n det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;\n\n return mat4(\n a11 * b11 - a12 * b10 + a13 * b09,\n a02 * b10 - a01 * b11 - a03 * b09,\n a31 * b05 - a32 * b04 + a33 * b03,\n a22 * b04 - a21 * b05 - a23 * b03,\n a12 * b08 - a10 * b11 - a13 * b07,\n a00 * b11 - a02 * b08 + a03 * b07,\n a32 * b02 - a30 * b05 - a33 * b01,\n a20 * b05 - a22 * b02 + a23 * b01,\n a10 * b10 - a11 * b08 + a13 * b06,\n a01 * b08 - a00 * b10 - a03 * b06,\n a30 * b04 - a31 * b02 + a33 * b00,\n a21 * b02 - a20 * b04 - a23 * b00,\n a11 * b07 - a10 * b09 - a12 * b06,\n a00 * b09 - a01 * b07 + a02 * b06,\n a31 * b01 - a30 * b03 - a32 * b00,\n a20 * b03 - a21 * b01 + a22 * b00) / det;\n}\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\nvoid main(void) {\n float noise = smoothstep(-0.1, 0.1, cnoise(\n vec3(\n position.x * 0.007,\n position.y * 0.024 + time,\n position.z * 0.007\n )\n ));\n vec4 noise_position = vec4(position + (normalize(position) * 6.0 * noise), 1.0);\n vColor = vec4(0.85 - (1.0 - noise) * 0.8, 0.55 - (1.0 - noise) * 0.45, 0.35 - (1.0 - noise) * 0.25, 1.0);\n vPosition = noise_position;\n vInvertMatrix = inverse(modelMatrix);\n gl_Position = projectionMatrix * modelViewMatrix * noise_position;\n}\n", fragmentShader: "#define GLSLIFY 1\nvarying vec4 vColor;\nvarying vec4 vPosition;\nvarying mat4 vInvertMatrix;\n\nvoid main(void) {\n vec3 normal = normalize(cross(dFdx(vPosition.xyz), dFdy(vPosition.xyz)));\n vec3 inv_light = normalize(vInvertMatrix * vec4(vec3(0.0, 1.0, 0.0), 0.0)).xyz;\n float diff = (dot(normal, inv_light) + 1.0) / 2.0;\n vec3 light = vec3(0.4) * diff;\n vec4 color = vColor;\n gl_FragColor = color + vec4(light, 1.0);\n}\n", transparent: true, side: THREE.DoubleSide, shading: THREE.FlatShading })); } }, { key: 'render', value: function render(time) { this.uniforms.time.value += time * this.time; } }, { key: 'resize', value: function resize() { this.uniforms.resolution.value.set(window.innerWidth, window.innerHeight); } }]); return Sphere;
}();
exports.default = Sphere;
},{}]},{},[1]);
Glsl-bloom - Script Codes
Glsl-bloom - Script Codes
Home Page Home
Developer Yoichi Kobayashi
Username ykob
Uploaded August 26, 2022
Rating 4.5
Size 8,398 Kb
Views 40,480
Do you need developer help for Glsl-bloom?

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
Three.js Points anti-gravity is applied ver3
GLSL Glitch
GLSL Core
Red cloud
Glsl-dissolve
Slime
Text particle
GLSL Hills
Balls move randomly and inertia
Butterfly
Create amazing SEO content 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!