使用three.js的着色器通道二之渲染太阳模型

水深无声 2022-05-24 01:38 157阅读 0赞

在第一节：[https://blog.csdn.net/qq\_37338983/article/details/80289631][https_blog.csdn.net_qq_37338983_article_details_80289631]，讲了如何利用基本的着色器通道对地球模型进行渲染，文章里面只是单纯地用到了着色器通道，代码里也没有着色器代码的编写，本节将会使用着色器代码和着色器通道结合共同来渲染一个类似于太阳的模型，模拟太阳表面的流动效果。

所用贴图在上一篇文章里面有提到过下载方法，请读者自行下载：[点击打开链接][https_blog.csdn.net_qq_37338983_article_details_80289631]。

有关着色器相关知识可参考：[https://blog.csdn.net/qq\_37338983/article/details/78556063][https_blog.csdn.net_qq_37338983_article_details_78556063]

下面先来看这个demo实现的效果：

![20180517212929319][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <title>shader_1</title>
        <style>
            body {
                color: #ffffff;
                font-family:Monospace;
                font-size:13px;
                text-align:center;
                font-weight: bold;
                background-color: #000000;
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    <div id="container"></div>
    <script src="build/three.js"></script>
    <script src="js/controls/OrbitControls.js"></script>
    <script src="js/shaders/ConvolutionShader.js"></script>
    <script src="js/shaders/CopyShader.js"></script>
    <script src="js/shaders/FilmShader.js"></script>
    
    <script src="js/postprocessing/EffectComposer.js"></script>
    <script src="js/postprocessing/ShaderPass.js"></script>
    <script src="js/postprocessing/MaskPass.js"></script>
    <script src="js/postprocessing/RenderPass.js"></script>
    <script src="js/postprocessing/BloomPass.js"></script>
    <script src="js/postprocessing/FilmPass.js"></script>
    
    <script src="js/Detector.js"></script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        uniform float time;
    			uniform float fogDensity;
    			uniform vec3 fogColor;
    			uniform sampler2D texture1;
    			uniform sampler2D texture2;
    			varying vec2 vUv;
    			void main( void ) {
    				vec2 position = - 1.0 + 2.0 * vUv;
    				vec4 noise = texture2D( texture1, vUv );
    				vec2 T1 = vUv + vec2( 1.5, - 1.5 ) * time * 0.02;
    				vec2 T2 = vUv + vec2( - 0.5, 2.0 ) * time * 0.01;
    				T1.x += noise.x * 2.0;
    				T1.y += noise.y * 2.0;
    				T2.x -= noise.y * 0.2;
    				T2.y += noise.z * 0.2;
    				float p = texture2D( texture1, T1 * 2.0 ).a;
    				vec4 color = texture2D( texture2, T2 * 2.0 );
    				vec4 temp = color * ( vec4( p, p, p, p ) * 2.0 ) + ( color * color - 0.1 );
    				if( temp.r > 1.0 ) { temp.bg += clamp( temp.r - 2.0, 0.0, 100.0 ); }
    				if( temp.g > 1.0 ) { temp.rb += temp.g - 1.0; }
    				if( temp.b > 1.0 ) { temp.rg += temp.b - 1.0; }
    				gl_FragColor = temp;
    				float depth = gl_FragCoord.z / gl_FragCoord.w;
    				const float LOG2 = 1.442695;
    				float fogFactor = exp2( - fogDensity * fogDensity * depth * depth * LOG2 );
    				fogFactor = 1.0 - clamp( fogFactor, 0.0, 1.0 );
    				gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
    			}
    
    </script>
    
    <script id="vertexShader" type="x-shader/x-vertex">
        uniform vec2 uvScale;
    	varying vec2 vUv;
    	void main()
    		{
    			vUv = uvScale * uv;
    			vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    			gl_Position = projectionMatrix * mvPosition;
    		}
    
    </script>
     <script>
        if (!Detector.webgl) Detector.addGetWebGLMessage();
    
        let container;
    
        let camera, scene, controls, renderer, composer, clock;
        let uniforms, mesh;
    
        init();
        animate();
    
    
        function init() {
            container = document.getElementById('container');
            camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 3000 );
            camera.position.z = 4;
    
            scene = new THREE.Scene();
            clock = new THREE.Clock();
            let textureLoader = new THREE.TextureLoader();
            //定义着色器与外部联系的变量
            uniforms = {
                fogDensity: { value: 0.45 },
                fogColor: { value: new THREE.Vector3( 0, 0, 0 ) },
                time: { value: 1.0 },
                uvScale: { value: new THREE.Vector2( 3.0, 2.0 ) },
                texture1: { value: textureLoader.load( 'textures/lava/cloud.png' ) },
                texture2: { value: textureLoader.load( 'textures/lava/lavatile.jpg' ) }
            };
            uniforms.texture1.value.wrapS = uniforms.texture1.value.wrapT = THREE.RepeatWrapping;
            uniforms.texture2.value.wrapS = uniforms.texture2.value.wrapT = THREE.RepeatWrapping;
    
            let material = new THREE.ShaderMaterial( {//通过ShaderMaterial将一些外部参数传入到着色器
                uniforms: uniforms,
                vertexShader: document.getElementById( 'vertexShader' ).textContent,
                fragmentShader: document.getElementById( 'fragmentShader' ).textContent
            } );
        
            mesh = new THREE.Mesh(new THREE.SphereGeometry(0.8,40,40), material);
            // mesh = new THREE.Mesh(new THREE.BoxGeometry(1,1,1,30,30,30), material);
    
    
            scene.add( mesh );
    
            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            container.appendChild( renderer.domElement );
            renderer.autoClear = false;
    
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.rotateSpeed = 3.0;
            controls.autoRotate = false;
            controls.enableKeys = true;
    
            let renderModel = new THREE.RenderPass( scene, camera );//渲染场景的通道，不会将结果输出到屏幕
            let effectBloom = new THREE.BloomPass( 1.25 );//增加场景的渲染亮度
            let effectFilm = new THREE.FilmPass( 0.35, 0.95, 2048, false );//将渲染结果输出到屏幕上
            effectFilm.renderToScreen = true;
            composer = new THREE.EffectComposer( renderer );//渲染效果组合器
            composer.addPass( renderModel );
            composer.addPass( effectBloom );
            composer.addPass( effectFilm );
            //
            onWindowResize();
            window.addEventListener( 'resize', onWindowResize, false );
        }
        //控制窗口尺寸变化
        function onWindowResize( event ) {
            renderer.setSize( window.innerWidth, window.innerHeight );
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            composer.reset();
        }
    
        function animate() {
            requestAnimationFrame( animate );
            render();
        }
        function render() {
            let delta = 5 * clock.getDelta();
            uniforms.time.value += 0.2 * delta;
            mesh.rotation.y += 0.01 * delta;
            mesh.rotation.x += 0.01 * delta;
            renderer.clear();
            controls.update();
            composer.render( 0.005 );
        }
     </script>
    </body>
    </html>

[https_blog.csdn.net_qq_37338983_article_details_80289631]: https://blog.csdn.net/qq_37338983/article/details/80289631
[https_blog.csdn.net_qq_37338983_article_details_78556063]: https://blog.csdn.net/qq_37338983/article/details/78556063
[20180517212929319]: /images/20220524/d36a36f167cd4a7487000af7afec94e7.png