Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 3ef857bb 编写于 作者: M Mugen87
浏览文件
操作

WebGL2: Added Support for Multisampled Renderbuffers.

上级 238efc5c
隐藏空白更改
内联 并排
Showing with 444 addition and 10 deletion
docs/api/en/renderers/WebGLMultisampleRenderTarget.html 0 → 100644
浏览文件 @ 3ef857bb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
A special render target that can be used to utilize multi-sampled renderbuffers.
</p>
<h2>Constructor</h2>
<h3>[name]([param:Number width], [param:Number height], [param:Object options])</h3>
<p>
[page:Float width] - The width of the render target. <br />
[page:Float height] - The height of the render target.<br />
[page:Object options] - (optional) object that holds texture parameters for an auto-generated target
texture and depthBuffer/stencilBuffer booleans.
</p>
<h2>Properties</h2>
<h3>[property:number samples]</h3>
<p>
Specifies the number of samples to be used for the renderbuffer storage. However, the maximum supported
size for multisampling is platform dependent and defined via *gl.MAX_SAMPLES*.
</p>
<p>[page:WebGLRenderTarget WebGLRenderTarget] properties are available on this class.</p>
<h2>Methods</h2>
<p>[page:WebGLRenderTarget WebGLRenderTarget] methods are available on this class.</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/zh/renderers/WebGLMultisampleRenderTarget.html 0 → 100644
浏览文件 @ 3ef857bb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
TODO
</p>
<h2>Constructor</h2>
<h3>[name]([param:Number width], [param:Number height], [param:Object options])</h3>
<p>
[page:Float width] - TODO <br />
[page:Float height] - TODO<br />
[page:Object options] - TODO
</p>
<h2>Properties</h2>
<h3>[property:Number samples]</h3>
<p>
TODO
</p>
<p>[page:WebGLRenderTarget WebGLRenderTarget] TODO</p>
<h2>Methods</h2>
<p>[page:WebGLRenderTarget WebGLRenderTarget] TODO</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/list.js
浏览文件 @ 3ef857bb
......@@ -309,6 +309,7 @@ var list = {
},
"Renderers": {
"WebGLMultisampleRenderTarget": "api/en/renderers/WebGLMultisampleRenderTarget",
"WebGLRenderer": "api/en/renderers/WebGLRenderer",
"WebGLRenderTarget": "api/en/renderers/WebGLRenderTarget",
"WebGLRenderTargetCube": "api/en/renderers/WebGLRenderTargetCube"
......@@ -733,6 +734,7 @@ var list = {
},
"渲染器": {
"WebGLMultisampleRenderTarget": "api/zh/renderers/WebGLMultisampleRenderTarget",
"WebGLRenderer": "api/zh/renderers/WebGLRenderer",
"WebGLRenderTarget": "api/zh/renderers/WebGLRenderTarget",
"WebGLRenderTargetCube": "api/zh/renderers/WebGLRenderTargetCube"
......
examples/files.js
浏览文件 @ 3ef857bb
......@@ -316,6 +316,7 @@ var files = {
"webgl2": [
"webgl2_materials_texture3d",
"webgl2_materials_texture3d_volume",
"webgl2_multisampled_renderbuffers",
"webgl2_sandbox"
],
"webaudio": [
......
examples/webgl2_multisampled_renderbuffers.html 0 → 100644
浏览文件 @ 3ef857bb
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js WebGL 2 - Multisampled Renderbuffers</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html, body {
height: 100%;
}
body {
background: #ffffff;
padding: 0;
margin: 0;
font-family: Monospace;
font-size: 13px;
overflow: hidden;
}
#info {
top: 0px;
width: 100%;
color: #000000;
margin: 6px 0px;
text-align: center;
}
#info a {
color: #000000;
}
#container {
width: 100%;
height: calc(100% - 80px);
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Multisampled Renderbuffers<br />
Left scene is multi-sampled, right scene is rendered without anti-aliasing.
</div>
<div id="container">
</div>
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script>
if ( WEBGL.isWebGL2Available() === false ) {
document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
}
var camera, scene, renderer, clock, group;
var composer1, composer2;
init();
animate();
function init() {
var container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 45, ( window.innerWidth * 0.5 ) / window.innerHeight, 1, 2000 );
camera.position.z = 500;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene.fog = new THREE.Fog( 0xcccccc, 100, 1500 );
clock = new THREE.Clock();
//
var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 1000, 0 );
scene.add( hemiLight );
var dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
dirLight.position.set( - 3000, 1000, - 1000 );
scene.add( dirLight );
//
group = new THREE.Group();
var geometry = new THREE.IcosahedronBufferGeometry( 10, 2 );
var material = new THREE.MeshStandardMaterial( { color: 0xee0808, flatShading: true } );
for ( var i = 0; i < 100; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = Math.random() * 500 - 250;
mesh.position.y = Math.random() * 500 - 250;
mesh.position.z = Math.random() * 500 - 250;
mesh.scale.setScalar( Math.random() * 2 + 1 );
group.add( mesh );
}
scene.add( group );
//
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
renderer.autoClear = false;
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
var parameters = {
format: THREE.RGBFormat,
stencilBuffer: false
};
var size = renderer.getDrawingBufferSize();
var renderTarget = new THREE.WebGLMultisampleRenderTarget( size.width, size.height, parameters );
var renderPass = new THREE.RenderPass( scene, camera );
var copyPass = new THREE.ShaderPass( THREE.CopyShader );
copyPass.renderToScreen = true;
//
composer1 = new THREE.EffectComposer( renderer, renderTarget );
composer1.addPass( renderPass );
composer1.addPass( copyPass );
//
composer2 = new THREE.EffectComposer( renderer );
composer2.addPass( renderPass );
composer2.addPass( copyPass );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = ( window.innerWidth * 0.5 ) / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
composer1.setSize( window.innerWidth, window.innerHeight );
composer2.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
var halfWidth = window.innerWidth / 2;
group.rotation.y += clock.getDelta() * 0.1;
renderer.setViewport( 0, 0, halfWidth, window.innerHeight );
composer1.render();
renderer.setViewport( halfWidth, 0, halfWidth, window.innerHeight );
composer2.render();
}
</script>
</body>
</html>
rollup.config.js
浏览文件 @ 3ef857bb
......@@ -129,7 +129,10 @@ function glconstants() {
MAX_VARYING_VECTORS: 36348,
MAX_FRAGMENT_UNIFORM_VECTORS: 36349,
UNPACK_FLIP_Y_WEBGL: 37440,
UNPACK_PREMULTIPLY_ALPHA_WEBGL: 37441
UNPACK_PREMULTIPLY_ALPHA_WEBGL: 37441,
MAX_SAMPLES: 36183,
READ_FRAMEBUFFER: 36008,
DRAW_FRAMEBUFFER: 36009
};
return {
......@@ -147,10 +150,11 @@ function glconstants() {
return {
code: code,
map: { mappings: '' }
}
};
}
}
};
}
......
src/Three.js
浏览文件 @ 3ef857bb
import './polyfills.js';
export { WebGLMultisampleRenderTarget } from './renderers/WebGLMultisampleRenderTarget.js';
export { WebGLRenderTargetCube } from './renderers/WebGLRenderTargetCube.js';
export { WebGLRenderTarget } from './renderers/WebGLRenderTarget.js';
export { WebGLRenderer } from './renderers/WebGLRenderer.js';
......
src/renderers/WebGLMultisampleRenderTarget.js 0 → 100644
浏览文件 @ 3ef857bb
import { WebGLRenderTarget } from './WebGLRenderTarget.js';
/**
* @author Mugen87 / https://github.com/Mugen87
* @author Matt DesLauriers / @mattdesl
*/
function WebGLMultisampleRenderTarget( width, height, options ) {
WebGLRenderTarget.call( this, width, height, options );
this.samples = 4;
}
WebGLMultisampleRenderTarget.prototype = Object.assign( Object.create( WebGLRenderTarget.prototype ), {
constructor: WebGLMultisampleRenderTarget,
isWebGLMultisampleRenderTarget: true,
copy: function ( source ) {
WebGLRenderTarget.prototype.copy.call( this, source );
this.samples = source.samples;
return this;
}
} );
export { WebGLMultisampleRenderTarget };
src/renderers/WebGLRenderer.js
浏览文件 @ 3ef857bb
......@@ -1133,12 +1133,18 @@ function WebGLRenderer( parameters ) {
}
// Generate mipmap if we're using any kind of mipmap filtering
//
if ( renderTarget ) {
// Generate mipmap if we're using any kind of mipmap filtering
textures.updateRenderTargetMipmap( renderTarget );
// resolve multisample renderbuffers to to single-sample texture if necessary
textures.updateMultisampleRenderTarget( renderTarget );
}
// Ensure depth buffer writing is enabled so it can be cleared on next render
......@@ -2494,6 +2500,10 @@ function WebGLRenderer( parameters ) {
framebuffer = __webglFramebuffer[ renderTarget.activeCubeFace ];
isCube = true;
} else if ( renderTarget.isWebGLMultisampleRenderTarget ) {
framebuffer = properties.get( renderTarget ).__webglMultisampledFramebuffer;
} else {
framebuffer = __webglFramebuffer;
......
src/renderers/webgl/WebGLCapabilities.js
浏览文件 @ 3ef857bb
......@@ -84,6 +84,8 @@ function WebGLCapabilities( gl, extensions, parameters ) {
var floatFragmentTextures = isWebGL2 || !! extensions.get( 'OES_texture_float' );
var floatVertexTextures = vertexTextures && floatFragmentTextures;
var maxSamples = isWebGL2 ? gl.getParameter( gl.MAX_SAMPLES ) : 0;
return {
isWebGL2: isWebGL2,
......@@ -106,7 +108,9 @@ function WebGLCapabilities( gl, extensions, parameters ) {
vertexTextures: vertexTextures,
floatFragmentTextures: floatFragmentTextures,
floatVertexTextures: floatVertexTextures
floatVertexTextures: floatVertexTextures,
maxSamples: maxSamples
};
......
src/renderers/webgl/WebGLTextures.js
浏览文件 @ 3ef857bb
......@@ -723,24 +723,60 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
}
// Setup storage for internal depth/stencil buffers and bind to correct framebuffer
function setupRenderBufferStorage( renderbuffer, renderTarget ) {
function setupRenderBufferStorage( renderbuffer, renderTarget, isMultisample ) {
_gl.bindRenderbuffer( _gl.RENDERBUFFER, renderbuffer );
if ( renderTarget.depthBuffer && ! renderTarget.stencilBuffer ) {
_gl.renderbufferStorage( _gl.RENDERBUFFER, _gl.DEPTH_COMPONENT16, renderTarget.width, renderTarget.height );
if ( isMultisample ) {
var samples = getRenderTargetSamples( renderTarget );
_gl.renderbufferStorageMultisample( _gl.RENDERBUFFER, samples, _gl.DEPTH_COMPONENT16, renderTarget.width, renderTarget.height );
} else {
_gl.renderbufferStorage( _gl.RENDERBUFFER, _gl.DEPTH_COMPONENT16, renderTarget.width, renderTarget.height );
}
_gl.framebufferRenderbuffer( _gl.FRAMEBUFFER, _gl.DEPTH_ATTACHMENT, _gl.RENDERBUFFER, renderbuffer );
} else if ( renderTarget.depthBuffer && renderTarget.stencilBuffer ) {
_gl.renderbufferStorage( _gl.RENDERBUFFER, _gl.DEPTH_STENCIL, renderTarget.width, renderTarget.height );
if ( isMultisample ) {
var samples = getRenderTargetSamples( renderTarget );
_gl.renderbufferStorageMultisample( _gl.RENDERBUFFER, samples, _gl.DEPTH_STENCIL, renderTarget.width, renderTarget.height );
} else {
_gl.renderbufferStorage( _gl.RENDERBUFFER, _gl.DEPTH_STENCIL, renderTarget.width, renderTarget.height );
}
_gl.framebufferRenderbuffer( _gl.FRAMEBUFFER, _gl.DEPTH_STENCIL_ATTACHMENT, _gl.RENDERBUFFER, renderbuffer );
} else {
// FIXME: We don't support !depth !stencil
_gl.renderbufferStorage( _gl.RENDERBUFFER, _gl.RGBA4, renderTarget.width, renderTarget.height );
var glFormat = utils.convert( renderTarget.texture.format );
var glType = utils.convert( renderTarget.texture.type );
var glInternalFormat = getInternalFormat( glFormat, glType );
if ( isMultisample ) {
var samples = getRenderTargetSamples( renderTarget );
_gl.renderbufferStorageMultisample( _gl.RENDERBUFFER, samples, glInternalFormat, renderTarget.width, renderTarget.height );
} else {
_gl.renderbufferStorage( _gl.RENDERBUFFER, glInternalFormat, renderTarget.width, renderTarget.height );
}
}
......@@ -847,6 +883,7 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
info.memory.textures ++;
var isCube = ( renderTarget.isWebGLRenderTargetCube === true );
var isMultisample = ( renderTarget.isWebGLMultisampleRenderTarget === true );
var isTargetPowerOfTwo = isPowerOfTwo( renderTarget );
// Setup framebuffer
......@@ -865,6 +902,33 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
renderTargetProperties.__webglFramebuffer = _gl.createFramebuffer();
if ( isMultisample ) {
renderTargetProperties.__webglMultisampledFramebuffer = _gl.createFramebuffer();
renderTargetProperties.__webglColorRenderbuffer = _gl.createRenderbuffer();
_gl.bindRenderbuffer( _gl.RENDERBUFFER, renderTargetProperties.__webglColorRenderbuffer );
var glFormat = utils.convert( renderTarget.texture.format );
var glType = utils.convert( renderTarget.texture.type );
var glInternalFormat = getInternalFormat( glFormat, glType );
var samples = getRenderTargetSamples( renderTarget );
_gl.renderbufferStorageMultisample( _gl.RENDERBUFFER, samples, glInternalFormat, renderTarget.width, renderTarget.height );
_gl.bindFramebuffer( _gl.FRAMEBUFFER, renderTargetProperties.__webglMultisampledFramebuffer );
_gl.framebufferRenderbuffer( _gl.FRAMEBUFFER, _gl.COLOR_ATTACHMENT0, _gl.RENDERBUFFER, renderTargetProperties.__webglColorRenderbuffer );
_gl.bindRenderbuffer( _gl.RENDERBUFFER, null );
if ( renderTarget.depthBuffer ) {
renderTargetProperties.__webglDepthRenderbuffer = _gl.createRenderbuffer();
setupRenderBufferStorage( renderTargetProperties.__webglDepthRenderbuffer, renderTarget, true );
}
_gl.bindFramebuffer( _gl.FRAMEBUFFER, null );
}
}
// Setup color buffer
......@@ -932,6 +996,35 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
}
function updateMultisampleRenderTarget( renderTarget ) {
if ( renderTarget.isWebGLMultisampleRenderTarget ) {
var renderTargetProperties = properties.get( renderTarget );
_gl.bindFramebuffer( _gl.READ_FRAMEBUFFER, renderTargetProperties.__webglMultisampledFramebuffer );
_gl.bindFramebuffer( _gl.DRAW_FRAMEBUFFER, renderTargetProperties.__webglFramebuffer );
var width = renderTarget.width;
var height = renderTarget.height;
var mask = _gl.COLOR_BUFFER_BIT;
if ( renderTarget.depthBuffer ) mask |= _gl.DEPTH_BUFFER_BIT;
if ( renderTarget.stencilBuffer ) mask |= _gl.STENCIL_BUFFER_BIT;
_gl.blitFramebuffer( 0, 0, width, height, 0, 0, width, height, mask, _gl.NEAREST );
}
}
function getRenderTargetSamples( renderTarget ) {
return ( capabilities.isWebGL2 && renderTarget.isWebGLMultisampleRenderTarget ) ?
Math.min( capabilities.maxSamples, renderTarget.samples ) : 0;
}
function updateVideoTexture( texture ) {
var id = texture.id;
......@@ -954,6 +1047,7 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
this.setTextureCubeDynamic = setTextureCubeDynamic;
this.setupRenderTarget = setupRenderTarget;
this.updateRenderTargetMipmap = updateRenderTargetMipmap;
this.updateMultisampleRenderTarget = updateMultisampleRenderTarget;
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或