当前位置:网站首页>Three. JS series (3): porting shaders in shadertoy
Three. JS series (3): porting shaders in shadertoy
2022-07-07 16:29:00 【Touch】
0、 explain
Please read carefully the following posted shadertoy And threejs The difference between shader codes , One method is applicable to all methods .
1、shadertoy Medium shader code
// Found this on GLSL sandbox. I really liked it, changed a few things and made it tileable.
// :)
// by David Hoskins.
// Original water turbulence effect by joltz0r
// Redefine below to see the tiling...
//#define SHOW_TILING
#define TAU 6.28318530718
#define MAX_ITER 5
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
float time = iTime * .5+23.0;
// uv should be the 0-1 uv of texture...
vec2 uv = fragCoord.xy / iResolution.xy;
#ifdef SHOW_TILING
vec2 p = mod(uv*TAU*2.0, TAU)-250.0;
#else
vec2 p = mod(uv*TAU, TAU)-250.0;
#endif
vec2 i = vec2(p);
float c = 1.0;
float inten = .005;
for (int n = 0; n < MAX_ITER; n++)
{
float t = time * (1.0 - (3.5 / float(n+1)));
i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x));
c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten),p.y / (cos(i.y+t)/inten)));
}
c /= float(MAX_ITER);
c = 1.17-pow(c, 1.4);
vec3 colour = vec3(pow(abs(c), 8.0));
colour = clamp(colour + vec3(0.0, 0.35, 0.5), 0.0, 1.0);
#ifdef SHOW_TILING
// Flash tile borders...
vec2 pixel = 2.0 / iResolution.xy;
uv *= 2.0;
float f = floor(mod(iTime*.5, 2.0)); // Flash value.
vec2 first = step(pixel, uv) * f; // Rule out first screen pixels and flash.
uv = step(fract(uv), pixel); // Add one line of pixels per tile.
colour = mix(colour, vec3(1.0, 1.0, 0.0), (uv.x + uv.y) * first.x * first.y); // Yellow line
#endif
fragColor = vec4(colour, 1.0);
}
2、threejs Shader code modified in
import * as THREE from "three/build/three.module.js";
const WaterShader = {
uniforms: {
iTime: {
value: 0
},
iResolution: {
value: new THREE.Vector3(1, 1, 1)
},
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`,
fragmentShader: `
#include <common>
uniform vec3 iResolution;
uniform float iTime;
// by David Hoskins.
// Original water turbulence effect by joltz0r
// Redefine below to see the tiling...
//#define SHOW_TILING
#define TAU 6.28318530718
#define MAX_ITER 5
void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
float time = iTime * .5+23.0;
// uv should be the 0-1 uv of texture...
vec2 uv = fragCoord.xy / iResolution.xy;
#ifdef SHOW_TILING
vec2 p = mod(uv*TAU*2.0, TAU)-250.0;
#else
vec2 p = mod(uv*TAU, TAU)-250.0;
#endif
vec2 i = vec2(p);
float c = 1.0;
float inten = .005;
for (int n = 0; n < MAX_ITER; n++)
{
float t = time * (1.0 - (3.5 / float(n+1)));
i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x));
c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten),p.y / (cos(i.y+t)/inten)));
}
c /= float(MAX_ITER);
c = 1.17-pow(c, 1.4);
vec3 colour = vec3(pow(abs(c), 8.0));
colour = clamp(colour + vec3(0.0, 0.35, 0.5), 0.0, 1.0);
#ifdef SHOW_TILING
// Flash tile borders...
vec2 pixel = 2.0 / iResolution.xy;
uv *= 2.0;
float f = floor(mod(iTime*.5, 2.0)); // Flash value.
vec2 first = step(pixel, uv) * f; // Rule out first screen pixels and flash.
uv = step(fract(uv), pixel); // Add one line of pixels per tile.
colour = mix(colour, vec3(1.0, 1.0, 0.0), (uv.x + uv.y) * first.x * first.y); // Yellow line
#endif
fragColor = vec4(colour, 1.0);
}
varying vec2 vUv;
void main() {
mainImage(gl_FragColor, vUv * iResolution.xy);
}
`
};
export {
WaterShader
};
3、 Effect comparison
3.1、shadertoy
3.2、threejs
边栏推荐
- Apache Doris just "graduated": why should we pay attention to this kind of SQL data warehouse?
- Performance comparison of tidb for PostgreSQL and yugabytedb on sysbench
- Three singleton modes of unity (hungry man, lazy man, monobehavior)
- What is the difference between IP address and physical address
- Aerospace Hongtu information won the bid for the database system research and development project of a unit in Urumqi
- Sysom case analysis: where is the missing memory| Dragon lizard Technology
- Regular expression string
- markdown公式编辑教程
- PHP has its own filtering and escape functions
- Leetcode-136- number that appears only once (solve with XOR)
猜你喜欢
Balanced binary tree (AVL)
Sysom case analysis: where is the missing memory| Dragon lizard Technology
预测——灰色预测
模仿企业微信会议室选择
Talk about the cloud deployment of local projects created by SAP IRPA studio
Application example of infinite list [uigridview]
华东师大团队提出,具有DNA调控电路的卷积神经网络的系统分子实现
Unity drawing plug-in = = [support the update of the original atlas]
3000 words speak through HTTP cache
【Vulnhub靶场】THALES:1
随机推荐
php 自带过滤和转义函数
Bidding announcement: Fujian Rural Credit Union database audit system procurement project (re bidding)
Shandong old age Expo, 2022 China smart elderly care exhibition, smart elderly care and aging technology exhibition
121. 买卖股票的最佳时机
HAVE FUN | “飞船计划”活动最新进展
Xingruige database was shortlisted as the "typical solution for information technology application and innovation in Fujian Province in 2021"
U3D_ Infinite Bessel curve
[flower carving experience] 15 try to build the Arduino development environment of beetle esp32 C3
PHP realizes wechat applet face recognition and face brushing login function
Common training data set formats for target tracking
1亿单身男女“在线相亲”,撑起130亿IPO
leetcode 241. Different ways to add parentheses design priority for operational expressions (medium)
Xcode Revoke certificate
Statistical learning method -- perceptron
logback. XML configure logs of different levels and set color output
thinkphp3.2.3中设置路由,优化url
laravel 是怎么做到运行 composer dump-autoload 不清空 classmap 映射关系的呢?
Enterprise log analysis system elk
The inevitable trend of the intelligent development of ankerui power grid is that microcomputer protection devices are used in power systems
Continuous creation depends on it!