WebGL Three.js使用着色器生成彩虹光谱特效

着色器代码包含颜色转换函数rgb2hsb, hsb2rgb。

webgl, shader, three, uniform

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3132
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var container;
var camera, scene, renderer;
var uniforms;

init();
animate();

function init() {
    container = document.getElementById('container');

camera = new THREE.Camera();
    camera.position.z = 1;

scene = new THREE.Scene();

var geometry = new THREE.PlaneBufferGeometry(2, 2);

uniforms = {
        u_time: {
            type: "f",
            value: 1.0
        },
        u_resolution: {
            type: "v2",
            value: new THREE.Vector2()
        },
        u_mouse: {
            type: "v2",
            value: new THREE.Vector2()
        }
    };

var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: document.getElementById('vertexShader').textContent,
        fragmentShader: document.getElementById('fragmentShader').textContent
    });

var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);

container.appendChild(renderer.domElement);

onWindowResize();
    window.addEventListener('resize', onWindowResize, false);

document.onmousemove = function(e) {
        uniforms.u_mouse.value.x = e.pageX
        uniforms.u_mouse.value.y = e.pageY
    }
}

function onWindowResize(event) {
    renderer.setSize(window.innerWidth, window.innerHeight);
    uniforms.u_resolution.value.x = renderer.domElement.width;
    uniforms.u_resolution.value.y = renderer.domElement.height;
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    uniforms.u_time.value += 0.05;
    renderer.render(scene, camera);
}

编译

CSS

HTML

<div id="container"></div>
<script id="vertexShader" type="x-shader/x-vertex">
    void main() {
        gl_Position = vec4( position, 1.0 );
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  #ifdef GL_ES
  precision mediump float;
  #endif

uniform vec2 u_resolution;
  uniform float u_time;

vec3 rgb2hsb( in vec3 c ){
      vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
      vec4 p = mix(vec4(c.bg, K.wz), 
                   vec4(c.gb, K.xy), 
                   step(c.b, c.g));
      vec4 q = mix(vec4(p.xyw, c.r), 
                   vec4(c.r, p.yzx), 
                   step(p.x, c.r));
      float d = q.x - min(q.w, q.y);
      float e = 1.0e-10;
      return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), 
                  d / (q.x + e), 
                  q.x);
  }

//  https://www.shadertoy.com/view/MsS3Wc
  vec3 hsb2rgb( in vec3 c ){
      vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
                               6.0)-3.0)-1.0, 
                       0.0, 
                       1.0 );
      rgb = rgb*rgb*(3.0-2.0*rgb);
      return c.z * mix(vec3(1.0), rgb, c.y);
  }

void main(){
      vec2 st = gl_FragCoord.xy/u_resolution;
      vec3 color = vec3(0.0);

// We map x (0.0 - 1.0) to the hue (0.0 - 1.0)
      // And the y (0.0 - 1.0) to the brightness
      color = hsb2rgb(vec3(st.x,1.0,st.y));

gl_FragColor = vec4(color,1.0);
  }
</script>

着色器代码包含颜色转换函数rgb2hsb, hsb2rgb。

webgl, shader, three, uniform

编辑器支持Emmet

快捷键

着色器代码包含颜色转换函数rgb2hsb, hsb2rgb。

webgl, shader, three, uniform

WebGL Three.js 彩虹液态物质（液体）动画特效的着色器代码

WebGL Three.js梦幻的彩色云霞特效着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：