Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 da0d66dd 编写于 作者: M Mr.doob 提交者： GitHub
浏览文件
操作

Merge pull request #15901 from takahirox/TextureArray 

DataTexture2DArray
上级 5215474c c547772c
隐藏空白更改
内联 并排
Showing with 496 addition and 406 deletion
examples/files.js
浏览文件 @ da0d66dd
......@@ -310,8 +310,8 @@ var files = {
"webgldeferred_animation"
],
"webgl2": [
"webgl2_materials_texture2darray",
"webgl2_materials_texture3d",
"webgl2_materials_texture3d_volume",
"webgl2_multisampled_renderbuffers",
"webgl2_sandbox"
],
......
examples/webgl2_materials_texture2darray.html 0 → 100644
浏览文件 @ da0d66dd
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - 2D texture array</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background:#000;
padding:0;
margin:0;
overflow:hidden;
}
#info {
position: absolute;
top: 0px;
width: 100%;
color: #ffffff;
padding: 5px;
font-family:Monospace;
font-size:13px;
text-align:center;
}
#info a {
color: #ffffff;
}
</style>
</head>
<script id="vs" type="x-shader/x-vertex">
#version 300 es
uniform vec2 size;
out vec2 vUv;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
// Convert position.xy to 1.0-0.0
vUv.xy = position.xy / size + 0.5;
vUv.y = 1.0 - vUv.y; // original data is upside down
}
</script>
<script id="fs" type="x-shader/x-fragment">
#version 300 es
precision highp float;
precision highp int;
precision highp sampler2DArray;
uniform sampler2DArray diffuse;
in vec2 vUv;
uniform int depth;
out vec4 out_FragColor;
void main() {
vec4 color = texture( diffuse, vec3( vUv, depth ) );
// lighten a bit
out_FragColor = vec4( color.rrr * 1.5, 1.0 );
}
</script>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - 2D Texture array<br />
Scanned head data by
<a href="https://www.codeproject.com/Articles/352270/Getting-started-with-Volume-Rendering" target="_blank" rel="noopener">Divine Augustine</a><br />
licensed under
<a href="https://www.codeproject.com/info/cpol10.aspx" target="_blank" rel="noopener">CPOL</a>
</div>
<script src="../build/three.js"></script>
<!--<script src="js/controls/OrbitControls.js"></script>-->
<script src="js/libs/jszip.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/WebGL.js"></script>
<script>
if ( WEBGL.isWebGL2Available() === false ) {
document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
}
var camera, scene, mesh, renderer, stats;
var planeWidth = 50;
var planeHeight = 50;
var depthStep = 0.4;
init();
animate();
function init() {
var container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.z = 70;
scene = new THREE.Scene();
// width 256, height 256, depth 109, 8-bit, zip archived raw data
new THREE.FileLoader()
.setResponseType( 'arraybuffer' )
.load( 'textures/3d/head256x256x109.zip', function ( data ) {
var zip = new JSZip( data );
var array = zip.files[ 'head256x256x109' ].asUint8Array();
var texture = new THREE.DataTexture2DArray( array, 256, 256, 109 );
texture.format = THREE.RedFormat;
texture.type = THREE.UnsignedByteType;
texture.needsUpdate = true;
var material = new THREE.ShaderMaterial( {
uniforms: {
diffuse: { value: texture },
depth: { value: 0 },
size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
},
vertexShader: document.getElementById( 'vs' ).textContent.trim(),
fragmentShader: document.getElementById( 'fs' ).textContent.trim()
} );
var geometry = new THREE.PlaneBufferGeometry( planeWidth, planeHeight );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
} );
// var controls = new THREE.OrbitControls( camera );
// 2D Texture array is available on WebGL 2.0
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas, context: context } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
if ( mesh ) {
var value = mesh.material.uniforms[ "depth" ].value;
value += depthStep;
if ( value > 109.0 || value < 0.0 ) {
if ( value > 1.0 ) value = 109.0 * 2.0 - value;
if ( value < 0.0 ) value = - value;
depthStep = - depthStep;
}
mesh.material.uniforms[ "depth" ].value = value;
}
render();
stats.update();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>
examples/webgl2_materials_texture3d.html
浏览文件 @ da0d66dd
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - 3D texture</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background:#000;
padding:0;
margin:0;
overflow:hidden;
}
#info {
position: absolute;
top: 0px;
width: 100%;
color: #ffffff;
padding: 5px;
font-family:Monospace;
font-size:13px;
text-align:center;
}
#info a {
color: #ffffff;
}
</style>
</head>
<script id="vs" type="x-shader/x-vertex">
#version 300 es
uniform float depth;
uniform vec2 size;
out vec3 vUv;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
// Convert position.xy to 1.0-0.0
vUv.xy = position.xy / size + 0.5;
vUv.y = 1.0 - vUv.y; // original data is upside down
vUv.z = depth;
}
</script>
<script id="fs" type="x-shader/x-fragment">
#version 300 es
precision highp float;
precision highp int;
precision highp sampler3D;
uniform sampler3D diffuse;
in vec3 vUv;
out vec4 out_FragColor;
void main() {
vec4 color = texture( diffuse, vUv );
// lighten a bit
out_FragColor = vec4( color.rrr * 1.5, 1.0 );
}
</script>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - 3D Texture<br />
Scanned head data by
<a href="https://www.codeproject.com/Articles/352270/Getting-started-with-Volume-Rendering" target="_blank" rel="noopener">Divine Augustine</a><br />
licensed under
<a href="https://www.codeproject.com/info/cpol10.aspx" target="_blank" rel="noopener">CPOL</a>
</div>
<script src="../build/three.js"></script>
<!--<script src="js/controls/OrbitControls.js"></script>-->
<script src="js/libs/jszip.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/WebGL.js"></script>
<script>
if ( WEBGL.isWebGL2Available() === false ) {
document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
}
var camera, scene, mesh, renderer, stats;
var planeWidth = 50;
var planeHeight = 50;
var depthStep = 1 / ( 109 * 3 );
init();
animate();
function init() {
var container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.z = 70;
<head>
<title>three.js webgl - volume rendering example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 5;
display:block;
}
.dg {
z-index: 10 !important;
}
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
#inset {
width: 150px;
height: 150px;
background-color: transparent; /* or transparent; will show through only if renderer alpha: true */
border: none; /* or none; */
margin: 0;
padding: 0px;
position: absolute;
left: 20px;
bottom: 20px;
z-index: 100;
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Float volume render test (mip / isosurface)
</div>
<div id="inset"></div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/Volume.js"></script>
<script src="js/loaders/NRRDLoader.js"></script>
<script src="js/shaders/VolumeShader.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/gunzip.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script>
if ( WEBGL.isWebGL2Available() === false ) {
document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
}
var container,
renderer,
scene,
camera,
controls,
material,
volconfig,
cmtextures;
init();
function init() {
scene = new THREE.Scene();
// Create renderer
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Create camera (The volume renderer does not work very well with perspective yet)
var h = 512; // frustum height
var aspect = window.innerWidth / window.innerHeight;
camera = new THREE.OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 1000 );
camera.position.set( 0, 0, 128 );
camera.up.set( 0, 0, 1 ); // In our data, z is up
// Create controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.target.set( 64, 64, 128 );
controls.minZoom = 0.5;
controls.maxZoom = 4;
controls.update();
// scene.add( new THREE.AxesHelper( 128 ) );
// Lighting is baked into the shader a.t.m.
// var dirLight = new THREE.DirectionalLight( 0xffffff );
// The gui for interaction
volconfig = { clim1: 0, clim2: 1, renderstyle: 'iso', isothreshold: 0.15, colormap: 'viridis' };
var gui = new dat.GUI();
gui.add( volconfig, 'clim1', 0, 1, 0.01 ).onChange( updateUniforms );
gui.add( volconfig, 'clim2', 0, 1, 0.01 ).onChange( updateUniforms );
gui.add( volconfig, 'colormap', { gray: 'gray', viridis: 'viridis' } ).onChange( updateUniforms );
gui.add( volconfig, 'renderstyle', { mip: 'mip', iso: 'iso' } ).onChange( updateUniforms );
gui.add( volconfig, 'isothreshold', 0, 1, 0.01 ).onChange( updateUniforms );
// Load the data ...
new THREE.NRRDLoader().load( "models/nrrd/stent.nrrd", function ( volume ) {
// Texture to hold the volume. We have scalars, so we put our data in the red channel.
// THREEJS will select R32F (33326) based on the RedFormat and FloatType.
// Also see https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE
// TODO: look the dtype up in the volume metadata
var texture = new THREE.DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
texture.format = THREE.RedFormat;
texture.type = THREE.FloatType;
texture.minFilter = texture.magFilter = THREE.LinearFilter;
texture.unpackAlignment = 1;
texture.needsUpdate = true;
// Colormap textures
cmtextures = {
viridis: new THREE.TextureLoader().load( 'textures/cm_viridis.png', render ),
gray: new THREE.TextureLoader().load( 'textures/cm_gray.png', render )
};
// Material
var shader = THREE.VolumeRenderShader1;
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "u_data" ].value = texture;
uniforms[ "u_size" ].value.set( volume.xLength, volume.yLength, volume.zLength );
uniforms[ "u_clim" ].value.set( volconfig.clim1, volconfig.clim2 );
uniforms[ "u_renderstyle" ].value = volconfig.renderstyle == 'mip' ? 0 : 1; // 0: MIP, 1: ISO
uniforms[ "u_renderthreshold" ].value = volconfig.isothreshold; // For ISO renderstyle
uniforms[ "u_cmdata" ].value = cmtextures[ volconfig.colormap ];
material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader,
side: THREE.BackSide // The volume shader uses the backface as its "reference point"
} );
// Mesh
var geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
geometry.translate( volume.xLength / 2 - 0.5, volume.yLength / 2 - 0.5, volume.zLength / 2 - 0.5 );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
scene = new THREE.Scene();
// width 256, height 256, depth 109, 8-bit, zip archived raw data
new THREE.FileLoader()
.setResponseType( 'arraybuffer' )
.load( 'textures/3d/head256x256x109.zip', function ( data ) {
var zip = new JSZip( data );
var array = zip.files[ 'head256x256x109' ].asUint8Array();
var texture = new THREE.DataTexture3D( array, 256, 256, 109 );
texture.format = THREE.RedFormat;
texture.type = THREE.UnsignedByteType;
texture.needsUpdate = true;
var material = new THREE.ShaderMaterial( {
uniforms: {
diffuse: { value: texture },
depth: { value: 0 },
size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
},
vertexShader: document.getElementById( 'vs' ).textContent.trim(),
fragmentShader: document.getElementById( 'fs' ).textContent.trim()
} );
var geometry = new THREE.PlaneBufferGeometry( planeWidth, planeHeight );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
} );
// var controls = new THREE.OrbitControls( camera );
// 3D Texture is available on WebGL 2.0
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas, context: context } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
window.addEventListener( 'resize', onWindowResize, false );
}
render();
function onWindowResize() {
} );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
window.addEventListener( 'resize', onWindowResize, false );
renderer.setSize( window.innerWidth, window.innerHeight );
}
}
function updateUniforms() {
function animate() {
material.uniforms[ "u_clim" ].value.set( volconfig.clim1, volconfig.clim2 );
material.uniforms[ "u_renderstyle" ].value = volconfig.renderstyle == 'mip' ? 0 : 1; // 0: MIP, 1: ISO
material.uniforms[ "u_renderthreshold" ].value = volconfig.isothreshold; // For ISO renderstyle
material.uniforms[ "u_cmdata" ].value = cmtextures[ volconfig.colormap ];
requestAnimationFrame( animate );
render();
if ( mesh ) {
}
var value = mesh.material.uniforms[ "depth" ].value;
function onWindowResize() {
value += depthStep;
renderer.setSize( window.innerWidth, window.innerHeight );
if ( value > 1.0 || value < 0.0 ) {
var aspect = window.innerWidth / window.innerHeight;
if ( value > 1.0 ) value = 2.0 - value;
if ( value < 0.0 ) value = - value;
var frustumHeight = camera.top - camera.bottom;
depthStep = - depthStep;
camera.left = - frustumHeight * aspect / 2;
camera.right = frustumHeight * aspect / 2;
}
camera.updateProjectionMatrix();
mesh.material.uniforms[ "depth" ].value = value;
render();
}
}
render();
stats.update();
function render() {
}
renderer.render( scene, camera );
function render() {
}
renderer.render( scene, camera );
}
</script>
</script>
</body>
</body>
</html>
examples/webgl2_materials_texture3d_volume.html 已删除 100644 → 0
浏览文件 @ 5215474c
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - volume rendering example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 5;
display:block;
}
.dg {
z-index: 10 !important;
}
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
#inset {
width: 150px;
height: 150px;
background-color: transparent; /* or transparent; will show through only if renderer alpha: true */
border: none; /* or none; */
margin: 0;
padding: 0px;
position: absolute;
left: 20px;
bottom: 20px;
z-index: 100;
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Float volume render test (mip / isosurface)
</div>
<div id="inset"></div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/Volume.js"></script>
<script src="js/loaders/NRRDLoader.js"></script>
<script src="js/shaders/VolumeShader.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/gunzip.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script>
if ( WEBGL.isWebGL2Available() === false ) {
document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
}
var container,
renderer,
scene,
camera,
controls,
material,
volconfig,
cmtextures;
init();
function init() {
scene = new THREE.Scene();
// Create renderer
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Create camera (The volume renderer does not work very well with perspective yet)
var h = 512; // frustum height
var aspect = window.innerWidth / window.innerHeight;
camera = new THREE.OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 1000 );
camera.position.set( 0, 0, 128 );
camera.up.set( 0, 0, 1 ); // In our data, z is up
// Create controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.target.set( 64, 64, 128 );
controls.minZoom = 0.5;
controls.maxZoom = 4;
controls.update();
// scene.add( new THREE.AxesHelper( 128 ) );
// Lighting is baked into the shader a.t.m.
// var dirLight = new THREE.DirectionalLight( 0xffffff );
// The gui for interaction
volconfig = { clim1: 0, clim2: 1, renderstyle: 'iso', isothreshold: 0.15, colormap: 'viridis' };
var gui = new dat.GUI();
gui.add( volconfig, 'clim1', 0, 1, 0.01 ).onChange( updateUniforms );
gui.add( volconfig, 'clim2', 0, 1, 0.01 ).onChange( updateUniforms );
gui.add( volconfig, 'colormap', { gray: 'gray', viridis: 'viridis' } ).onChange( updateUniforms );
gui.add( volconfig, 'renderstyle', { mip: 'mip', iso: 'iso' } ).onChange( updateUniforms );
gui.add( volconfig, 'isothreshold', 0, 1, 0.01 ).onChange( updateUniforms );
// Load the data ...
new THREE.NRRDLoader().load( "models/nrrd/stent.nrrd", function ( volume ) {
// Texture to hold the volume. We have scalars, so we put our data in the red channel.
// THREEJS will select R32F (33326) based on the RedFormat and FloatType.
// Also see https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE
// TODO: look the dtype up in the volume metadata
var texture = new THREE.DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
texture.format = THREE.RedFormat;
texture.type = THREE.FloatType;
texture.minFilter = texture.magFilter = THREE.LinearFilter;
texture.unpackAlignment = 1;
texture.needsUpdate = true;
// Colormap textures
cmtextures = {
viridis: new THREE.TextureLoader().load( 'textures/cm_viridis.png', render ),
gray: new THREE.TextureLoader().load( 'textures/cm_gray.png', render )
};
// Material
var shader = THREE.VolumeRenderShader1;
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "u_data" ].value = texture;
uniforms[ "u_size" ].value.set( volume.xLength, volume.yLength, volume.zLength );
uniforms[ "u_clim" ].value.set( volconfig.clim1, volconfig.clim2 );
uniforms[ "u_renderstyle" ].value = volconfig.renderstyle == 'mip' ? 0 : 1; // 0: MIP, 1: ISO
uniforms[ "u_renderthreshold" ].value = volconfig.isothreshold; // For ISO renderstyle
uniforms[ "u_cmdata" ].value = cmtextures[ volconfig.colormap ];
material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader,
side: THREE.BackSide // The volume shader uses the backface as its "reference point"
} );
// Mesh
var geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
geometry.translate( volume.xLength / 2 - 0.5, volume.yLength / 2 - 0.5, volume.zLength / 2 - 0.5 );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
render();
} );
window.addEventListener( 'resize', onWindowResize, false );
}
function updateUniforms() {
material.uniforms[ "u_clim" ].value.set( volconfig.clim1, volconfig.clim2 );
material.uniforms[ "u_renderstyle" ].value = volconfig.renderstyle == 'mip' ? 0 : 1; // 0: MIP, 1: ISO
material.uniforms[ "u_renderthreshold" ].value = volconfig.isothreshold; // For ISO renderstyle
material.uniforms[ "u_cmdata" ].value = cmtextures[ volconfig.colormap ];
render();
}
function onWindowResize() {
renderer.setSize( window.innerWidth, window.innerHeight );
var aspect = window.innerWidth / window.innerHeight;
var frustumHeight = camera.top - camera.bottom;
camera.left = - frustumHeight * aspect / 2;
camera.right = frustumHeight * aspect / 2;
camera.updateProjectionMatrix();
render();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>
rollup.config.js
浏览文件 @ da0d66dd
......@@ -117,6 +117,7 @@ function glconstants() {
ACTIVE_ATTRIBUTES: 35721,
IMPLEMENTATION_COLOR_READ_TYPE: 35738,
IMPLEMENTATION_COLOR_READ_FORMAT: 35739,
TEXTURE_2D_ARRAY: 35866,
DEPTH_COMPONENT32F: 36012,
COLOR_ATTACHMENT0: 36064,
FRAMEBUFFER_COMPLETE: 36053,
......
src/Three.js
浏览文件 @ da0d66dd
......@@ -24,6 +24,7 @@ export { Points } from './objects/Points.js';
export { Group } from './objects/Group.js';
export { VideoTexture } from './textures/VideoTexture.js';
export { DataTexture } from './textures/DataTexture.js';
export { DataTexture2DArray } from './textures/DataTexture2DArray.js';
export { DataTexture3D } from './textures/DataTexture3D.js';
export { CompressedTexture } from './textures/CompressedTexture.js';
export { CubeTexture } from './textures/CubeTexture.js';
......
src/renderers/WebGLRenderer.js
浏览文件 @ da0d66dd
......@@ -2466,6 +2466,12 @@ function WebGLRenderer( parameters ) {
}() );
this.setTexture2DArray = function ( texture, slot ) {
textures.setTexture2DArray( texture, slot );
};
this.setTexture3D = function ( texture, slot ) {
textures.setTexture3D( texture, slot );
......
src/renderers/webgl/WebGLTextures.js
浏览文件 @ da0d66dd
......@@ -299,6 +299,22 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
}
function setTexture2DArray( texture, slot ) {
var textureProperties = properties.get( texture );
if ( texture.version > 0 && textureProperties.__version !== texture.version ) {
uploadTexture( textureProperties, texture, slot );
return;
}
state.activeTexture( _gl.TEXTURE0 + slot );
state.bindTexture( _gl.TEXTURE_2D_ARRAY, textureProperties.__webglTexture );
}
function setTexture3D( texture, slot ) {
var textureProperties = properties.get( texture );
......@@ -451,7 +467,7 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
_gl.texParameteri( textureType, _gl.TEXTURE_WRAP_S, utils.convert( texture.wrapS ) );
_gl.texParameteri( textureType, _gl.TEXTURE_WRAP_T, utils.convert( texture.wrapT ) );
if ( textureType === _gl.TEXTURE_3D ) {
if ( textureType === _gl.TEXTURE_3D || textureType === _gl.TEXTURE_2D_ARRAY ) {
_gl.texParameteri( textureType, _gl.TEXTURE_WRAP_R, utils.convert( texture.wrapR ) );
......@@ -465,7 +481,7 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
_gl.texParameteri( textureType, _gl.TEXTURE_WRAP_S, _gl.CLAMP_TO_EDGE );
_gl.texParameteri( textureType, _gl.TEXTURE_WRAP_T, _gl.CLAMP_TO_EDGE );
if ( textureType === _gl.TEXTURE_3D ) {
if ( textureType === _gl.TEXTURE_3D || textureType === _gl.TEXTURE_2D_ARRAY ) {
_gl.texParameteri( textureType, _gl.TEXTURE_WRAP_R, _gl.CLAMP_TO_EDGE );
......@@ -524,7 +540,10 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
function uploadTexture( textureProperties, texture, slot ) {
var textureType = ( texture.isDataTexture3D ) ? _gl.TEXTURE_3D : _gl.TEXTURE_2D;
var textureType = _gl.TEXTURE_2D;
if ( texture.isDataTexture2DArray ) textureType = _gl.TEXTURE_2D_ARRAY;
if ( texture.isDataTexture3D ) textureType = _gl.TEXTURE_3D;
initTexture( textureProperties, texture );
......@@ -656,6 +675,11 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
textureProperties.__maxMipLevel = mipmaps.length - 1;
} else if ( texture.isDataTexture2DArray ) {
state.texImage3D( _gl.TEXTURE_2D_ARRAY, 0, glInternalFormat, image.width, image.height, image.depth, 0, glFormat, glType, image.data );
textureProperties.__maxMipLevel = 0;
} else if ( texture.isDataTexture3D ) {
state.texImage3D( _gl.TEXTURE_3D, 0, glInternalFormat, image.width, image.height, image.depth, 0, glFormat, glType, image.data );
......@@ -1054,6 +1078,7 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
}
this.setTexture2D = setTexture2D;
this.setTexture2DArray = setTexture2DArray;
this.setTexture3D = setTexture3D;
this.setTextureCube = setTextureCube;
this.setTextureCubeDynamic = setTextureCubeDynamic;
......
src/renderers/webgl/WebGLUniforms.js
浏览文件 @ da0d66dd
......@@ -51,9 +51,11 @@
import { CubeTexture } from '../../textures/CubeTexture.js';
import { Texture } from '../../textures/Texture.js';
import { DataTexture2DArray } from '../../textures/DataTexture2DArray.js';
import { DataTexture3D } from '../../textures/DataTexture3D.js';
var emptyTexture = new Texture();
var emptyTexture2darray = new DataTexture2DArray();
var emptyTexture3d = new DataTexture3D();
var emptyCubeTexture = new CubeTexture();
......@@ -390,6 +392,22 @@ function setValueT1( gl, v, renderer ) {
}
function setValueT2DArray1( gl, v, renderer ) {
var cache = this.cache;
var unit = renderer.allocTextureUnit();
if ( cache[ 0 ] !== unit ) {
gl.uniform1i( this.addr, unit );
cache[ 0 ] = unit;
}
renderer.setTexture2DArray( v || emptyTexture2dArray, unit );
}
function setValueT3D1( gl, v, renderer ) {
var cache = this.cache;
......@@ -478,6 +496,7 @@ function getSingularSetter( type ) {
case 0x8b5e: case 0x8d66: return setValueT1; // SAMPLER_2D, SAMPLER_EXTERNAL_OES
case 0x8b5f: return setValueT3D1; // SAMPLER_3D
case 0x8b60: return setValueT6; // SAMPLER_CUBE
case 0x8DC1: return setValueT2DArray1; // SAMPLER_2D_ARRAY
case 0x1404: case 0x8b56: return setValue1i; // INT, BOOL
case 0x8b53: case 0x8b57: return setValue2iv; // _VEC2
......
src/textures/DataTexture2DArray.d.ts 0 → 100644
浏览文件 @ da0d66dd
import { Texture } from './Texture';
import { NearestFilter } from '../constants';
import { TypedArray } from '../polyfills';
export class DataTexture2DArray extends Texture {
constructor(
data: ArrayBuffer | TypedArray,
width: number,
height: number,
depth: number
);
}
src/textures/DataTexture2DArray.js 0 → 100644
浏览文件 @ da0d66dd
/**
* @author Takahiro https://github.com/takahirox
*/
import { Texture } from './Texture.js';
import { ClampToEdgeWrapping, NearestFilter } from '../constants.js';
function DataTexture2DArray( data, width, height, depth ) {
Texture.call( this, null );
this.image = { data: data, width: width, height: height, depth: depth };
this.magFilter = NearestFilter;
this.minFilter = NearestFilter;
this.wrapR = ClampToEdgeWrapping;
this.generateMipmaps = false;
this.flipY = false;
}
DataTexture2DArray.prototype = Object.create( Texture.prototype );
DataTexture2DArray.prototype.constructor = DataTexture2DArray;
DataTexture2DArray.prototype.isDataTexture2DArray = true;
export { DataTexture2DArray };
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或