使用three.js的着色器通道一之渲染地球模型

学习交流欢迎加群：789723098，博主会将一些demo整理共享

我们都知道，three.js库里面内置了很多着色器通道对象供我们渲染场景，本文将对EffectComposer、RenderPass、FilmPass这三个通道进行学习和实现：

1.RenderPass这个通道会在当前场景（scene）和摄像机（camera）的基础上渲染出一个新场景，新建：

let renderPass = new THREE.RenderPass(scene, camera);

2.FilmPass这个通道通过扫描线和失真模拟电视屏幕效果，实现的效果超有时代感，新建：

/*四个参数分别为粗糙程度，扫描线强度，扫描线数量，是否转换为灰度图*/
let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);
//将渲染结果输出到屏幕
effectFilm.renderToScreen = true;

3.EffectComposer可以理解为着色器通道容器，着色器通道按照先后顺序添加进来并执行，新建：

 /*渲染效果组合器，每个通道都按照传入的顺序执行*/let composer = new THREE.EffectComposer(renderer);composer.addPass(renderPass);composer.addPass(effectFilm);

本文实现的demo基于three.js_r86(请自行下载)，代码所用js文件和图片都在下载的那个包里面，请读者自行引用。

实现效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>shader_2_earth</title><style>body{margin: 0;overflow: hidden;}</style>
</head>
<body>
<script src="build/three.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/Detector.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/FilmPass.js"></script>
<script src="js/postprocessing/BloomPass.js"></script>
<script src="js/postprocessing/RenderPass.js"></script><script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/FilmShader.js"></script><div id="stats"></div>
<div id="container"></div>
<script>//检测webgl的兼容性if(!Detector.webgl) Detector.addGetWebGLMessage();let scene;let camera, renderer, sphere, controls, stats;let ambientLight, spotLight;let composer;let clock;main();render();function main() {scene = new THREE.Scene();camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);camera.position.set(-10, 15, 25);camera.lookAt(new THREE.Vector3(0, 0, 0));renderer = new THREE.WebGLRenderer({antialias:true});renderer.setClearColor(new THREE.Color(0,0,0));renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMapEnabled = true;controls = new THREE.OrbitControls(camera);controls.autoRotate = false;clock = new THREE.Clock();ambientLight = new THREE.AmbientLight(0x181818);scene.add(ambientLight);spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(550, 100, 550);spotLight.intensity = 0.6;scene.add(spotLight);//创建地球sphere = createMesh(new THREE.SphereGeometry(10, 60, 60));scene.add(sphere);document.getElementById("container").appendChild(renderer.domElement);/*** 添加渲染通道*///在当前场景和摄像机的基础上渲染一个新场景let renderPass = new THREE.RenderPass(scene, camera);//通过扫描线和失真来实现模拟电视屏幕的效果let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);//将渲染结果输出到屏幕effectFilm.renderToScreen = true;//渲染效果组合器，每个通道都按照传入的顺序执行composer = new THREE.EffectComposer(renderer);composer.addPass(renderPass);composer.addPass(effectFilm);//菜单栏元素let guiFields = {"扫描线数量": 256,"灰度图像": false,"扫描线强度": 0.3,"粗糙程度": 0.8,"updateEffectFilm": function () {effectFilm.uniforms.grayscale.value = guiFields.灰度图像;effectFilm.uniforms.nIntensity.value = guiFields.粗糙程度;effectFilm.uniforms.sIntensity.value = guiFields.扫描线强度;effectFilm.uniforms.sCount.value = guiFields.扫描线数量;}};//新建一个菜单栏let gui = new dat.GUI();gui.add(guiFields, "扫描线数量", 0, 2048).onChange(guiFields.updateEffectFilm);gui.add(guiFields, "扫描线强度", 0, 1).onChange(guiFields.updateEffectFilm);gui.add(guiFields, "粗糙程度", 0, 3).onChange(guiFields.updateEffectFilm);gui.add(guiFields, "灰度图像").onChange(guiFields.updateEffectFilm);stats = initStats();}//创建一个Meshfunction createMesh(geometry) {//初始化纹理加载器let textureLoader = new THREE.TextureLoader();//加载图片let uniforms = {planetTexture:{value:textureLoader.load("textures/planets/earth_atmos_2048.jpg")},specularTexture:{value:textureLoader.load("textures/planets/earth_specular_2048.jpg")},normalTexture:{value:textureLoader.load("textures/planets/earth_normal_2048.jpg")}};//创建phong材料，并进行相应图片的贴图let planetMaterial = new THREE.MeshPhongMaterial();planetMaterial.specularMap = uniforms.specularTexture.value;planetMaterial.specular = new THREE.Color(0x4444aa);planetMaterial.normalMap = uniforms.normalTexture.value;planetMaterial.map = uniforms.planetTexture.value;//新建一个meshlet mesh = new THREE.SceneUtils.createMultiMaterialObject(geometry, [planetMaterial]);return mesh;}//渲染更新场景function render() {stats.update();let delta = clock.getDelta();controls.update(delta);sphere.rotation.y += 0.002;requestAnimationFrame(render);//没有着色器通道系统默认为WebGLRenderer.render//使用着色器通道后，应使用使用composer.rendercomposer.render(delta);}//左上角帧显示function initStats() {let stats = new Stats();stats.setMode(0);stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("stats").appendChild(stats.domElement);return stats;}
</script>
</body>
</html>

使用three.js的着色器通道一之渲染地球模型相关推荐

three.js的着色器（巨详细初学者大白话）
three.js就不过多介绍了可以看另一篇文章总结就是场景相机和渲染器学起来也比较轻松后来看到了着色器给我整懵乐了一会一个API 一会一个API 都没见过然后就一点点去学 ...
Unity渲染(二):Shader着色器基础入门之渲染Image图片
Unity渲染(二):图片渲染通过这里,你会学习到怎么将一张图片渲染到UI的Image组件或者SpriteRenderer上,以及透明物体的渲染. 上一章:Unity渲染(一):着色器基础入门之纯色 ...
Three.js进阶篇之4 - 着色器
"渲染"(Rendering)是即使非计算机专业的都不会觉得陌生的词,虽然在很多人说这个词的时候,并不清楚"渲染"究竟意味着什么.相反,"着色器&qu ...
【浅墨Unity3D Shader编程】之三光之城堡篇：子着色器、通道与标签的写法 amp; 纹理混合...
本系列文章由@浅墨_毛星云出品,转载请注明出处. 文章链接: http://hpw123.net/a/C__/kongzhitaichengxu/2014/1117/120.html 作者:毛星 ...
【Unity3D Shader编程】之三光之城堡篇：子着色器、通道与标签的写法纹理混合
本系列文章由@浅墨_毛星云出品,转载请注明出处. 文章链接: http://blog.csdn.net/poem_qianmo/article/details/41175585 作者:毛星云(浅墨) ...
使用着色器在WebGL3D场景中呈现行星表面地形
实验目的:按照一定规律生成类地行星地表地形区块,并用合理的方式将地形块显示出来涉及知识:Babylon.js引擎应用.着色器编程.正态分布.数据处理.canvas像素操作 github地址:http ...
定制着色器和渲染后期处理
1.设置后期处理设置Three.js库为后期处理做准备,我们需要通过以下步骤对当前的配置进行修改: 1)创建一个EffectComposer(效果组合器)对象,然后在该对象上添加后期处理通道. 2) ...
《Unity着色器和屏幕特效》——2.2　进阶的透明效果
本节书摘来自华章计算机<Unity着色器和屏幕特效>一书中的第2章,第2.2节,作者［美］杰米·迪恩(Jamie Dean),译周翀,张薇,更多章节内容可以访问云栖社区"华章计 ...
什么是着色器/Threejs如何使用着色器/Threejs使用着色器实现平面网格的动态效果案例
1,什么是着色器着色器(Shader)是计算机图形学中的一个重要概念,它是在 GPU 上运行的程序,用于计算三维场景中每个像素的颜色和其他属性. 着色器通常分为两种类型:顶点着色器和片元着色器.顶点 ...
Unity着色器常用关键字及属性
看了好多次shader,不过还是感觉无从下手的去写shader,然后看shader的效果个人认为还是因为shader基础打得不够扎实,顾特意再重温shader相关书籍的时候,看见有些常用关键字时,把 ...

使用three.js的着色器通道一之渲染地球模型

学习交流欢迎加群：789723098，博主会将一些demo整理共享

实现效果：

代码：

使用three.js的着色器通道一之渲染地球模型相关推荐

最新文章

热门文章