javascript - 使用带有静态背景图像的 threejs 的后处理效果-6ren

javascript - 使用带有静态背景图像的 threejs 的后处理效果

转载作者：行者123 更新时间：2023-11-30 20:46:35

所以我从 Andrew Berg(可以在这里看到:https://codepen.io/abberg/pen/pbWkjg?editors=0010)找到了一个简洁的代码片段来在 threejs 中创建体积光，他利用后处理和着色器来创建体积光球。

我的问题是如何修改我的代码，以便在使用将创建体积光的 composer 渲染器的同时在后台渲染静态图像，因为目前我可以做一个或另一个，但不能同时做两个.

如果我删除了动画函数中的 render(); 调用并从 //renderer.render(backgroundScene,backgroundCamera); 中删除了评论 //renderer.render(场景,相机);

我能够看到静态背景图像，但是不会使用制作体积光的后处理效果，反之亦然，如果我离开 render(); 函数并离开那些注释掉的行我可以看到后期处理效果和光球着色器。

main.js

var scene, camera, renderer,
    testcube, composer;

var backgroundMesh, backgroundScene, backgroundCamera,
    backgroundComposer;

var occlusionComposer, occlusionRenderTarget, 
    occlusionBox, lightSphere, sphereUniforms;

var OCCLUSION_LAYER, DEFAULT_LAYER;

var incr;

function init(){

    incr = 0;
   OCCLUSION_LAYER = 1;
   DEFAULT_LAYER = 0;

   renderer = new THREE.WebGLRenderer({ antialias: false, alpha:true });
   renderer.setSize(window.innerWidth,window.innerHeight);
   renderer.autoClear = false;
   renderer.setClearColor(0x000000);


   scene = new THREE.Scene();

   var sphereGeo = new THREE.SphereGeometry(5,10,10);
   var sphereMat = new THREE.MeshBasicMaterial({color:0xffffff});
   lightSphere = new THREE.Mesh(sphereGeo,sphereMat);
   lightSphere.layers.set(OCCLUSION_LAYER);
   lightSphere.position.z = 0;
   lightSphere.position.y = -150;
   lightSphere.position.x = -150;

   scene.add(lightSphere);

   var boxGeo =  new THREE.BoxGeometry(50,50,50);
   var boxMat = new THREE.MeshBasicMaterial({color:0xffff13});
   testcube = new THREE.Mesh(boxGeo,boxMat);

   scene.add(testcube);

   testcube.position.z = 0;
   testcube.position.y = -100;
   testcube.position.x = -90;

   camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1,7000);

   camera.position.z = 200;
   camera.position.x = -150;
   camera.position.y = -150;
   scene.add(camera);

   var light = new THREE.AmbientLight(0xffffff);
   scene.add(light);

    var manager = new THREE.LoadingManager();
    var loader = new THREE.TextureLoader( manager );

    backgroundScene = new THREE.Scene();
    backgroundCamera = new THREE.Camera();
    backgroundScene.add( backgroundCamera );

    loader.load( 'img/background.png', function( texture ) {
        backgroundMesh = new THREE.Mesh(
            new THREE.PlaneGeometry(2, 2, 0),
            new THREE.MeshBasicMaterial({
                map: texture
            })
        );

        backgroundMesh.material.depthTest = false;
        backgroundMesh.material.depthWrite = false;
        backgroundScene.add( backgroundMesh );
    });


   document.body.appendChild(renderer.domElement);


}
function preprocess(){

    var pass;
    occlusionRenderTarget = new THREE.WebGLRenderTarget( window.innerWidth * 0.5 , window.innerHeight * 0.5 );
    occlusionComposer = new THREE.EffectComposer( renderer, occlusionRenderTarget);
    occlusionComposer.addPass( new THREE.RenderPass( scene, camera ) );
    pass = new THREE.ShaderPass( THREE.VolumetericLightShader );
    pass.needsSwap = false;
    occlusionComposer.addPass( pass );

    sphereUniforms = pass.uniforms;

    composer = new THREE.EffectComposer( renderer );
    composer.addPass( new THREE.RenderPass( scene, camera ) );
    pass = new THREE.ShaderPass( THREE.AdditiveBlendingShader );
    pass.uniforms.tAdd.value = occlusionRenderTarget.texture;
    composer.addPass( pass );
    pass.renderToScreen = true;

}
function render(){


    camera.layers.set(OCCLUSION_LAYER);
    occlusionComposer.render();
    //backgroundComposer.render();
    camera.layers.set(DEFAULT_LAYER);
    composer.render();

}
function animate(){


    requestAnimationFrame(animate);
    renderer.clear();

    render();
    //renderer.render(backgroundScene,backgroundCamera);
    //renderer.render(scene,camera);
}
init();
preprocess();
animate();

shader.js

THREE.VolumetericLightShader = {
  uniforms: {
    tDiffuse: {value:null},
    lightPosition: {value: new THREE.Vector2(0.5, 0.5)},
    exposure: {value: 0.18},
    decay: {value: 0.95},
    density: {value: 0.8},
    weight: {value: 0.62},
    samples: {value: 100}
  },

  vertexShader: [
    "varying vec2 vUv;",
    "void main() {",
      "vUv = uv;",
      "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
    "}"
  ].join("\n"),

  fragmentShader: [
    "varying vec2 vUv;",
    "uniform sampler2D tDiffuse;",
    "uniform vec2 lightPosition;",
    "uniform float exposure;",
    "uniform float decay;",
    "uniform float density;",
    "uniform float weight;",
    "uniform int samples;",
    "const int MAX_SAMPLES = 100;",
    "void main()",
    "{",
      "vec2 texCoord = vUv;",
      "vec2 deltaTextCoord = texCoord - lightPosition;",
      "deltaTextCoord *= 1.0 / float(samples) * density;",
      "vec4 color = texture2D(tDiffuse, texCoord);",
      "float illuminationDecay = 1.0;",
      "for(int i=0; i < MAX_SAMPLES; i++)",
      "{",
        "if(i == samples){",
          "break;",
        "}",
        "texCoord -= deltaTextCoord;",
        "vec4 sample = texture2D(tDiffuse, texCoord);",
        "sample *= illuminationDecay * weight;",
        "color += sample;",
        "illuminationDecay *= decay;",
      "}",
      "gl_FragColor = color * exposure;",
    "}"
  ].join("\n")
};

THREE.AdditiveBlendingShader = {
  uniforms: {
    tDiffuse: { value:null },
    tAdd: { value:null }
  },

  vertexShader: [
    "varying vec2 vUv;",
    "void main() {",
      "vUv = uv;",
      "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
    "}"
  ].join("\n"),

  fragmentShader: [
    "uniform sampler2D tDiffuse;",
    "uniform sampler2D tAdd;",
    "varying vec2 vUv;",
    "void main() {",
      "vec4 color = texture2D( tDiffuse, vUv );",
      "vec4 add = texture2D( tAdd, vUv );",
      "gl_FragColor = color + add;",
    "}"
  ].join("\n")
};

THREE.PassThroughShader = {
    uniforms: {
        tDiffuse: { value: null }
    },

    vertexShader: [
        "varying vec2 vUv;",
    "void main() {",
          "vUv = uv;",
            "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"
    ].join( "\n" ),

    fragmentShader: [
    "uniform sampler2D tDiffuse;",
    "varying vec2 vUv;",
    "void main() {",
            "gl_FragColor = texture2D( tDiffuse, vec2( vUv.x, vUv.y ) );",
        "}"
    ].join( "\n" )
};

最佳答案

首先为背景创建一个THREE.Scene，并用背景纹理编辑场景的background属性:

backgroundScene = new THREE.Scene();
backgroundCamera = new THREE.Camera();
backgroundScene.add( backgroundCamera );

var manager = new THREE.LoadingManager();
loader = new THREE.TextureLoader( manager );
loader.setCrossOrigin("");

var backTexture = loader.load(img/background.png,
    function ( texture ) {
        var img = texture.image;
        bgWidth= img.width;
        bgHeight = img.height;
    }
);
backgroundScene.background = backTexture;

确保最终THREE.ShaderPass的THREE.Material(material属性)的transparent属性> 设置为 true:

pass = new THREE.ShaderPass( THREE.AdditiveBlendingShader );
pass.uniforms.tAdd.value = occlusionRenderTarget.texture;
composer.addPass( pass );
pass.renderToScreen = true;
pass.material.transparent = true;

最后，您必须在渲染 THREE.EffectComposer 之前渲染背景场景:

renderer.render(backgroundScene,backgroundCamera);

camera.layers.set(OCCLUSION_LAYER);
occlusionComposer.render();
camera.layers.set(DEFAULT_LAYER);
composer.render();

查看示例:

THREE.VolumetericLightShader = {
  uniforms: {
    tDiffuse: {value:null},
    lightPosition: {value: new THREE.Vector2(0.5, 0.5)},
    exposure: {value: 0.18},
    decay: {value: 0.95},
    density: {value: 0.8},
    weight: {value: 0.62},
    samples: {value: 100}
  },

  vertexShader: [
    "varying vec2 vUv;",
    "void main() {",
      "vUv = uv;",
      "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
    "}"
  ].join("\n"),

  fragmentShader: [
    "varying vec2 vUv;",
    "uniform sampler2D tDiffuse;",
    "uniform vec2 lightPosition;",
    "uniform float exposure;",
    "uniform float decay;",
    "uniform float density;",
    "uniform float weight;",
    "uniform int samples;",
    "const int MAX_SAMPLES = 100;",
    "void main()",
    "{",
      "vec2 texCoord = vUv;",
      "vec2 deltaTextCoord = texCoord - lightPosition;",
      "deltaTextCoord *= 1.0 / float(samples) * density;",
      "vec4 color = texture2D(tDiffuse, texCoord);",
      "float illuminationDecay = 1.0;",
      "for(int i=0; i < MAX_SAMPLES; i++)",
      "{",
        "if(i == samples){",
          "break;",
        "}",
        "texCoord -= deltaTextCoord;",
        "vec4 sample = texture2D(tDiffuse, texCoord);",
        "sample *= illuminationDecay * weight;",
        "color += sample;",
        "illuminationDecay *= decay;",
      "}",
      "gl_FragColor = color * exposure;",
    "}"
  ].join("\n")
};

THREE.AdditiveBlendingShader = {
  uniforms: {
    tDiffuse: { value:null },
    tAdd: { value:null },
  },

  vertexShader: [
    "varying vec2 vUv;",
    "void main() {",
      "vUv = uv;",
      "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
    "}"
  ].join("\n"),

  fragmentShader: [
    "uniform sampler2D tDiffuse;",
    "uniform sampler2D tAdd;",
    "varying vec2 vUv;",
    "void main() {",
      "vec4 color = texture2D( tDiffuse, vUv );",
      "vec4 add = texture2D( tAdd, vUv );",
      "gl_FragColor = color + add;",
    "}"
  ].join("\n")
};

var scene, camera, renderer, composer;
var backgroundScene, backgroundCamera;
var occlusionComposer, occlusionRenderTarget, 
occlusionBox, lightSphere, sphereUniforms;

var OCCLUSION_LAYER, DEFAULT_LAYER;

function init(){

    OCCLUSION_LAYER = 1;
    DEFAULT_LAYER = 0;

    renderer = new THREE.WebGLRenderer({ antialias: false, alpha:true });
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.autoClear = false;
    renderer.setClearColor(0x000000, 0);
    window.onresize = resize;

    scene = new THREE.Scene();

    var sphereGeo = new THREE.SphereGeometry(5,10,10);
    var sphereMat = new THREE.MeshBasicMaterial({color:0xffffff});
    lightSphere = new THREE.Mesh(sphereGeo,sphereMat);
    lightSphere.layers.set(OCCLUSION_LAYER);
    lightSphere.position.z = 0;
    lightSphere.position.y = -150;
    lightSphere.position.x = -150;
    scene.add(lightSphere);

    var boxGeo =  new THREE.BoxGeometry(50,50,50);
    var boxMat = new THREE.MeshBasicMaterial({color:0xffff13});
    var testcube = new THREE.Mesh(boxGeo,boxMat);
    scene.add(testcube);
    testcube.position.z = 0;
    testcube.position.y = -100;
    testcube.position.x = -90;

    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1,7000);
    camera.position.z = 200;
    camera.position.x = -150;
    camera.position.y = -150;
    scene.add(camera);

    var light = new THREE.AmbientLight(0xffffff);
    scene.add(light);

    backgroundScene = new THREE.Scene();
    backgroundCamera = new THREE.Camera();
    backgroundScene.add( backgroundCamera );
    
    var manager = new THREE.LoadingManager();
    loader = new THREE.TextureLoader( manager );
    loader.setCrossOrigin("");

    var backTexture = loader.load("https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/background.jpg",
        function ( texture ) {
            var img = texture.image;
            bgWidth= img.width;
            bgHeight = img.height;
        }
    );
    backgroundScene.background = backTexture;

    document.body.appendChild(renderer.domElement);
}

function preprocess(){

    occlusionRenderTarget = new THREE.WebGLRenderTarget( window.innerWidth * 0.5 , window.innerHeight * 0.5 );
    occlusionComposer = new THREE.EffectComposer( renderer, occlusionRenderTarget);
    occlusionComposer.addPass( new THREE.RenderPass( scene, camera ) );
    var pass = new THREE.ShaderPass( THREE.VolumetericLightShader );
    pass.needsSwap = false;
    occlusionComposer.addPass( pass );

    composer = new THREE.EffectComposer( renderer );
    composer.addPass( new THREE.RenderPass( scene, camera ) );
    pass = new THREE.ShaderPass( THREE.AdditiveBlendingShader );
    pass.uniforms.tAdd.value = occlusionRenderTarget.texture;
    composer.addPass( pass );
    pass.renderToScreen = true;
    pass.material.transparent = true;
}

function render(){
    renderer.clear();
    renderer.render(backgroundScene,backgroundCamera);
    
    camera.layers.set(OCCLUSION_LAYER);
    occlusionComposer.render();
    camera.layers.set(DEFAULT_LAYER);
    composer.render();
}

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

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

init();
preprocess();
animate();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://abberg.github.io/lib/shaders/CopyShader.js"></script>
<script src="https://abberg.github.io/lib/postprocessing/EffectComposer.js"></script>
<script src="https://abberg.github.io/lib/postprocessing/RenderPass.js"></script>
<script src="https://abberg.github.io/lib/postprocessing/ShaderPass.js"></script>

关于javascript - 使用带有静态背景图像的 threejs 的后处理效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48635441/

文章推荐： c# - 在 C# 中将父类强制转换为子类

文章推荐： c# - 使用 Autofac 为同一类中的内部方法编写 Moq 单元测试

文章推荐： javascript - 布局组件(抽屉、工具栏等)不作为组件工作

c++ - 静态 __forceinline 或 __forceinline 静态
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 5 年前。 Improve
C# 静态 "this"
在 C# 静态方法中是否有一种方法可以引用定义该方法的类型？在实例方法中，您可以通过以下方式确定类型: public void Foo() { Type type = this.GetTyp
WPF:静态、动态资源以及资源词典
WPF:静态、动态资源以及资源词典静态资源与动态资源我们常常会使用样式或者控件模板放在Window.Resources中，比如这样：静态资源与动态资源使用如下： <Window
.net - 静态/共享功能中的LoadControl
任何人都知道如何在共享/静态函数中动态加载控件？该函数本身位于 mustinherit/abstract 类中。 (这是 VB 中的 ASP.NET 项目)我想做这样的事情: VB: Publ
refactoring - 静态/强类型和重构
在我看来，静态/强类型编程语言最宝贵的一点是它有助于重构:如果/当您更改任何 API，那么编译器会告诉您该更改破坏了什么。我可以想象用运行时/弱类型语言编写代码......但我无法想象没有编译器的帮
java - 无参数方法/静态
正如我的名字所暗示的，我是一名 .NET 开发人员，但我对 Java 的兴趣越来越大，并且我有兴趣学习更多其他语言，因为这有助于我学习更多关于编程的知识。无论如何，我的问题是:不带参数/不使用状态的
静态 Json 文件的响应模板
我在java中使用WireMock来 stub POST请求。该请求返回一个存储在我本地的 json 正文文件。 stub 看起来像这样: wireMockServer.stubFor(get(url
Python 类构造函数(静态)
Python 是否有类构造函数的机制，即每当首次引用类时(而不是创建该对象的实例时)调用的函数？我知道其他一些语言中也存在这种情况，但我还没有在 Python 中遇到过。基本上，我想初始化该函数中的
Python 类构造函数(静态)
Python 是否有类构造函数的机制，即每当首次引用类时(而不是创建该对象的实例时)调用的函数？我知道其他一些语言中也存在这种情况，但我还没有在 Python 中遇到过。基本上，我想初始化该函数中的
java - 静态/编译时多态性
这个问题已经有答案了: What is the difference between dynamic and static polymorphism in Java? (14 个回答) 已关闭 4 年
Java 静态 - 方法或字段？
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Static initializer in Java 我想知道这个静态的东西(抱歉，这是我第一次遇到这个)对一个类有
c++ - 静态/动态链接的静态初始化顺序问题
如果c++应用程序是按以下方式组织的 //file1.cpp static Y sgObj = X::getInitObject(0); //declared in file scope //fil
java - 静态/抽象冲突
我有一个抽象类(AvergedDataRecord)，我需要进一步抽象(DataRecord)，这样我就可以将它扩展到原始类和一个新的具体类(SummedDataRecord)，并且我在获取某些方法时
c# - 静态 IEnumerable？
我正在尝试制作一个字符串枚举。这是我到目前为止所得到的， private class TypedEnum : IEnumerable { public IEnumerator GetEnume
c - 静态/动态源代码分析
我选修了一门名为“安全代码”的类(class)，在下一个作业中，我们应该对一些 C 文件和 JavaEE Web 项目进行静态/动态分析。我检查了“源监视器”并在 C 文件上运行它，但是(除非我不知
java - 类之间的共享首选项(静态)？
我有两个类，一个是登录类，一个是用户类。在 loggedIn 类中，我想显示我在用户登录时所做的共享首选项。 loginPrefs = getSharedPreferences("loginprefe
android - 静态 fragment
我在同一个 Activity 中有两个静态 fragment ，在“fragmentA”中我有一个自定义列表，当一个项目被点击时必须在“fragmentB”中出现一个细节，细节只在我改变屏幕方向时出现
Java 静态/实例方法优化
在 Java 中是未修改方法变量，缺少final，每次都重新初始化限定符静态方法实例方法如果 1. 或 2.(或两者)的答案是 final 限定符允许 Java 执行优化并存储方法变量只有一次？
java - 静态-非静态交互
我有两个类相互交互。第一个是中心的，如下: public class Datenbank { double winkelPanel = 0; double groessePanel = 0; doub
静态 mysql 加密
我有一个 mysql 数据库，它连接基于 Web 的 php 应用程序和 FoxPro 应用程序(是的，foxpro)。在之前的“开发人员”被解雇后开始处理这个问题。无论如何，我熟悉 AES_Enc

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用带有静态背景图像的 threejs 的后处理效果