一个炎爆术分享给大家~

news2024/11/16 17:45:41

先来强势围观:
在这里插入图片描述
再看代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
<div id="world"></div>
</body>
<script type="module">
  import { EffectComposer } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/EffectComposer.js";
  import { RenderPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/RenderPass.js";
  import { UnrealBloomPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/UnrealBloomPass.js";
  import { OrbitControls } from "https://unpkg.com/three@0.120.0/examples/jsm/controls/OrbitControls.js";

  const ENTIRE_SCENE = 0,
          BLOOM_SCENE = 1;

  const bloomLayer = new THREE.Layers();
  bloomLayer.set(BLOOM_SCENE);
  const materials = {};
  const darkMaterial = new THREE.MeshBasicMaterial({ color: "black" });

  const vert = `
    varying vec3 vNormal;
    varying vec3 camPos;
    varying vec2 vUv;

    void main() {
    vNormal = normal;
    vUv = uv;
    camPos = cameraPosition;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
`;

  const frag = `
#define NUM_OCTAVES 5
#define M_PI 3.1415926535897932384626433832795
uniform vec4 resolution;
varying vec3 vNormal;
uniform sampler2D perlinnoise;
uniform sampler2D sparknoise;
uniform float time;
uniform vec3 color0;
uniform vec3 color1;
uniform vec3 color2;
uniform vec3 color3;
uniform vec3 color4;
uniform vec3 color5;
varying vec3 camPos;
varying vec2 vUv;

float setOpacity(float r, float g, float b, float tonethreshold) {
  float tone = (r + g + b) / 3.0;
  float alpha = 1.0;
  if(tone<tonethreshold) {
    alpha = 0.0;
  }
  return alpha;
}

vec3 rgbcol(vec3 col) {
  return vec3(col.r/255.0,col.g/255.0,col.b/255.0);
}

vec2 rotate(vec2 v, float a) {
  float s = sin(a);
  float c = cos(a);
  mat2 m = mat2(c, -s, s, c);
  return m * v;
}

vec2 UnityPolarCoordinates (vec2 UV, vec2 Center, float RadialScale, float LengthScale){
  //https://twitter.com/Cyanilux/status/1123950519133908995/photo/1
  vec2 delta = UV - Center;
  float radius = length(delta) * 2. * RadialScale;
  float angle = atan(delta.x, delta.y) * 1.0/6.28 * LengthScale;
  return vec2(radius, angle);
}

void main() {
  vec2 olduv = gl_FragCoord.xy/resolution.xy ;
  vec2 uv = vUv ;
  vec2 imguv = uv;
  float scale = 1.;
  olduv *= 0.5 + time;
  olduv.y = olduv.y ;
  vec2 p = olduv*scale;
  vec4 txt = texture2D(perlinnoise, olduv);
  float gradient = dot(normalize( -camPos ), normalize( vNormal ));
  float pct = distance(vUv,vec2(0.5));

  vec3 rgbcolor0 = rgbcol(color0);
  vec3 rgbcolor1 = rgbcol(color1);
  vec3 rgbcolor2 = rgbcol(color2);
  vec3 rgbcolor5 = rgbcol(color5);

  // set solid background
  float y = smoothstep(0.16,0.525,pct);
  vec3 backcolor = mix(rgbcolor0, rgbcolor5, y);

  gl_FragColor = vec4(backcolor,1.);

  // set polar coords
  vec2 center = vec2(0.5);
  vec2 cor = UnityPolarCoordinates(vec2(vUv.x,vUv.y), center, 1., 1.);

  // set textures
  vec2 newUv = vec2(cor.x + time,cor.x*0.2+cor.y);
  vec3 noisetex = texture2D(perlinnoise,mod(newUv,1.)).rgb;
  vec3 noisetex2 = texture2D(sparknoise,mod(newUv,1.)).rgb;


  // set textures tones
  float tone0 =  1. - smoothstep(0.3,0.6,noisetex.r);
  float tone1 =  smoothstep(0.3,0.6,noisetex2.r);


  // set opacity for each tone
  float opacity0 = setOpacity(tone0,tone0,tone0,.29);
  float opacity1 = setOpacity(tone1,tone1,tone1,.49);

  //set final render
  if(opacity1>0.0){
    gl_FragColor = vec4(rgbcolor2,0.)*vec4(opacity1);
  } else if(opacity0>0.0){
    gl_FragColor = vec4(rgbcolor1,0.)*vec4(opacity0);
  }
}
`;

  const vertcylinder = `
    varying vec2 vUv;

    void main() {
        vUv = uv;
        vec3 pos = vec3(position.x/1.,position.y,position.z/1.);
        if(pos.y >= 1.87){
            pos = vec3(position.x*(sin((position.y - 0.6)*1.27)-0.16),position.y,position.z*(sin((position.y - 0.6)*1.27)-0.16));
        } else{
            pos = vec3(position.x*(sin((position.y/2. -  .01)*.11)+0.75),position.y,position.z*(sin((position.y/2. -  .01)*.11)+0.75));
        }
        gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
    }
`;

  const fragcylinder = `
    varying vec2 vUv;
    uniform sampler2D perlinnoise;
    uniform vec3 color4;
    uniform float time;
    varying vec3 vNormal;

    vec3 rgbcol(vec3 col) {
        return vec3(col.r/255.0,col.g/255.0,col.b/255.0);
    }

    void main() {
        vec3 noisetex = texture2D(perlinnoise,mod(1.*vec2(vUv.y-time*2.,vUv.x + time*1.),1.)).rgb;
        gl_FragColor = vec4(noisetex.r);

        if(gl_FragColor.r >= 0.5){
            gl_FragColor = vec4(rgbcol(color4),gl_FragColor.r);
        }else{
            gl_FragColor = vec4(0.);
        }
        gl_FragColor *= vec4(sin(vUv.y) - 0.1);
        gl_FragColor *= vec4(smoothstep(0.3,0.628,vUv.y));

    }

`;

  const vertflame = `
    varying vec2 vUv;
    varying vec3 camPos;
    varying vec3 vNormal;
    varying vec3 nois;
    uniform sampler2D noise;
    uniform float time;

    void main() {
        vUv = uv;
        camPos = cameraPosition;
        vNormal = normal;
        vec3 pos = vec3(position.x/1.,position.y,position.z/1.);
        vec3 noisetex = texture2D(noise,mod(1.*vec2(vUv.y-time*2.,vUv.x + time*1.),1.)).rgb;
        if(pos.y >= 1.87){
            pos = vec3(position.x*(sin((position.y - 0.64)*1.27)-0.12),position.y,position.z*(sin((position.y - 0.64)*1.27)-0.12));
        } else{
            pos = vec3(position.x*(sin((position.y/2. -  .01)*.11)+0.79),position.y,position.z*(sin((position.y/2. -  .01)*.11)+0.79));
        }
        pos.xz *= noisetex.r;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
    }
`;

  const fragflame = `
    varying vec2 vUv;
    uniform sampler2D perlinnoise;
    uniform sampler2D noise;
    uniform vec3 color4;
    uniform float time;
    varying vec3 camPos;
    varying vec3 vNormal;
    varying vec3 nois;

    vec3 rgbcol(vec3 col) {
        return vec3(col.r/255.0,col.g/255.0,col.b/255.0);
    }


    void main() {
        vec3 noisetex = texture2D(noise,mod(1.*vec2(vUv.y-time*2.,vUv.x + time*1.),1.)).rgb;
        gl_FragColor = vec4(noisetex.r);
        if(gl_FragColor.r >= 0.44){
            gl_FragColor = vec4(rgbcol(color4),gl_FragColor.r);
        }

        else{
            gl_FragColor = vec4(0.);
        }
        gl_FragColor *= vec4(smoothstep(0.2,0.628,vUv.y));

    }

`;

  let options = {
    exposure: 2.8,
    bloomStrength: 3.5,
    bloomRadius: 0.39,
    color0: [0, 0, 0],
    color1: [81, 14, 5],
    color2: [181, 156, 24],
    color3: [66, 66, 66],
    color4: [79, 79, 79],
    color5: [64, 27, 0] };

  let gui = new dat.GUI();
  let bloom = gui.addFolder("Bloom");
  bloom.add(options, "bloomStrength", 0.0, 5.0).name("bloomStrength").listen();
  bloom.add(options, "bloomRadius", 0.1, 2.0).name("bloomRadius").listen();
  bloom.open();

  let color = gui.addFolder("Colors");
  color.addColor(options, "color0").name("ball0");
  color.addColor(options, "color1").name("ball1");
  color.addColor(options, "color2").name("ball2");
  color.addColor(options, "color4").name("steam");
  color.addColor(options, "color5").name("trail");
  color.open();
  gui.close();

  let scene,
          camera,
          renderer,
          controls,
          material,
          material2,
          material3,
          bloomPass,
          bloomComposer,
          composer,
          finalPass,
          finalComposer;
  const width = window.innerWidth,
          height = window.innerHeight;

  function init() {
    createScene();
    postProc();
    mesh();
    flame();
    cylinder();
    animatBloom();
  }

  function createScene() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000);

    camera.position.set(3.4369982203815655, 3.5239085092722098, 2.994862383531814);
    renderer = new THREE.WebGLRenderer();
    renderer.antialias = true;
    renderer.setClearColor(new THREE.Color('#000'));
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);
    controls = new OrbitControls(camera, renderer.domElement);
    document.getElementById("world").appendChild(renderer.domElement);
  }

  function postProc() {
    const renderScene = new RenderPass(scene, camera);
    bloomPass = new UnrealBloomPass(
            new THREE.Vector2(window.innerWidth, window.innerHeight),
            1.5,
            0.4,
            0.85);

    bloomPass.threshold = options.bloomThreshold;
    bloomPass.strength = options.bloomStrength;
    bloomPass.radius = options.bloomRadius;

    bloomComposer = new EffectComposer(renderer);
    bloomComposer.addPass(renderScene);
    bloomComposer.addPass(bloomPass);
  }

  function mesh() {
    const geometry = new THREE.SphereBufferGeometry(1, 30, 30);
    material = new THREE.ShaderMaterial({
      uniforms: {
        time: {
          type: "f",
          value: 0.0 },

        perlinnoise: {
          type: "t",
          value: new THREE.TextureLoader().load(
                  "https://raw.githubusercontent.com/pizza3/asset/master/noise9.jpg") },


        sparknoise: {
          type: "t",
          value: new THREE.TextureLoader().load(
                  "https://raw.githubusercontent.com/pizza3/asset/master/sparklenoise.jpg") },


        color5: {
          value: new THREE.Vector3(...options.color5) },

        color4: {
          value: new THREE.Vector3(...options.color4) },

        color3: {
          value: new THREE.Vector3(...options.color3) },

        color2: {
          value: new THREE.Vector3(...options.color2) },

        color1: {
          value: new THREE.Vector3(...options.color1) },

        color0: {
          value: new THREE.Vector3(...options.color0) },

        resolution: { value: new THREE.Vector2(width, height) } },

      vertexShader: vert,
      fragmentShader: frag });


    const mesh = new THREE.Mesh(geometry, material);
    mesh.scale.set(0.78, 0.78, 0.78);
    mesh.position.set(1 + 0, 0, 0);
    scene.add(mesh);
  }

  function cylinder() {
    const geometry = new THREE.CylinderBufferGeometry(1.11, 0, 5.3, 50, 50, true);
    material2 = new THREE.ShaderMaterial({
      uniforms: {
        perlinnoise: {
          type: "t",
          value: new THREE.TextureLoader().load(
                  "https://raw.githubusercontent.com/pizza3/asset/master/water-min.jpg") },
        color4: {
          value: new THREE.Vector3(...options.color4) },

        time: {
          type: "f",
          value: 0.0 },

        noise: {
          type: "t",
          value: new THREE.TextureLoader().load(
                  "https://raw.githubusercontent.com/pizza3/asset/master/noise9.jpg") } },



      // wireframe:true,
      vertexShader: vertcylinder,
      fragmentShader: fragcylinder,
      transparent: true,
      depthWrite: false,
      side: THREE.DoubleSide });


    const mesh = new THREE.Mesh(geometry, material2);
    mesh.rotation.set(0, 0, -Math.PI / 2);
    mesh.position.set(1 + -4.05, 0, 0);
    mesh.scale.set(1.5, 1.7, 1.5);
    scene.add(mesh);
  }

  function flame() {
    const geometry = new THREE.CylinderBufferGeometry(1, 0, 5.3, 50, 50, true);
    material3 = new THREE.ShaderMaterial({
      uniforms: {
        perlinnoise: {
          type: "t",
          value: new THREE.TextureLoader().load(
                  "https://raw.githubusercontent.com/pizza3/asset/master/water-min.jpg") },

        color4: {
          value: new THREE.Vector3(...options.color5) },

        time: {
          type: "f",
          value: 0.0 },

        noise: {
          type: "t",
          value: new THREE.TextureLoader().load(
                  "https://raw.githubusercontent.com/pizza3/asset/master/noise9.jpg") } },

      // wireframe:true,
      vertexShader: vertflame,
      fragmentShader: fragflame,
      transparent: true,
      depthWrite: false,
      side: THREE.DoubleSide });


    const mesh = new THREE.Mesh(geometry, material3);
    mesh.rotation.set(0, 0, -Math.PI / 2);
    mesh.position.set(1 + -4.78, 0, 0);
    mesh.scale.set(2, 2, 2);
    scene.add(mesh);
  }

  function updateDraw(deltaTime) {
    material.uniforms.time.value = -deltaTime / (1000 * 2);
    material2.uniforms.time.value = -deltaTime / (3000 * 2);
    material3.uniforms.time.value = -deltaTime / (3000 * 2);
    material.uniforms.color5.value = new THREE.Vector3(...options.color5);
    material2.uniforms.color4.value = new THREE.Vector3(...options.color4);
    material3.uniforms.color4.value = new THREE.Vector3(...options.color5);
    material.uniforms.color3.value = new THREE.Vector3(...options.color3);
    material.uniforms.color2.value = new THREE.Vector3(...options.color2);
    material.uniforms.color1.value = new THREE.Vector3(...options.color1);
    material.uniforms.color0.value = new THREE.Vector3(...options.color0);
  }

  function animatBloom(deltaTime) {
    requestAnimationFrame(animatBloom);
    updateDraw(deltaTime);
    controls.update();
    bloomPass.strength = options.bloomStrength;
    bloomPass.radius = options.bloomRadius;
    bloomComposer.render();
  }

  function handleResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }

  window.addEventListener("load", init);
  window.addEventListener("resize", handleResize, false);
</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/547047.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

23种设计模式之外观模式(Facade Pattern)

前言&#xff1a;大家好&#xff0c;我是小威&#xff0c;24届毕业生&#xff0c;在一家满意的公司实习。本篇文章将23种设计模式中的外观模式&#xff0c;此篇文章为一天学习一个设计模式系列文章&#xff0c;后面会分享其他模式知识。 如果文章有什么需要改进的地方还请大佬不…

云从科技从容大模型:大模型和AI平台什么关系?为什么造行业大模型?

原创&#xff1a;亲爱的数据 2023年5月18日&#xff0c;坐标广州南沙&#xff0c;来自云从科技的“云从从容大模型”正式亮相。 自此&#xff0c;云从科技从CV四小龙“进阶”成为一家AI大模型公司&#xff0c;同时&#xff0c;别忘记云从还有一个身份常被人提起&#xff1a;首家…

纯虚函数与抽象类

纯虚函数与抽象类 虚析构函数状态转换的引入C中的状态转换C中的状态转换职责链模式 纯虚函数和虚基类使用规则实例接口继承和实现继承 虚析构函数 在上一次博客中写到了这么一段代码&#xff1a; class object { private: int value;public:object(int x 0) : value(x) {}~o…

嵌入式音视频开发过程中如何控制码率?

一、码率控制的意义&#xff1a; 在音视频领域&#xff0c;码率控制模式有着举足轻重的地位。那什么是码率控制&#xff1f;码率控制是指通过调节图像的压缩比例&#xff0c;从而决定输出编码码率的过程。 二、H264有多少种码率控制模式&#xff1a; H264码率控制模式分别有&am…

DailyMart01:一点小想法,一个新的开始!

大家好呀&#xff0c;我是飘渺&#xff01; 截至目前&#xff0c;我已在公众号和知识星球上发布了多个系列文章&#xff0c;涵盖了SpringBoot老鸟系列、SpringCloud微服务系列、运维监控系列、分库分表系列和Kubernetes云原生系列。尽管每个系列的重点各有不同&#xff0c;它们…

【MYSQL】事务的4大属性,对隔离级别的详细讲解

目录 1.原子性和持久性 1.1.手动提交事务 1.2.自动提交事务 1.3.事务的原理&#xff1a; 2.隔离性 1.读未提交&#xff08;Read Uncommitted&#xff09; 2.读提交&#xff08;Read Committed&#xff09; 3.可重复读 4.串行化 3.一致性 4.理解读提交和可重复读的实现…

iptables

目录 iptables概述 netfilter/iptables 关系&#xff1a; 四表五链 四表&#xff1a; 五链&#xff1a; 数据包到达防火墙时&#xff0c;规则表之间的优先顺序&#xff1a; 规则链之间的匹配顺序&#xff1a; 主机型防火墙&#xff1a; 网络型防火墙&#xff1a; ipta…

Uart,RS232,RS485串口通讯协议学习

目录 定义 UART&#xff08;通常被称为串口,简单意味着使用广泛&#xff0c;具有普适性) RS232 RS232电平转换 RS485 -Recommended Standard (再推荐标准) 485和232的对比 RS485组网 总结 定义 串口是我们都很熟悉的&#xff0c;尤其是需要串口调试的时候,打印信息插…

C语言函数大全-- _w 开头的函数(4)

C语言函数大全 本篇介绍C语言函数大全-- _w 开头的函数 1. _wstrtime 1.1 函数说明 函数声明函数功能wchar_t *_wstrtime(wchar_t *buffer);用于获取当前系统时间并返回一个宽字符字符串表示&#xff0c;格式为 "HH:MM:SS"&#xff08;小时:分钟:秒&#xff09; …

2023 Vue开发者的React入门

Vue 和 React 都是流行的 JavaScript 框架&#xff0c;它们在组件化、数据绑定等方面有很多相似之处 本文默认已有现代前端开发(Vue)背景&#xff0c;关于 组件化、前端路由、状态管理 概念不会过多介绍 0基础建议详细阅读 Thinking in React-官方文档 了解 React 的设计哲学 R…

彻底理解粘性定位 - position: sticky(IT枫斗者)

彻底理解粘性定位 - position: sticky 介绍 粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位&#xff0c;之后为固定定位。例如: .sticky-header { position: sticky; top: 10px; }在 视口滚动到元素…

【JavaWeb】--05.Request和Response、JSP、会话技术

文章目录 Request和Response1.概述2.Request对象2.1 Request继承体系2.2Request获取请求数据2.3 IDEA创建Servlet2.4 请求参数中文乱码问题POST请求解决方案GET请求解决方案 2.5 Request请求转发 3.Response对象3.1 Response设置响应数据功能介绍3.2 Response请求重定向3.3 路径…

【全网首测】5G随身Wi-Fi —— 中兴U50 Pro

说到随身Wi-Fi&#xff0c;大家应该都不陌生。 它是一个专门将移动信号转换成Wi-Fi信号的设备&#xff0c;经常被用于旅行和出差场景&#xff0c;也被人们亲切地称为“上网宝”。 现在&#xff0c;我们已经全面进入了5G时代&#xff0c;随身Wi-Fi也升级迭代&#xff0c;出现了支…

人工智能的界面革命,消费者与企业互动的方式即将发生变化。

本文来源于 digitalnative.substack.com/p/ais-interface-revolution 描述了一种社会现象&#xff1a; 随着真实友谊的减少和虚拟友谊的增加&#xff0c;越来越多的人开始将AI聊天机器人视为自己的朋友&#xff0c;甚至建立了深厚的情感纽带。这可能与当前人们越来越孤独的现实…

面向“伙伴+华为”体系,华为产品力的变与不变

在日前举办的“华为中国合作伙伴大会2023”上&#xff0c;华为面向政企市场提出了建设“伙伴华为”体系的发展方向。可想而知&#xff0c;接下来会有更多伙伴加入这一体系&#xff0c;也会有更多客户可以借由这个体系加速完成自身的数字化转型和智能化升级。而产品与技术&#…

luaplus Windows编译(一)

前言 LuaPlus是Lua的C增强&#xff0c;也就是说&#xff0c;LuaPlus本身就是在Lua的源码上进行增强得来的。用它与C进行合作&#xff0c;是比较好的一个选择。 1:准备 luaplus_all 下载地址&#xff1a;https://github.com/jjensen/luaplus51-all jamplus 下载地址 https://gi…

基于神经网络算法的鱼类迁徙轨迹拟合研究

本试验采用HTI Model 291便携型声学标签接收系统,包括的基本部件有:291便携型声学标签接收器1台,590型水听器4根,最新795型声学标签40枚,490-LP 型标签编程器1台,690系列电缆400m,492微型声学标签探测器1台,115VAC型滤波器1台,TagProgrammer 、MarkTags和AcousticTag专…

30个数据科学工作中最常用的 Python 包

Python 可以说是最容易入门的编程语言&#xff0c;在numpy&#xff0c;scipy等基础包的帮助下&#xff0c;对于数据的处理和机器学习来说Python可以说是目前最好的语言。 在各位大佬和热心贡献者的帮助下Python拥有一个庞大的社区支持技术发展&#xff0c;开发两个各种 Python…

Oracle中数据导出成HTML的操作实践

spool是Oracle中将数据到成文件常用的一种工具&#xff0c;但它的强大&#xff0c;不仅仅是数据的导出&#xff0c;在格式和内容上&#xff0c;还可以自定义&#xff0c;甚至生成像AWR一样的统计报告。 参考《SQL*Plus Users Guide and Reference》中第7章"Generating HTM…

光纤仿真相关求解——光纤芯层和包层电磁场分布求解

要求解光纤中的电磁场分布&#xff0c;就要构建合适的物理模型 将光纤假设为圆柱状的波导&#xff0c;求解满足均匀原型介质波导边界条件的麦克斯韦方程组&#xff0c;即可 z分量的亥姆霍兹方程为&#xff1a; 对应在圆柱坐标系下为&#xff1a; 用分离变量法求解Ez&#xff…