【Webgl_glsl&Threejs】搬运分享shader

来源

复制代码
https://www.shadertoy.com/view/mtyGWy

这是一个基于圆弧缩放和分型的shader材质 ,可以作为墙体,天幕等特效使用

预览

代码演示

直接引入Material在Mesh表面使用

javascript 复制代码
	import { DoubleSide, ShaderChunk, ShaderMaterial } from "three";
// https://www.shadertoy.com/view/7dG3zy
const vertex = `
${ShaderChunk.logdepthbuf_pars_vertex}
bool isPerspectiveMatrix(mat4) {
    return true;
}

varying vec4 m_pos;
varying vec2 vUv;

void main () {
    vUv = uv;
    // 从贴图中采样颜色值
    vec3 newPosition = normal*vec3(0,0,0)+position;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);

      ${ShaderChunk.logdepthbuf_vertex}
}
    `;

// 片元着色器代码
const fragment = /*glsl*/`
${ShaderChunk.logdepthbuf_pars_fragment}
precision mediump float;
varying vec2 vUv;
uniform float uTime;

/* This animation is the material of my first youtube tutorial about creative 
coding, which is a video in which I try to introduce programmers to GLSL 
and to the wonderful world of shaders, while also trying to share my recent 
passion for this community.
                                    Video URL: https://youtu.be/f4s1h2YETNY
*/

//https://iquilezles.org/articles/palettes/
vec3 palette( float t ) {
 vec3 a = vec3(0.5, 0.5, 0.5);
 vec3 b = vec3(0.5, 0.5, 0.5);
 vec3 c = vec3(1.0, 1.0, 1.0);
 vec3 d = vec3(0.263,0.416,0.557);

 return a + b*cos( 6.28318*(c*t+d) );
}

void main() {
    vec2 uv = vUv;
    uv-=.5;
    uv*=3.;
    vec2 uv0 = uv;
    vec3 finalColor = vec3(0.0);
    
    for (float i = 0.0; i < 4.0; i++) {
        uv = fract(uv * 1.5) - 0.5;
        float d = length(uv) * exp(-length(uv0));

        vec3 col = palette(length(uv0) + i*.4 + (uTime*0.1)*.4);

        d = sin(d*8. + (uTime*0.1))/8.;
        d = abs(d);

        d = pow(0.01 / d, 1.2);

        finalColor += col * d;
    }
 
  gl_FragColor = vec4(finalColor,1.);

  ${ShaderChunk.logdepthbuf_fragment}
}
    `;

const uniforms = {
    uTime: { value: 1.0 },
};
const CircleGridShaderMaterial = new ShaderMaterial({
    uniforms: {
        uTime: { value: 1.0 },
    },
    vertexShader: vertex,
    fragmentShader: fragment,
    side: DoubleSide,
    transparent: true,
});

// const loop = () => {
//     requestAnimationFrame(loop)
//     CircleGridShaderMaterial.uniforms.uTime.value += .001
// }
// loop()
setInterval(() => {
    // CircleGridShaderMaterial.uniforms.uTime.value += .0001
}, 5000);
export default CircleGridShaderMaterial

视频演示

fractShader

相关推荐
爱看书的小沐1 天前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
郝学胜-神的一滴2 天前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
linweidong3 天前
让低端机也能飞:Canvas/WebGL/Viz 分层、降级渲染与数据抽样策略
前端框架·webgl·canvas·前端动画·前端面经·css渲染·动画优化
CAD老兵5 天前
打造高性能二维图纸渲染引擎系列(一):Batched Geometry 助你轻松渲染百万实体
前端·webgl·three.js
CAD老兵5 天前
打造高性能二维图纸渲染引擎系列(三):高性能 CAD 文本渲染背后的隐藏工程
前端·webgl·three.js
CAD老兵5 天前
打造高性能二维图纸渲染引擎系列(二):创建结构化和可扩展的渲染场景
前端·webgl·three.js
王维志6 天前
使用Asp.Net WebApi(.net 8)托管Unity WebGL
unity·游戏引擎·webgl
Zuckjet_7 天前
第 7 篇:交互的乐趣 - 响应用户输入
前端·javascript·webgl
xhload3d7 天前
智慧钢厂高炉冶炼仿真分析 | 图扑数字孪生
3d·智慧城市·html5·webgl·数字孪生·可视化·热力图·智慧工厂·工业互联网·工业组态·高炉炼铁·数字工厂·高炉炉体·智慧高炉·高炉
猪哥帅过吴彦祖7 天前
第 8 篇:更广阔的世界 - 加载 3D 模型
前端·javascript·webgl