【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绘制汽车展示Car(WebGL、vue、react、autoshow、提供全部源代码)
汽车·vue3·react·webgl·three.js·opengl·autoshow
zhu_zhu_xia2 天前
cesium添加原生MVT矢量瓦片方案
javascript·arcgis·webgl·cesium
charlee442 天前
WebGL简易教程——结语
教程·webgl·三维可视化·前端开发·计算机图形学
心前阳光3 天前
Unity WebGL文本输入
unity·游戏引擎·webgl
三月的一天3 天前
React Three Fiber 实现 3D 模型点击高亮交互的核心技巧
3d·webgl·threejs·reactthreefiber
康康的幸福生活3 天前
webgl2 方法解析: bufferSubData()
webgl
千鼎数字孪生-可视化3 天前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
Data_Adventure5 天前
推荐几款开源 Canvas 和 WebGL 图形库
前端·webgl·canvas
康康的幸福生活6 天前
webgl2 方法解析: bufferData()
webgl
xhload3d7 天前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收