123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>three.js webgl - Multiple Render Targets</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <link type="text/css" rel="stylesheet" href="main.css">
- <!-- Write to G-Buffer -->
- <script id="gbuffer-vert" type="x-shader/x-vertex">
- in vec3 position;
- in vec3 normal;
- in vec2 uv;
- out vec3 vNormal;
- out vec2 vUv;
- uniform mat4 modelViewMatrix;
- uniform mat4 projectionMatrix;
- uniform mat3 normalMatrix;
- void main() {
- vUv = uv;
- // get smooth normals
- vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
- vec3 transformedNormal = normalMatrix * normal;
- vNormal = normalize( transformedNormal );
- gl_Position = projectionMatrix * mvPosition;
- }
- </script>
- <script id="gbuffer-frag" type="x-shader/x-fragment">
- precision highp float;
- precision highp int;
- layout(location = 0) out vec4 gColor;
- layout(location = 1) out vec4 gNormal;
- uniform sampler2D tDiffuse;
- uniform vec2 repeat;
- in vec3 vNormal;
- in vec2 vUv;
- void main() {
- // write color to G-Buffer
- gColor = texture( tDiffuse, vUv * repeat );
- // write normals to G-Buffer
- gNormal = vec4( normalize( vNormal ), 0.0 );
- }
- </script>
- <!-- Read G-Buffer and render to screen -->
- <script id="render-vert" type="x-shader/x-vertex">
- in vec3 position;
- in vec2 uv;
- out vec2 vUv;
- uniform mat4 modelViewMatrix;
- uniform mat4 projectionMatrix;
- void main() {
- vUv = uv;
- gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
- }
- </script>
- <script id="render-frag" type="x-shader/x-fragment">
- precision highp float;
- precision highp int;
- vec4 LinearTosRGB( in vec4 value ) {
- return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );
- }
- layout(location = 0) out vec4 pc_FragColor;
- in vec2 vUv;
- uniform sampler2D tDiffuse;
- uniform sampler2D tNormal;
- void main() {
- vec4 diffuse = texture( tDiffuse, vUv );
- vec4 normal = texture( tNormal, vUv );
- pc_FragColor = mix( diffuse, normal, step( 0.5, vUv.x ) );
- pc_FragColor.a = 1.0;
- pc_FragColor = LinearTosRGB( pc_FragColor );
- }
- </script>
- </head>
- <body>
- <div id="info">
- <a href="https://threejs.org" target="_blank">threejs</a> webgl - Multiple RenderTargets
- </div>
- <script type="importmap">
- {
- "imports": {
- "three": "../build/three.module.js",
- "three/addons/": "./jsm/"
- }
- }
- </script>
- <script type="module">
- import * as THREE from 'three';
- import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
- import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
- let camera, scene, renderer, controls;
- let renderTarget;
- let postScene, postCamera;
- const parameters = {
- samples: 4,
- wireframe: false
- };
- const gui = new GUI();
- gui.add( parameters, 'samples', 0, 4 ).step( 1 );
- gui.add( parameters, 'wireframe' );
- gui.onChange( render );
- init();
- function init() {
- renderer = new THREE.WebGLRenderer();
- renderer.setPixelRatio( window.devicePixelRatio );
- renderer.setSize( window.innerWidth, window.innerHeight );
- document.body.appendChild( renderer.domElement );
- // Create a multi render target with Float buffers
- renderTarget = new THREE.WebGLRenderTarget(
- window.innerWidth * window.devicePixelRatio,
- window.innerHeight * window.devicePixelRatio,
- {
- count: 2,
- minFilter: THREE.NearestFilter,
- magFilter: THREE.NearestFilter
- }
- );
- // Name our G-Buffer attachments for debugging
- renderTarget.textures[ 0 ].name = 'diffuse';
- renderTarget.textures[ 1 ].name = 'normal';
- // Scene setup
- scene = new THREE.Scene();
- scene.background = new THREE.Color( 0x222222 );
- camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 50 );
- camera.position.z = 4;
- const loader = new THREE.TextureLoader();
- const diffuse = loader.load( 'textures/hardwood2_diffuse.jpg', render );
- diffuse.wrapS = THREE.RepeatWrapping;
- diffuse.wrapT = THREE.RepeatWrapping;
- diffuse.colorSpace = THREE.SRGBColorSpace;
- scene.add( new THREE.Mesh(
- new THREE.TorusKnotGeometry( 1, 0.3, 128, 32 ),
- new THREE.RawShaderMaterial( {
- name: 'G-Buffer Shader',
- vertexShader: document.querySelector( '#gbuffer-vert' ).textContent.trim(),
- fragmentShader: document.querySelector( '#gbuffer-frag' ).textContent.trim(),
- uniforms: {
- tDiffuse: { value: diffuse },
- repeat: { value: new THREE.Vector2( 5, 0.5 ) }
- },
- glslVersion: THREE.GLSL3
- } )
- ) );
- // PostProcessing setup
- postScene = new THREE.Scene();
- postCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
- postScene.add( new THREE.Mesh(
- new THREE.PlaneGeometry( 2, 2 ),
- new THREE.RawShaderMaterial( {
- name: 'Post-FX Shader',
- vertexShader: document.querySelector( '#render-vert' ).textContent.trim(),
- fragmentShader: document.querySelector( '#render-frag' ).textContent.trim(),
- uniforms: {
- tDiffuse: { value: renderTarget.textures[ 0 ] },
- tNormal: { value: renderTarget.textures[ 1 ] },
- },
- glslVersion: THREE.GLSL3
- } )
- ) );
- // Controls
- controls = new OrbitControls( camera, renderer.domElement );
- controls.addEventListener( 'change', render );
- window.addEventListener( 'resize', onWindowResize );
- }
- function onWindowResize() {
- camera.aspect = window.innerWidth / window.innerHeight;
- camera.updateProjectionMatrix();
- renderer.setSize( window.innerWidth, window.innerHeight );
- const dpr = renderer.getPixelRatio();
- renderTarget.setSize( window.innerWidth * dpr, window.innerHeight * dpr );
- render();
- }
- function render() {
- renderTarget.samples = parameters.samples;
- scene.traverse( function ( child ) {
- if ( child.material !== undefined ) {
- child.material.wireframe = parameters.wireframe;
- }
- } );
- // render scene into target
- renderer.setRenderTarget( renderTarget );
- renderer.render( scene, camera );
- // render post FX
- renderer.setRenderTarget( null );
- renderer.render( postScene, postCamera );
- }
- </script>
- </body>
- </html>
|