Home

Index

How to use the WebGLRenderTarget function from three

Find comprehensive JavaScript three.WebGLRenderTarget code examples handpicked from public code repositorys.

three.WebGLRenderTarget is a class in the Three.js library that represents a render target for rendering three-dimensional scenes using WebGL.

SSAAChunkedRender.js

66
67
68
69
70
71
72
73
74
75
    transparent: true,
    blending: THREE.AdditiveBlending,
    depthTest: false,
    depthWrite: false,
});
const sampleRenderTarget = new THREE.WebGLRenderTarget(rt.width, rt.height, {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
    stencilBuffer: true,

119

813

Volume.js

GitHub: K3D-tools/K3D-jupyter

118
119
120
121
122
123
124
125
126
127
    THREE.NearestFilter,
);
colormap.needsUpdate = true;

if (config.shadow !== 'off') {
    textureRTT = new THREE.WebGLRenderTarget(lightMapRenderTargetSize, lightMapRenderTargetSize, {
        minFilter: THREE.LinearFilter,
        magFilter: THREE.LinearFilter,
        format: THREE.RedFormat,
        type: THREE.UnsignedByteType,

115

803

How does three.WebGLRenderTarget work?

three.WebGLRenderTarget is a class in the Three.js library that represents a rendering target, which is a texture where a scene is rendered offscreen, enabling post-processing and other rendering effects before displaying the final result on the screen. It is used to set up a WebGL rendering context with a custom resolution, format, and depth buffer, to which a scene can be rendered and then applied as a texture to a mesh or any other object in the scene. The render target can also be used to create a chain of rendering effects such as shadows, reflections, refractions, and bloom by applying multiple passes on the same texture.

index.js

GitHub: JackGit/xplan

119
120
121
122
123
124
125
126
127
128
_createOutGlow () {
  this.blurScene = new THREE.Scene()
  this.glowGroup = Glow.createOuterGlow()
  this.blurScene.add(this.glowGroup)

  let blurRenderTarget = new THREE.WebGLRenderTarget(this.width, this.height, {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
    stencilBuffer: true

280

simulator.js

GitHub: edankwan/hyper-mix

91
92
93
94
95
96
97
98
99
100
});

_mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), _copyShader );
_scene.add( _mesh );

_positionRenderTarget = new THREE.WebGLRenderTarget(TEXTURE_WIDTH, TEXTURE_HEIGHT, {
    wrapS: THREE.ClampToEdgeWrapping,
    wrapT: THREE.ClampToEdgeWrapping,
    minFilter: THREE.NearestFilter,
    magFilter: THREE.NearestFilter,

217

+ 13 other calls in file

Ai Example

1
const renderTarget = new THREE.WebGLRenderTarget(width, height, options);

Here, width and height are the width and height of the render target, respectively. options is an optional object that can contain the following properties: wrapS: The texture wrapping mode for the horizontal direction. Defaults to THREE.ClampToEdgeWrapping. wrapT: The texture wrapping mode for the vertical direction. Defaults to THREE.ClampToEdgeWrapping. minFilter: The texture minification filter. Defaults to THREE.LinearFilter. magFilter: The texture magnification filter. Defaults to THREE.LinearFilter. format: The texture format. Defaults to THREE.RGBAFormat. type: The texture data type. Defaults to THREE.UnsignedByteType. depthBuffer: Whether to create a depth buffer. Defaults to true. stencilBuffer: Whether to create a stencil buffer. Defaults to true. generateMipmaps: Whether to generate mipmaps. Defaults to false. anisotropy: The level of anisotropy to use for texture filtering. Defaults to 1. encoding: The texture encoding. Defaults to THREE.LinearEncoding. depthTexture: Whether to create a depth texture. Defaults to false. javascript Copy code

GPUPickerHelper.js

GitHub: TilCreator/storyboarder

1
2
3
4
5
6
7
8
9
10
const {unpackRGBAToScenePosition} = require("./utils/UnpackRGB");
class GPUPickerHelper
{
    constructor()
    {
        this.pickingTexture = new THREE.WebGLRenderTarget(1, 1, {minFilter: THREE.LinearFilter});
        this.renderTarget = new THREE.WebGLRenderTarget(0, 0, {minFilter: THREE.LinearFilter});
        this.pixelBuffer = new Uint8Array(4);
        this.pickedObject = null;
        this.selectableObjects = {};

268

+ 3 other calls in file

postprocessing.js

GitHub: edankwan/hyper-mix

92
93
94
95
96
97
98
99
100
101
        fragmentShader: rawShaderPrefix + shaderParse(glslify('../glsl/depth1.frag'))
    });
}

function _createRenderTarget(isRGBA, isFloat) {
    return new THREE.WebGLRenderTarget(1, 1, {
        minFilter: THREE.NearestFilter,
        magFilter: THREE.NearestFilter,
        format: isRGBA ? THREE.RGBAFormat : THREE.RGBFormat,
        type: isFloat ? THREE.FloatType : THREE.UnsignedByteType

216

glare.js

GitHub: jetrii/procedural-rubik-city

61
62
63
64
65
66
67
68
69
70
var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };

var renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );
var renderTargetX2 = new THREE.WebGLRenderTarget( width / 2, height / 2, parameters );
var renderTargetX4 = new THREE.WebGLRenderTarget( width / 4, height / 4, parameters );
var renderTargetX8 = new THREE.WebGLRenderTarget( width / 8, height / 8, parameters );
var renderTargetX16 = new THREE.WebGLRenderTarget( width / 16, height / 16, parameters );

var composers = [];
var blurIterations = 4;

+ 71 other calls in file

main.js

GitHub: kentywang/Agamari

129
130
131
132
133
134
135
136
137
// document.body.appendChild( stats.dom );

// effect composer for post-processing (renderer goes thru this)
var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };

var renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, parameters );

composer = new THREE.EffectComposer( renderer, renderTarget );
composer.addPass( new THREE.RenderPass( scene, camera ) );

+ 15 other calls in file

fbo.js

GitHub: edankwan/touch-leap-motion

104
105
106
107
108
109
110
111
112
113
});

_fboMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), _copyShader );
_fboScene.add( _fboMesh );

_velocityRenderTarget = new THREE.WebGLRenderTarget( settings.simulatorTextureWidth, settings.simulatorTextureHeight, {
    wrapS: THREE.RepeatWrapping,
    wrapT: THREE.RepeatWrapping,
    minFilter: THREE.NearestFilter,
    magFilter: THREE.NearestFilter,

+ 3 other calls in file

Simulation.js

GitHub: shrekshao/ParticleProjector

173
174
175
176
177
178
179
180
181
182


function _createTarget(width, height) {
    // var size = _renderer.getSize();

    var target = new THREE.WebGLRenderTarget(width, height, {
        minFilter: THREE.NearestFilter,
        magFilter: THREE.NearestFilter,
        format: THREE.RGBFormat,
        type: THREE.FloatType,

+ 9 other calls in file

OutlinePass.js

GitHub: scqilin/three-OutlinePass

77
78
79
80
81
82
83
84
85
        var size = renderer.getSize(new THREE.Vector2());
        this._pixelRatio = renderer.getPixelRatio();
        this._width = size.width;
        this._height = size.height;

        renderTarget = new THREE.WebGLRenderTarget(this._width * this._pixelRatio, this._height * this._pixelRatio, parameters);
        renderTarget.texture.name = 'EffectComposer.rt1';

} else {

EffectComposer.js

GitHub: shianqi/3d-wind

13
14
15
16
17
18
19
20
21
22
    format: THREE.RGBAFormat,
    stencilBuffer: false,
  }

  var size = renderer.getDrawingBufferSize()
  renderTarget = new THREE.WebGLRenderTarget(size.width, size.height, parameters)
  renderTarget.texture.name = 'EffectComposer.rt1'
}

this.renderTarget1 = renderTarget

+ 3 other calls in file

cardboard-distorter.js

GitHub: arturitu/webvr-template

100
101
102
103
104
105
106
107
108
109
    format: THREE.RGBFormat,
    stencilBuffer: false,
    depthBuffer: false
  };

  return new THREE.WebGLRenderTarget(width, height, parameters);
}

// TODO: Refactor into prototype-style classes.
function CardboardDistorter(renderer) {

+ 9 other calls in file

effectComposer.js

GitHub: kchapelier/procjam2015

17
18
19
20
21
22
23
24
25
26

    var width  = Math.floor( renderer.context.canvas.width  / pixelRatio ) || 1;
    var height = Math.floor( renderer.context.canvas.height / pixelRatio ) || 1;
    var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };

    renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );

}

this.renderTarget1 = renderTarget;

init.js

GitHub: ykob/sketch-threejs

14
15
16
17
18
19
20
21
22
23
const canvas = document.getElementById('canvas-webgl');
const renderer = new THREE.WebGL1Renderer({
  antialias: false,
  canvas: canvas,
});
const renderBack = new THREE.WebGLRenderTarget(document.body.clientWidth, window.innerHeight);
const scene = new THREE.Scene();
const sceneBack = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
const cameraBack = new THREE.PerspectiveCamera(45, document.body.clientWidth / window.innerHeight, 1, 10000);

259

index.js

GitHub: nfbinteractive/Bear71VR_OpenSource

31
32
33
34
35
36
37
38
39
40
var ripplePointCloud = new RipplePointCloud(params);
scene.add(ripplePointCloud);

var camera = new THREE.OrthographicCamera(0, 128, 128, 0, 32, -32);
scene.add(camera);
THREE.WebGLRenderTarget.call(this, params.size, params.size, params.imageOptions);
this.texture.generateMipmaps = false;


this.ripplePointCloud = ripplePointCloud;

+ 3 other calls in file

Webgl.js

GitHub: JordanMachado/fluctus

85
86
87
88
89
90
91
92
93
94
this.cameraRt = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
this.rendererRt = new THREE.WebGLRenderer();
this.rendererRt.setSize(width, height);
this.rendererRt.setClearColor(0x383838);

    this.rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );

this.quadNoise = new QuadNoise();
// this.quadNoise.addGUI(this.folder);
this.sceneRt.add( this.quadNoise );

render.js

GitHub: hobuinc/usgs-lidar

507
508
509
510
511
512
513
514
515
516
		uniforms: this.uniforms
	});
}

XYZRenderer.prototype.resize = function(width, height) {
	this.off = new THREE.WebGLRenderTarget(width/this.downBy, height/this.downBy, { 
		stencilBuffer: false,
		magFilter: THREE.NearestFilter,
		minFilter: THREE.NearestFilter
	});

110

+ 2 other calls in file

spotlightview_new.js

GitHub: audunsh/evince

728
729
730
731
732
733
734
735
736
737
	saoBlurRadius: 8,
	saoBlurStdDev: 4,
	saoBlurDepthCutoff: 0.01
};
this.resolution = new THREE.Vector2( resolution.x, resolution.y );
this.saoRenderTarget = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y );
this.blurIntermediateRenderTarget = this.saoRenderTarget.clone();
this.beautyRenderTarget = this.saoRenderTarget.clone();
this.normalRenderTarget = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y, {
	minFilter: THREE.NearestFilter,

+ 71 other calls in file

renderer.js

GitHub: zya/apophenia

50
51
52
53
54
55
56
57
58
59
//   magFilter: THREE.LinearFilter,
//   format: THREE.RGBAFormat,
//   stencilBuffer: false
// };

// var renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, parameters);

var composer = new THREE.EffectComposer(renderer);
composer.renderTarget1.texture.format = THREE.RGBAFormat;
composer.renderTarget2.texture.format = THREE.RGBAFormat;

+ 9 other calls in file

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About