Three版本是127版
WebGLContextAttributes
// 获取上下文时支持的参数
// getContext('webgl', <WebGLContextAttributes>)
dictionary WebGLContextAttributes {
boolean alpha = true;
boolean depth = true;
boolean stencil = false;
boolean antialias = true;
boolean premultipliedAlpha = true;
boolean preserveDrawingBuffer = false;
WebGLPowerPreference powerPreference = "default";
boolean failIfMajorPerformanceCaveat = false;
};
let _gl = _context;
function getContext( contextNames, contextAttributes ) { //只需要一个即可
for ( let i = 0; i < contextNames.length; i ++ ) {
const contextName = contextNames[ i ];
const context = _canvas.getContext( contextName, contextAttributes );
if ( context !== null ) return context;
}
return null;
}
const contextAttributes = {
alpha: _alpha,
depth: _depth,
stencil: _stencil,
antialias: _antialias,
premultipliedAlpha: _premultipliedAlpha,
preserveDrawingBuffer: _preserveDrawingBuffer,
powerPreference: _powerPreference,
failIfMajorPerformanceCaveat: _failIfMajorPerformanceCaveat
};
const contextNames = [ 'webgl2', 'webgl', 'experimental-webgl' ]; //注意Three里面默认是三个 优先是webgl2
_gl = getContext( contextNames, contextAttributes );
缓冲区相关方法
// 缓冲区类型
// 为 gl.clear 的参数
const GLenum DEPTH_BUFFER_BIT = 0x00000100;//|0x00000100|256
const GLenum STENCIL_BUFFER_BIT = 0x00000400;//|0x00000400|1024
const GLenum COLOR_BUFFER_BIT = 0x00004000;//|0x00004000|16384
// 清理指定缓存内容, 可以通过或运算符一次清理多个缓冲区
// @param mask 颜色缓冲区（COLOR_BUFFER_BIT） | 深度缓冲区（DEPTH_BUFFER_BIT） | 模板缓冲区（STENCIL_BUFFER_BIT）
void clear(GLbitfield mask);
// 将指定缓冲区设置为指定的值（参数范围都是 0.0 - 1.0）
void clearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha); //默认 0.0, 0.0, 0.0, 0.0
void clearDepth(GLclampf depth); //默认 1.0
void clearStencil(GLint s); //默认 0
this.clear = function ( color, depth, stencil ) {
let bits = 0;
if ( color === undefined || color ) bits |= 16384;
if ( depth === undefined || depth ) bits |= 256;
if ( stencil === undefined || stencil ) bits |= 1024;
_gl.clear( bits );
};
setClear: function ( r, g, b, a, premultipliedAlpha ) {
if ( premultipliedAlpha === true ) { //这么计算的
r *= a;
g *= a;
b *= a;
}
color.set( r, g, b, a );
if ( currentColorClear.equals( color ) === false ) {
gl.clearColor( r, g, b, a ); //clearcolor
currentColorClear.copy( color );
}
},
绘制相关方法
// 绘制的类型
// 为 gl.drawArrays、gl.drawElements 第一个参数
const GLenum POINTS = 0x0000;//|0x0000|0
const GLenum LINES = 0x0001;//|0x0001|1
const GLenum LINE_LOOP = 0x0002;//|0x0002|2
const GLenum LINE_STRIP = 0x0003;//|0x0003|3
const GLenum TRIANGLES = 0x0004;//|0x0004|4
const GLenum TRIANGLE_STRIP = 0x0005;//|0x0005|5
const GLenum TRIANGLE_FAN = 0x0006;//|0x0006|6
// 执行绘制， 按照mode参数指定的方式绘制图形
// @param model 绘制模式。
// @param first 指定从哪个定点开始绘制 一般是0
// @param count 指定绘制需要用到多少个顶点
void drawArrays(GLenum mode, GLint first, GLsizei count);
// 执行绘制，按照mode参数制定的方式，根据绑定到 ELEMENT_ARRAY_BUFFER 的缓冲区中的顶点索引绘制图形
// @param model 绘制模式。
// @param count 指定绘制顶点的个数
// @param type 指定索引值数据类型。包括：UNSIGNED_BYTE、UNSIGNED_SHORT、UNSIGNED_INT 数据类型 跟啥有关系呢
// @param offset 指定索引数组中绘制的偏移位置，以字节为单位 一般都是3字节码?
void drawElements(GLenum mode, GLsizei count, GLenum type, GLintptr offset);
this.renderBufferImmediate = function ( object, program ) {
bindingStates.initAttributes(); //初始化
const buffers = properties.get( object ); //获取属性 object是object3D
//position normal uv color 没有index 都是createbuffer()
if ( object.hasPositions && ! buffers.position ) buffers.position = _gl.createBuffer();
if ( object.hasNormals && ! buffers.normal ) buffers.normal = _gl.createBuffer();
if ( object.hasUvs && ! buffers.uv ) buffers.uv = _gl.createBuffer();
if ( object.hasColors && ! buffers.color ) buffers.color = _gl.createBuffer();
//programAttributes 储存有所有数组数据吧
//后面再详细补上去
const programAttributes = program.getAttributes();
if ( object.hasPositions ) { //position
_gl.bindBuffer( 34962, buffers.position );
_gl.bufferData( 34962, object.positionArray, 35048 );
bindingStates.enableAttribute( programAttributes.position );
_gl.vertexAttribPointer( programAttributes.position, 3, 5126, false, 0, 0 );
}
if ( object.hasNormals ) { //normal
_gl.bindBuffer( 34962, buffers.normal );
_gl.bufferData( 34962, object.normalArray, 35048 );
bindingStates.enableAttribute( programAttributes.normal );
_gl.vertexAttribPointer( programAttributes.normal, 3, 5126, false, 0, 0 );
}
if ( object.hasUvs ) { //uv
_gl.bindBuffer( 34962, buffers.uv );
_gl.bufferData( 34962, object.uvArray, 35048 );
bindingStates.enableAttribute( programAttributes.uv );
_gl.vertexAttribPointer( programAttributes.uv, 2, 5126, false, 0, 0 );
}
if ( object.hasColors ) { //color
_gl.bindBuffer( 34962, buffers.color );
_gl.bufferData( 34962, object.colorArray, 35048 );
bindingStates.enableAttribute( programAttributes.color );
_gl.vertexAttribPointer( programAttributes.color, 3, 5126, false, 0, 0 );
}
bindingStates.disableUnusedAttributes(); //把没开启的属性设置成关闭
_gl.drawArrays( 4, 0, object.count ); //这个没搞懂
object.count = 0; //设置为0
};
function WebGLBufferRenderer( gl, extensions, info, capabilities ) { //drawarray
const isWebGL2 = capabilities.isWebGL2; //判断是否是webgl2
let mode;
function setMode( value ) { //drawarray mode
mode = value;
}
//调用 WebGLBufferRenderer#render() 方法进行渲染。如下，就是进行最后的 drawArrays() 调用，将上层创建的 geometry 以及 material(组合起来就叫做 mesh) 渲染到 3D 场景的 canvas 中。
function render( start, count ) { //这个是render
gl.drawArrays( mode, start, count ); //mode在上面
info.update( count, mode, 1 );
}
function renderInstances( start, count, primcount ) { //instance
if ( primcount === 0 ) return;
let extension, methodName;
if ( isWebGL2 ) { //判断是否是webgl2
extension = gl;
methodName = 'drawArraysInstanced'; //webgl2使用的instanced
} else {
extension = extensions.get( 'ANGLE_instanced_arrays' ); //webgl1的话 直接get
methodName = 'drawArraysInstancedANGLE'; //webgl1是这个 angle
if ( extension === null ) {
console.error(
'THREE.WebGLBufferRenderer: using THREE.InstancedBufferGeometry but hardware does not support extension ANGLE_instanced_arrays.'
);
return;
}
}
extension[ methodName ]( mode, start, count, primcount ); //执行drawarray instance
info.update( count, mode, primcount );
}
this.setMode = setMode;
this.render = render;
this.renderInstances = renderInstances;
}
function WebGLIndexedBufferRenderer( gl, extensions, info, capabilities ) {//drawelement
const isWebGL2 = capabilities.isWebGL2;//判断是否有webgl2
let mode;
function setMode( value ) {
mode = value;
}
let type, bytesPerElement;
function setIndex( value ) {
type = value.type; //三个类型
bytesPerElement = value.bytesPerElement; //字节长度
}
function render( start, count ) {
gl.drawElements( mode, count, type, start * bytesPerElement ); //type是数据类型
info.update( count, mode, 1 );
}
function renderInstances( start, count, primcount ) {//
if ( primcount === 0 ) return;
let extension, methodName;
if ( isWebGL2 ) { //
extension = gl;
methodName = 'drawElementsInstanced'; //减少draw call
} else {
extension = extensions.get( 'ANGLE_instanced_arrays' );
methodName = 'drawElementsInstancedANGLE'; //减少draw call WebGL1.0可以使用扩展：
if ( extension === null ) {
console.error(
'THREE.WebGLIndexedBufferRenderer: using THREE.InstancedBufferGeometry but hardware does not support extension ANGLE_instanced_arrays.'
);
return;
}
}
extension[ methodName ]( //用这样的方式instance
mode,
count,
type,
start * bytesPerElement,
primcount
);
info.update( count, mode, primcount );
}
//
this.setMode = setMode;
this.setIndex = setIndex;
this.render = render;
this.renderInstances = renderInstances;
}
着色器 attribute 相关
// 获取由 name 参数指定的 attribute 变量存储地址
// @param program 指定包含顶点或者片元着色器的程序对象
// @param name 获取其存储的 attribute 变量名称，最大长度256字节
[WebGLHandlesContextLoss] GLint getAttribLocation(WebGLProgram program, DOMString name);
// 绑定顶点索引到属性变量
// 使用缓冲区数据的时候需要用到的方法
// @param index 指定要绑定的通用顶点的索引 这个值直接赋值给 vertexAttribPointer 的 index 参数
// @param name 指定变量名
// 这里的 index 和 getAttribLocation 返回值是一样的
void bindAttribLocation(WebGLProgram program, GLuint index, DOMString name);
// 将数据传给由index参数指定的attribute变量
void vertexAttrib1f(GLuint index, GLfloat x);
void vertexAttrib2f(GLuint index, GLfloat x, GLfloat y);
void vertexAttrib3f(GLuint index, GLfloat x, GLfloat y, GLfloat z);
void vertexAttrib4f(GLuint index, GLfloat x, GLfloat y, GLfloat z, GLfloat w);
// 接收参数为 Float32Array 数组
void vertexAttrib1fv(GLuint index, Float32List values);
void vertexAttrib2fv(GLuint index, Float32List values);
void vertexAttrib3fv(GLuint index, Float32List values);
void vertexAttrib4fv(GLuint index, Float32List values);
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
gl.vertexAttribPointer(a_Position, numVertex, gl.FLOAT, false, FSIZE * STRIDE, 0);
gl.enableVertexAttribArray(a_Position);
function fetchAttributeLocations( gl, program ) { //获取attribute的变量储存地址
const attributes = {};
const n = gl.getProgramParameter( program, 35721 );
for ( let i = 0; i < n; i ++ ) {
const info = gl.getActiveAttrib( program, i );
const name = info.name;
attributes[ name ] = gl.getAttribLocation( program, name ); //
}
return attributes; //通过名字直接获取attributelocation
}
function setupVertexAttributes( object, material, program, geometry ) {
if ( capabilities.isWebGL2 === false && ( object.isInstancedMesh || geometry.isInstancedBufferGeometry ) ) {
if ( extensions.get( 'ANGLE_instanced_arrays' ) === null ) return;
}
initAttributes(); //初始化数据 没用的
const geometryAttributes = geometry.attributes; //这个attribute存什么来着
const programAttributes = program.getAttributes(); //这个是获得什么来着
const materialDefaultAttributeValues = material.defaultAttributeValues;//这个是啥
for ( const name in programAttributes ) {
const programAttribute = programAttributes[ name ];
if ( programAttribute >= 0 ) {
const geometryAttribute = geometryAttributes[ name ];
if ( geometryAttribute !== undefined ) {
const normalized = geometryAttribute.normalized;
const size = geometryAttribute.itemSize;
const attribute = attributes.get( geometryAttribute );
// TODO Attribute may not be available on context restore
if ( attribute === undefined ) continue;
const buffer = attribute.buffer;
const type = attribute.type;
const bytesPerElement = attribute.bytesPerElement;
if ( geometryAttribute.isInterleavedBufferAttribute ) {
const data = geometryAttribute.data;
const stride = data.stride;
const offset = geometryAttribute.offset;
if ( data && data.isInstancedInterleavedBuffer ) {
enableAttributeAndDivisor( programAttribute, data.meshPerAttribute );
if ( geometry._maxInstanceCount === undefined ) {
geometry._maxInstanceCount = data.meshPerAttribute * data.count;
}
} else {
enableAttribute( programAttribute );
}
gl.bindBuffer( 34962, buffer );
vertexAttribPointer( programAttribute, size, type, normalized, stride * bytesPerElement, offset * bytesPerElement );
} else {
if ( geometryAttribute.isInstancedBufferAttribute ) {
enableAttributeAndDivisor( programAttribute, geometryAttribute.meshPerAttribute );
if ( geometry._maxInstanceCount === undefined ) {
geometry._maxInstanceCount = geometryAttribute.meshPerAttribute * geometryAttribute.count;
}
} else {
enableAttribute( programAttribute );
}
gl.bindBuffer( 34962, buffer );
vertexAttribPointer( programAttribute, size, type, normalized, 0, 0 );
}
} else if ( name === 'instanceMatrix' ) {
const attribute = attributes.get( object.instanceMatrix );
// TODO Attribute may not be available on context restore
if ( attribute === undefined ) continue;
const buffer = attribute.buffer;
const type = attribute.type;
enableAttributeAndDivisor( programAttribute + 0, 1 );
enableAttributeAndDivisor( programAttribute + 1, 1 );
enableAttributeAndDivisor( programAttribute + 2, 1 );
enableAttributeAndDivisor( programAttribute + 3, 1 );
gl.bindBuffer( 34962, buffer );
gl.vertexAttribPointer( programAttribute + 0, 4, type, false, 64, 0 );
gl.vertexAttribPointer( programAttribute + 1, 4, type, false, 64, 16 );
gl.vertexAttribPointer( programAttribute + 2, 4, type, false, 64, 32 );
gl.vertexAttribPointer( programAttribute + 3, 4, type, false, 64, 48 );
} else if ( name === 'instanceColor' ) {
const attribute = attributes.get( object.instanceColor );
// TODO Attribute may not be available on context restore
if ( attribute === undefined ) continue;
const buffer = attribute.buffer;
const type = attribute.type;
enableAttributeAndDivisor( programAttribute, 1 );
gl.bindBuffer( 34962, buffer );
gl.vertexAttribPointer( programAttribute, 3, type, false, 12, 0 );
} else if ( materialDefaultAttributeValues !== undefined ) { //默认材质?
const value = materialDefaultAttributeValues[ name ];
if ( value !== undefined ) {
switch ( value.length ) { //没太看懂这部分
case 2:
gl.vertexAttrib2fv( programAttribute, value );
break;
case 3:
gl.vertexAttrib3fv( programAttribute, value );
break;
case 4:
gl.vertexAttrib4fv( programAttribute, value );
break;
default:
gl.vertexAttrib1fv( programAttribute, value );
}
}
}
}
}
disableUnusedAttributes();
}
着色器 uniform 相关
// 获取指定名称的 uniform 变量存储位置
// @param program 制定的包含顶点或者片元着色器的程序对象
// @param name 指定想要获取其存储位置的uniform变量名称 最大长度256字节
WebGLUniformLocation? getUniformLocation(WebGLProgram program, DOMString name);
// 将数据传给location指定的uniform变量
void uniform1f(WebGLUniformLocation? location, GLfloat x);
void uniform2f(WebGLUniformLocation? location, GLfloat x, GLfloat y);
void uniform3f(WebGLUniformLocation? location, GLfloat x, GLfloat y, GLfloat z);
void uniform4f(WebGLUniformLocation? location, GLfloat x, GLfloat y, GLfloat z, GLfloat w);
void uniform1i(WebGLUniformLocation? location, GLint x);
void uniform2i(WebGLUniformLocation? location, GLint x, GLint y);
void uniform3i(WebGLUniformLocation? location, GLint x, GLint y, GLint z);
void uniform4i(WebGLUniformLocation? location, GLint x, GLint y, GLint z, GLint w);
void uniform1fv(WebGLUniformLocation? location, Float32List v);
void uniform2fv(WebGLUniformLocation? location, Float32List v);
void uniform3fv(WebGLUniformLocation? location, Float32List v);
void uniform4fv(WebGLUniformLocation? location, Float32List v);
void uniform1iv(WebGLUniformLocation? location, Int32List v);
void uniform2iv(WebGLUniformLocation? location, Int32List v);
void uniform3iv(WebGLUniformLocation? location, Int32List v);
void uniform4iv(WebGLUniformLocation? location, Int32List v);
// @param 是否对矩阵进行转置 默认 false 在webgl中必须是false
void uniformMatrix2fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);
void uniformMatrix3fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);
void uniformMatrix4fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);
function setValueV4f( gl, v ) {
const cache = this.cache;
if ( v.x !== undefined ) {
if ( cache[ 0 ] !== v.x || cache[ 1 ] !== v.y || cache[ 2 ] !== v.z || cache[ 3 ] !== v.w ) {
gl.uniform4f( this.addr, v.x, v.y, v.z, v.w ); //一个地址
cache[ 0 ] = v.x;
cache[ 1 ] = v.y;
cache[ 2 ] = v.z;
cache[ 3 ] = v.w;
}
} else {
if ( arraysEqual( cache, v ) ) return;
gl.uniform4fv( this.addr, v );
copyArray( cache, v );
}
}
function setValueV4fArray( gl, v ) {
const data = flatten( v, this.size, 4 );
gl.uniform4fv( this.addr, data );
}
function setValueV4i( gl, v ) {
const cache = this.cache;
if ( arraysEqual( cache, v ) ) return;
gl.uniform4iv( this.addr, v );
copyArray( cache, v );
}
function setValueM4( gl, v ) {
const cache = this.cache;
const elements = v.elements;
if ( elements === undefined ) {
if ( arraysEqual( cache, v ) ) return;
gl.uniformMatrix4fv( this.addr, false, v );
copyArray( cache, v );
} else {
if ( arraysEqual( cache, elements ) ) return;
mat4array.set( elements );
gl.uniformMatrix4fv( this.addr, false, mat4array );
copyArray( cache, elements );
}
}
function setValueM4Array( gl, v ) {
const data = flatten( v, this.size, 16 );
gl.uniformMatrix4fv( this.addr, false, data );
}
缓存对象
// 缓存对象
// bindBuffer 第一个参数
const GLenum ARRAY_BUFFER = 0x8892;
const GLenum ELEMENT_ARRAY_BUFFER = 0x8893;
// const GLenum ARRAY_BUFFER_BINDING = 0x8894;
// const GLenum ELEMENT_ARRAY_BUFFER_BINDING = 0x8895;
// 绘制模式
// 下文中的usage参数值
const GLenum STREAM_DRAW = 0x88E0;
const GLenum STATIC_DRAW = 0x88E4;
const GLenum DYNAMIC_DRAW = 0x88E8;
// 数据类型
// vertexAttribPointer 中参数type的取值
const GLenum BYTE = 0x1400;
const GLenum UNSIGNED_BYTE = 0x1401;
const GLenum SHORT = 0x1402;
const GLenum UNSIGNED_SHORT = 0x1403;
const GLenum INT = 0x1404;
const GLenum UNSIGNED_INT = 0x1405;
const GLenum FLOAT = 0x1406;
// 创建缓冲区对象
WebGLBuffer? createBuffer();
// 允许使用buffer表示的缓冲区对象并将其绑定到target表示的目标上
// @param target
// ARRAY_BUFFER 表示缓冲区对象中包含顶点数据
// ELEMENT_ARRAY_BUFFER 表示缓冲去对象中包含了顶点的索引值
void bindBuffer(GLenum target, WebGLBuffer? buffer);
// 开辟存储空间，向绑定在target上的缓冲区对象写入数据data
// @param target 同上
// @param data 类型化数组 比如：Float32Array...
// @param usage 优化效率 可以是以下值：
// STATIC_DRAW 只会向缓冲区写入一次数据 需要绘制很多次
// STREAM_DRAW 只会向缓冲区写入一次数据 需要绘制若干次
// DYNAMIC_DRAW 会向缓冲区对象中多次写入数据 并绘制很多次
void bufferData(GLenum target, [AllowShared] BufferSource? data, GLenum usage);
void bufferData(GLenum target, GLsizeiptr size, GLenum usage);
void bufferSubData(GLenum target, GLintptr offset, [AllowShared] BufferSource data);
// 将绑定到ARRAY_BUFFER的缓冲区对象分配给index指定的attribute变量
// @param index 指向attribute变量
// @param size 指定缓冲区中每个顶点分量的个数
// @param type 数据格式 见上面的枚举
// @param normalized 是否将浮点型数据归一化到[0, 1]或者[-1, 1]区间
// @param stride 指定相邻两个顶点之间的字节数 默认是0
// @param offset 指定缓冲区对象中的偏移量 单位字节 可以利用这个偏移量赋值多个attribute
void vertexAttribPointer(GLuint index, GLint size, GLenum type, GLboolean normalized, GLsizei stride, GLintptr offset);
// 开启index对应的attribute对象
// 开启后不能通过 vertexAttrib[1234]f 传值
void enableVertexAttribArray(GLuint index);
// 关闭index对应的attribute对象
void disableVertexAttribArray(GLuint index);
// 删除参数buffer表示的缓冲区对象
// @param buffer 缓冲区对象 由createBuffer创建
void deleteBuffer(WebGLBuffer? buffer);
function WebGLAttributes( gl, capabilities ) {
const isWebGL2 = capabilities.isWebGL2;
const buffers = new WeakMap();
function createBuffer( attribute, bufferType ) {
const array = attribute.array;
const usage = attribute.usage;
const buffer = gl.createBuffer();
gl.bindBuffer( bufferType, buffer );
gl.bufferData( bufferType, array, usage );
attribute.onUploadCallback();
let type = 5126;
if ( array instanceof Float32Array ) {
type = 5126;
} else if ( array instanceof Float64Array ) {
console.warn( 'THREE.WebGLAttributes: Unsupported data buffer format: Float64Array.' );
} else if ( array instanceof Uint16Array ) {
if ( attribute.isFloat16BufferAttribute ) {
if ( isWebGL2 ) {
type = 5131;
} else {
console.warn( 'THREE.WebGLAttributes: Usage of Float16BufferAttribute requires WebGL2.' );
}
} else {
type = 5123;
}
} else if ( array instanceof Int16Array ) {
type = 5122;
} else if ( array instanceof Uint32Array ) {
type = 5125;
} else if ( array instanceof Int32Array ) {
type = 5124;
} else if ( array instanceof Int8Array ) {
type = 5120;
} else if ( array instanceof Uint8Array ) {
type = 5121;
}
return {
buffer: buffer,
type: type,
bytesPerElement: array.BYTES_PER_ELEMENT,
version: attribute.version
};
}
function updateBuffer( buffer, attribute, bufferType ) {
const array = attribute.array;
const updateRange = attribute.updateRange;
gl.bindBuffer( bufferType, buffer );
if ( updateRange.count === - 1 ) {
// Not using update ranges
gl.bufferSubData( bufferType, 0, array );
} else {
if ( isWebGL2 ) {
gl.bufferSubData( bufferType, updateRange.offset * array.BYTES_PER_ELEMENT,
array, updateRange.offset, updateRange.count );
} else {
gl.bufferSubData( bufferType, updateRange.offset * array.BYTES_PER_ELEMENT,
array.subarray( updateRange.offset, updateRange.offset + updateRange.count ) );
}
updateRange.count = - 1; // reset range
}
}
//
function get( attribute ) {
if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
return buffers.get( attribute );
}
function remove( attribute ) {
if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
const data = buffers.get( attribute );
if ( data ) {
gl.deleteBuffer( data.buffer );
buffers.delete( attribute );
}
}
function update( attribute, bufferType ) {
if ( attribute.isGLBufferAttribute ) {
const cached = buffers.get( attribute );
if ( ! cached || cached.version < attribute.version ) {
buffers.set( attribute, {
buffer: attribute.buffer,
type: attribute.type,
bytesPerElement: attribute.elementSize,
version: attribute.version
} );
}
return;
}
if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
const data = buffers.get( attribute );
if ( data === undefined ) {
buffers.set( attribute, createBuffer( attribute, bufferType ) );
} else if ( data.version < attribute.version ) {
updateBuffer( data.buffer, attribute, bufferType );
data.version = attribute.version;
}
}
return {
get: get,
remove: remove,
update: update
};
}
function vertexAttribPointer( index, size, type, normalized, stride, offset ) {
if ( capabilities.isWebGL2 === true && ( type === 5124 || type === 5125 ) ) {
gl.vertexAttribIPointer( index, size, type, stride, offset );
} else {
gl.vertexAttribPointer( index, size, type, normalized, stride, offset );
}
}
function enableAttributeAndDivisor( attribute, meshPerAttribute ) {
const newAttributes = currentState.newAttributes;
const enabledAttributes = currentState.enabledAttributes;
const attributeDivisors = currentState.attributeDivisors;
newAttributes[ attribute ] = 1;
if ( enabledAttributes[ attribute ] === 0 ) {
gl.enableVertexAttribArray( attribute );
enabledAttributes[ attribute ] = 1;
}
if ( attributeDivisors[ attribute ] !== meshPerAttribute ) {
const extension = capabilities.isWebGL2 ? gl : extensions.get( 'ANGLE_instanced_arrays' );
extension[ capabilities.isWebGL2 ? 'vertexAttribDivisor' : 'vertexAttribDivisorANGLE' ]( attribute, meshPerAttribute );
attributeDivisors[ attribute ] = meshPerAttribute;
}
}
function disableUnusedAttributes() {
const newAttributes = currentState.newAttributes;
const enabledAttributes = currentState.enabledAttributes;
for ( let i = 0, il = enabledAttributes.length; i < il; i ++ ) {
if ( enabledAttributes[ i ] !== newAttributes[ i ] ) {
gl.disableVertexAttribArray( i );
enabledAttributes[ i ] = 0;
}
}
}
function remove( attribute ) {
if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
const data = buffers.get( attribute );
if ( data ) {
gl.deleteBuffer( data.buffer );
buffers.delete( attribute );
}
}
#着色器 texture 相关
// pixelStorei 中参数pname取值
// 对图像进行Y轴反转，默认false
const GLenum UNPACK_FLIP_Y_WEBGL = 0x9240;
// 将图像RGB颜色值每一个分量乘以A 默认false
const GLenum UNPACK_PREMULTIPLY_ALPHA_WEBGL = 0x9241;
// activeTexture 方法使用的枚举常量
const GLenum TEXTURE0 = 0x84C0;
const GLenum TEXTURE1 = 0x84C1;
const GLenum TEXTURE2 = 0x84C2;
const GLenum TEXTURE3 = 0x84C3;
const GLenum TEXTURE4 = 0x84C4;
const GLenum TEXTURE5 = 0x84C5;
const GLenum TEXTURE6 = 0x84C6;
const GLenum TEXTURE7 = 0x84C7;
const GLenum TEXTURE8 = 0x84C8;
const GLenum TEXTURE9 = 0x84C9;
const GLenum TEXTURE10 = 0x84CA;
const GLenum TEXTURE11 = 0x84CB;
const GLenum TEXTURE12 = 0x84CC;
const GLenum TEXTURE13 = 0x84CD;
const GLenum TEXTURE14 = 0x84CE;
const GLenum TEXTURE15 = 0x84CF;
const GLenum TEXTURE16 = 0x84D0;
const GLenum TEXTURE17 = 0x84D1;
const GLenum TEXTURE18 = 0x84D2;
const GLenum TEXTURE19 = 0x84D3;
const GLenum TEXTURE20 = 0x84D4;
const GLenum TEXTURE21 = 0x84D5;
const GLenum TEXTURE22 = 0x84D6;
const GLenum TEXTURE23 = 0x84D7;
const GLenum TEXTURE24 = 0x84D8;
const GLenum TEXTURE25 = 0x84D9;
const GLenum TEXTURE26 = 0x84DA;
const GLenum TEXTURE27 = 0x84DB;
const GLenum TEXTURE28 = 0x84DC;
const GLenum TEXTURE29 = 0x84DD;
const GLenum TEXTURE30 = 0x84DE;
const GLenum TEXTURE31 = 0x84DF;
// bindTexture texParameterf texParameteri texImage2D 的 target 参数
const GLenum TEXTURE_2D = 0x0DE1;
const GLenum TEXTURE_CUBE_MAP = 0x8513;
// texParameterf pname 参数
// texParameteri pname 参数
const GLenum TEXTURE_MAG_FILTER = 0x2800;
const GLenum TEXTURE_MIN_FILTER = 0x2801;
const GLenum TEXTURE_WRAP_S = 0x2802;
const GLenum TEXTURE_WRAP_T = 0x2803;
// texParameterf param 参数 当 pname = TEXTURE_MAG_FILTER | TEXTURE_MIN_FILTER
// texParameteri param 参数 当 pname = TEXTURE_MAG_FILTER | TEXTURE_MIN_FILTER
// 以下是非金字塔纹理常量
// 使用原纹理上距离映射后像素（新像素）中心最近的那个像素的颜色值，作为新像素的值（使用曼哈顿距离）
// 曼哈顿距离又称直角距离、棋盘距离。如(x1, y1) (x2, y2)的曼哈顿距离是 |x1 - x2| + |y1 - y2|
const GLenum NEAREST = 0x2600;
// 使用距离新像素中心最近的四个像素的颜色值得加权平均，作为新像素的值（与 NEAREST对比，该方法图像质量更好，但是会有比较大的开销）
const GLenum LINEAR = 0x2601;
// 以下是金字塔纹理常量
const GLenum NEAREST_MIPMAP_NEAREST = 0x2700;
const GLenum LINEAR_MIPMAP_NEAREST = 0x2701;
const GLenum NEAREST_MIPMAP_LINEAR = 0x2702;
const GLenum LINEAR_MIPMAP_LINEAR = 0x2703;
// texParameterf param 参数 当 pname = TEXTURE_WRAP_S | TEXTURE_WRAP_T
// texParameteri param 参数 当 pname = TEXTURE_WRAP_S | TEXTURE_WRAP_T
// 平铺式的重复纹理
const GLenum REPEAT = 0x2901;
// 镜像对称式的重复纹理
const GLenum CLAMP_TO_EDGE = 0x812F;
// 使用纹理图像的边缘值
const GLenum MIRRORED_REPEAT = 0x8370;
// texImage2D 的 internalformat 参数
const GLenum ALPHA = 0x1906;
const GLenum RGB = 0x1907;
const GLenum RGBA = 0x1908;
const GLenum LUMINANCE = 0x1909;
const GLenum LUMINANCE_ALPHA = 0x190A;
// texImage2D 的 type 参数
// 前文已定义
const GLenum UNSIGNED_BYTE;
// RGBA
const GLenum UNSIGNED_SHORT_4_4_4_4 = 0x8033;
// RGBA
const GLenum UNSIGNED_SHORT_5_5_5_1 = 0x8034;
// RGB
const GLenum UNSIGNED_SHORT_5_6_5 = 0x8363;
// 创建纹理对象以存储纹理图像
WebGLTexture? createTexture();
// 使用texture删除纹理对象
void deleteTexture(WebGLTexture? texture);
// 使用 pname 和 param 指定的方式加载得到的图像
// @param pname 见上面的枚举
// @param param 指定 非0为true、0为false 必须是整数
void pixelStorei(GLenum pname, GLint param);
// 激活纹理单元 参数是常量 gl.TEXTURE<I> 见上面枚举
void activeTexture(GLenum texture);
// 开启 texture 指定的纹理对象，并将其绑定到 target 上。
// 如果已经通过 gl.activeTexture 激活了某个纹理单元，则纹理对象也会绑定到这个纹理单元上
// @param target 绑定类型 TEXTURE_CUBE_MAP（立方体纹理） | TEXTURE_2D （平面纹理）
// @param texture 绑定的纹理单元
void bindTexture(GLenum target, WebGLTexture? texture);
// 配置纹理，将param值赋给绑定到目标的纹理对象的pname参数上
// @param target 同上
// @param pname 见上面枚举 纹理参数
// @param param 见上面枚举 纹理参数的值
void texParameterf(GLenum target, GLenum pname, GLfloat param);
void texParameteri(GLenum target, GLenum pname, GLint param);
// 将 source 指定的图像分配给绑定到目标上的纹理对象
// @param target 同上
// @param level 传入0 （该参数是为金字塔纹理准备的）
// @param internalformat 图像的内部格式 见上枚举
// @param format 纹理数据的格式 必须使用与 internalformat 相同的值
// @param type 纹理数据的类型
// @param source 包含纹理图像的Image对象
// May throw DOMException
void texImage2D(GLenum target, GLint level, GLint internalformat, GLenum format, GLenum type, TexImageSource source);
void texImage2D(GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);
// 最后指定纹理单元编号
// gl.uniform1i(sampler, 0);
function createTexture( type, target, count ) {
const data = new Uint8Array( 4 ); // 4 is required to match default unpack alignment of 4.
const texture = gl.createTexture();
gl.bindTexture( type, texture );
gl.texParameteri( type, 10241, 9728 );
gl.texParameteri( type, 10240, 9728 );
for ( let i = 0; i < count; i ++ ) {
gl.texImage2D( target + i, 0, 6408, 1, 1, 0, 6408, 5121, data );
}
return texture;
}
function initTexture( textureProperties, texture ) {
if ( textureProperties.__webglInit === undefined ) {
textureProperties.__webglInit = true;
texture.addEventListener( 'dispose', onTextureDispose );
textureProperties.__webglTexture = _gl.createTexture();
info.memory.textures ++;
}
}
function deallocateTexture( texture ) {
const textureProperties = properties.get( texture );
if ( textureProperties.__webglInit === undefined ) return;
_gl.deleteTexture( textureProperties.__webglTexture );
properties.remove( texture );
}
function deallocateRenderTarget( renderTarget ) {
const texture = renderTarget.texture;
const renderTargetProperties = properties.get( renderTarget );
const textureProperties = properties.get( texture );
if ( ! renderTarget ) return;
if ( textureProperties.__webglTexture !== undefined ) {
_gl.deleteTexture( textureProperties.__webglTexture );
}
if ( renderTarget.depthTexture ) {
renderTarget.depthTexture.dispose();
}
if ( renderTarget.isWebGLCubeRenderTarget ) {
for ( let i = 0; i < 6; i ++ ) {
_gl.deleteFramebuffer( renderTargetProperties.__webglFramebuffer[ i ] );
if ( renderTargetProperties.__webglDepthbuffer ) _gl.deleteRenderbuffer( renderTargetProperties.__webglDepthbuffer[ i ] );
}
} else {
_gl.deleteFramebuffer( renderTargetProperties.__webglFramebuffer );
if ( renderTargetProperties.__webglDepthbuffer ) _gl.deleteRenderbuffer( renderTargetProperties.__webglDepthbuffer );
if ( renderTargetProperties.__webglMultisampledFramebuffer ) _gl.deleteFramebuffer( renderTargetProperties.__webglMultisampledFramebuffer );
if ( renderTargetProperties.__webglColorRenderbuffer ) _gl.deleteRenderbuffer( renderTargetProperties.__webglColorRenderbuffer );
if ( renderTargetProperties.__webglDepthRenderbuffer ) _gl.deleteRenderbuffer( renderTargetProperties.__webglDepthRenderbuffer );
}
properties.remove( texture );
properties.remove( renderTarget );
}
function uploadTexture( textureProperties, texture, slot ) {
let textureType = 3553;
if ( texture.isDataTexture2DArray ) textureType = 35866;
if ( texture.isDataTexture3D ) textureType = 32879;
initTexture( textureProperties, texture );
state.activeTexture( 33984 + slot );
state.bindTexture( textureType, textureProperties.__webglTexture );
_gl.pixelStorei( 37440, texture.flipY );
_gl.pixelStorei( 37441, texture.premultiplyAlpha );
_gl.pixelStorei( 3317, texture.unpackAlignment );
_gl.pixelStorei( 37443, 0 );
const needsPowerOfTwo = textureNeedsPowerOfTwo( texture ) && isPowerOfTwo( texture.image ) === false;
const image = resizeImage( texture.image, needsPowerOfTwo, false, maxTextureSize );
const supportsMips = isPowerOfTwo( image ) || isWebGL2,
glFormat = utils.convert( texture.format );
let glType = utils.convert( texture.type ),
glInternalFormat = getInternalFormat( texture.internalFormat, glFormat, glType );
setTextureParameters( textureType, texture, supportsMips );
let mipmap;
const mipmaps = texture.mipmaps;
if ( texture.isDepthTexture ) {
// populate depth texture with dummy data
glInternalFormat = 6402;
if ( isWebGL2 ) {
if ( texture.type === FloatType ) {
glInternalFormat = 36012;
} else if ( texture.type === UnsignedIntType ) {
glInternalFormat = 33190;
} else if ( texture.type === UnsignedInt248Type ) {
glInternalFormat = 35056;
} else {
glInternalFormat = 33189; // WebGL2 requires sized internalformat for glTexImage2D
}
} else {
if ( texture.type === FloatType ) {
console.error( 'WebGLRenderer: Floating point depth texture requires WebGL2.' );
}
}
// validation checks for WebGL 1
if ( texture.format === DepthFormat && glInternalFormat === 6402 ) {
// The error INVALID_OPERATION is generated by texImage2D if format and internalformat are
// DEPTH_COMPONENT and type is not UNSIGNED_SHORT or UNSIGNED_INT
// (https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/)
if ( texture.type !== UnsignedShortType && texture.type !== UnsignedIntType ) {
console.warn( 'THREE.WebGLRenderer: Use UnsignedShortType or UnsignedIntType for DepthFormat DepthTexture.' );
texture.type = UnsignedShortType;
glType = utils.convert( texture.type );
}
}
if ( texture.format === DepthStencilFormat && glInternalFormat === 6402 ) {
// Depth stencil textures need the DEPTH_STENCIL internal format
// (https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/)
glInternalFormat = 34041;
// The error INVALID_OPERATION is generated by texImage2D if format and internalformat are
// DEPTH_STENCIL and type is not UNSIGNED_INT_24_8_WEBGL.
// (https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/)
if ( texture.type !== UnsignedInt248Type ) {
console.warn( 'THREE.WebGLRenderer: Use UnsignedInt248Type for DepthStencilFormat DepthTexture.' );
texture.type = UnsignedInt248Type;
glType = utils.convert( texture.type );
}
}
//
state.texImage2D( 3553, 0, glInternalFormat, image.width, image.height, 0, glFormat, glType, null );
} else if ( texture.isDataTexture ) {
// use manually created mipmaps if available
// if there are no manual mipmaps
// set 0 level mipmap and then use GL to generate other mipmap levels
if ( mipmaps.length > 0 && supportsMips ) {
for ( let i = 0, il = mipmaps.length; i < il; i ++ ) {
mipmap = mipmaps[ i ];
state.texImage2D( 3553, i, glInternalFormat, mipmap.width, mipmap.height, 0, glFormat, glType, mipmap.data );
}
texture.generateMipmaps = false;
textureProperties.__maxMipLevel = mipmaps.length - 1;
} else {
state.texImage2D( 3553, 0, glInternalFormat, image.width, image.height, 0, glFormat, glType, image.data );
textureProperties.__maxMipLevel = 0;
}
} else if ( texture.isCompressedTexture ) {
for ( let i = 0, il = mipmaps.length; i < il; i ++ ) {
mipmap = mipmaps[ i ];
if ( texture.format !== RGBAFormat && texture.format !== RGBFormat ) {
if ( glFormat !== null ) {
state.compressedTexImage2D( 3553, i, glInternalFormat, mipmap.width, mipmap.height, 0, mipmap.data );
} else {
console.warn( 'THREE.WebGLRenderer: Attempt to load unsupported compressed texture format in .uploadTexture()' );
}
} else {
state.texImage2D( 3553, i, glInternalFormat, mipmap.width, mipmap.height, 0, glFormat, glType, mipmap.data );
}
}
textureProperties.__maxMipLevel = mipmaps.length - 1;
} else if ( texture.isDataTexture2DArray ) {
state.texImage3D( 35866, 0, glInternalFormat, image.width, image.height, image.depth, 0, glFormat, glType, image.data );
textureProperties.__maxMipLevel = 0;
} else if ( texture.isDataTexture3D ) {
state.texImage3D( 32879, 0, glInternalFormat, image.width, image.height, image.depth, 0, glFormat, glType, image.data );
textureProperties.__maxMipLevel = 0;
} else {
// regular Texture (image, video, canvas)
// use manually created mipmaps if available
// if there are no manual mipmaps
// set 0 level mipmap and then use GL to generate other mipmap levels
if ( mipmaps.length > 0 && supportsMips ) {
for ( let i = 0, il = mipmaps.length; i < il; i ++ ) {
mipmap = mipmaps[ i ];
state.texImage2D( 3553, i, glInternalFormat, glFormat, glType, mipmap );
}
texture.generateMipmaps = false;
textureProperties.__maxMipLevel = mipmaps.length - 1;
} else {
state.texImage2D( 3553, 0, glInternalFormat, glFormat, glType, image );
textureProperties.__maxMipLevel = 0;
}
}
if ( textureNeedsGenerateMipmaps( texture, supportsMips ) ) {
generateMipmap( textureType, texture, image.width, image.height );
}
textureProperties.__version = texture.version;
if ( texture.onUpdate ) texture.onUpdate( texture );
}
function uploadCubeTexture( textureProperties, texture, slot ) {
if ( texture.image.length !== 6 ) return;
initTexture( textureProperties, texture );
state.activeTexture( 33984 + slot );
state.bindTexture( 34067, textureProperties.__webglTexture );
_gl.pixelStorei( 37440, texture.flipY );
_gl.pixelStorei( 37441, texture.premultiplyAlpha );
_gl.pixelStorei( 3317, texture.unpackAlignment );
_gl.pixelStorei( 37443, 0 );
const isCompressed = ( texture && ( texture.isCompressedTexture || texture.image[ 0 ].isCompressedTexture ) );
const isDataTexture = ( texture.image[ 0 ] && texture.image[ 0 ].isDataTexture );
const cubeImage = [];
for ( let i = 0; i < 6; i ++ ) {
if ( ! isCompressed && ! isDataTexture ) {
cubeImage[ i ] = resizeImage( texture.image[ i ], false, true, maxCubemapSize );
} else {
cubeImage[ i ] = isDataTexture ? texture.image[ i ].image : texture.image[ i ];
}
}
const image = cubeImage[ 0 ],
supportsMips = isPowerOfTwo( image ) || isWebGL2,
glFormat = utils.convert( texture.format ),
glType = utils.convert( texture.type ),
glInternalFormat = getInternalFormat( texture.internalFormat, glFormat, glType );
setTextureParameters( 34067, texture, supportsMips );
let mipmaps;
if ( isCompressed ) {
for ( let i = 0; i < 6; i ++ ) {
mipmaps = cubeImage[ i ].mipmaps;
for ( let j = 0; j < mipmaps.length; j ++ ) {
const mipmap = mipmaps[ j ];
if ( texture.format !== RGBAFormat && texture.format !== RGBFormat ) {
if ( glFormat !== null ) {
state.compressedTexImage2D( 34069 + i, j, glInternalFormat, mipmap.width, mipmap.height, 0, mipmap.data );
} else {
console.warn( 'THREE.WebGLRenderer: Attempt to load unsupported compressed texture format in .setTextureCube()' );
}
} else {
state.texImage2D( 34069 + i, j, glInternalFormat, mipmap.width, mipmap.height, 0, glFormat, glType, mipmap.data );
}
}
}
textureProperties.__maxMipLevel = mipmaps.length - 1;
} else {
mipmaps = texture.mipmaps;
for ( let i = 0; i < 6; i ++ ) {
if ( isDataTexture ) {
state.texImage2D( 34069 + i, 0, glInternalFormat, cubeImage[ i ].width, cubeImage[ i ].height, 0, glFormat, glType, cubeImage[ i ].data );
for ( let j = 0; j < mipmaps.length; j ++ ) {
const mipmap = mipmaps[ j ];
const mipmapImage = mipmap.image[ i ].image;
state.texImage2D( 34069 + i, j + 1, glInternalFormat, mipmapImage.width, mipmapImage.height, 0, glFormat, glType, mipmapImage.data );
}
} else {
state.texImage2D( 34069 + i, 0, glInternalFormat, glFormat, glType, cubeImage[ i ] );
for ( let j = 0; j < mipmaps.length; j ++ ) {
const mipmap = mipmaps[ j ];
state.texImage2D( 34069 + i, j + 1, glInternalFormat, glFormat, glType, mipmap.image[ i ] );
}
}
}
textureProperties.__maxMipLevel = mipmaps.length;
}
if ( textureNeedsGenerateMipmaps( texture, supportsMips ) ) {
// We assume images for cube map have the same size.
generateMipmap( 34067, texture, image.width, image.height );
}
textureProperties.__version = texture.version;
if ( texture.onUpdate ) texture.onUpdate( texture );
}
this.copyTextureToTexture = function ( position, srcTexture, dstTexture, level = 0 ) {
const width = srcTexture.image.width;
const height = srcTexture.image.height;
const glFormat = utils.convert( dstTexture.format );
const glType = utils.convert( dstTexture.type );
textures.setTexture2D( dstTexture, 0 );
// As another texture upload may have changed pixelStorei
// parameters, make sure they are correct for the dstTexture
_gl.pixelStorei( 37440, dstTexture.flipY );
_gl.pixelStorei( 37441, dstTexture.premultiplyAlpha );
_gl.pixelStorei( 3317, dstTexture.unpackAlignment );
if ( srcTexture.isDataTexture ) {
_gl.texSubImage2D( 3553, level, position.x, position.y, width, height, glFormat, glType, srcTexture.image.data );
} else {
if ( srcTexture.isCompressedTexture ) {
_gl.compressedTexSubImage2D( 3553, level, position.x, position.y, srcTexture.mipmaps[ 0 ].width, srcTexture.mipmaps[ 0 ].height, glFormat, srcTexture.mipmaps[ 0 ].data );
} else {
_gl.texSubImage2D( 3553, level, position.x, position.y, glFormat, glType, srcTexture.image );
}
}
// Generate mipmaps only when copying level 0
if ( level === 0 && dstTexture.generateMipmaps ) _gl.generateMipmap( 3553 );
state.unbindTexture();
};
this.copyTextureToTexture3D = function ( sourceBox, position, srcTexture, dstTexture, level = 0 ) {
if ( _this.isWebGL1Renderer ) {
console.warn( 'THREE.WebGLRenderer.copyTextureToTexture3D: can only be used with WebGL2.' );
return;
}
const { width, height, data } = srcTexture.image;
const glFormat = utils.convert( dstTexture.format );
const glType = utils.convert( dstTexture.type );
let glTarget;
if ( dstTexture.isDataTexture3D ) {
textures.setTexture3D( dstTexture, 0 );
glTarget = 32879;
} else if ( dstTexture.isDataTexture2DArray ) {
textures.setTexture2DArray( dstTexture, 0 );
glTarget = 35866;
} else {
console.warn( 'THREE.WebGLRenderer.copyTextureToTexture3D: only supports THREE.DataTexture3D and THREE.DataTexture2DArray.' );
return;
}
_gl.pixelStorei( 37440, dstTexture.flipY );
_gl.pixelStorei( 37441, dstTexture.premultiplyAlpha );
_gl.pixelStorei( 3317, dstTexture.unpackAlignment );
const unpackRowLen = _gl.getParameter( 3314 );
const unpackImageHeight = _gl.getParameter( 32878 );
const unpackSkipPixels = _gl.getParameter( 3316 );
const unpackSkipRows = _gl.getParameter( 3315 );
const unpackSkipImages = _gl.getParameter( 32877 );
_gl.pixelStorei( 3314, width );
_gl.pixelStorei( 32878, height );
_gl.pixelStorei( 3316, sourceBox.min.x );
_gl.pixelStorei( 3315, sourceBox.min.y );
_gl.pixelStorei( 32877, sourceBox.min.z );
_gl.texSubImage3D(
glTarget,
level,
position.x,
position.y,
position.z,
sourceBox.max.x - sourceBox.min.x + 1,
sourceBox.max.y - sourceBox.min.y + 1,
sourceBox.max.z - sourceBox.min.z + 1,
glFormat,
glType,
data
);
_gl.pixelStorei( 3314, unpackRowLen );
_gl.pixelStorei( 32878, unpackImageHeight );
_gl.pixelStorei( 3316, unpackSkipPixels );
_gl.pixelStorei( 3315, unpackSkipRows );
_gl.pixelStorei( 32877, unpackSkipImages );
// Generate mipmaps only when copying level 0
if ( level === 0 && dstTexture.generateMipmaps ) _gl.generateMipmap( glTarget );
state.unbindTexture();
};
function activeTexture( webglSlot ) {
if ( webglSlot === undefined ) webglSlot = 33984 + maxTextures - 1;
if ( currentTextureSlot !== webglSlot ) {
gl.activeTexture( webglSlot );
currentTextureSlot = webglSlot;
}
}
function reset() {
// reset state
gl.disable( 3042 );
gl.disable( 2884 );
gl.disable( 2929 );
gl.disable( 32823 );
gl.disable( 3089 );
gl.disable( 2960 );
gl.blendEquation( 32774 );
gl.blendFunc( 1, 0 );
gl.blendFuncSeparate( 1, 0, 1, 0 );
gl.colorMask( true, true, true, true );
gl.clearColor( 0, 0, 0, 0 );
gl.depthMask( true );
gl.depthFunc( 513 );
gl.clearDepth( 1 );
gl.stencilMask( 0xffffffff );
gl.stencilFunc( 519, 0, 0xffffffff );
gl.stencilOp( 7680, 7680, 7680 );
gl.clearStencil( 0 );
gl.cullFace( 1029 );
gl.frontFace( 2305 );
gl.polygonOffset( 0, 0 );
gl.activeTexture( 33984 );
gl.useProgram( null );
gl.lineWidth( 1 );
gl.scissor( 0, 0, gl.canvas.width, gl.canvas.height );
gl.viewport( 0, 0, gl.canvas.width, gl.canvas.height );
// reset internals
enabledCapabilities = {};
currentTextureSlot = null;
currentBoundTextures = {};
currentProgram = null;
currentBlendingEnabled = false;
currentBlending = null;
currentBlendEquation = null;
currentBlendSrc = null;
currentBlendDst = null;
currentBlendEquationAlpha = null;
currentBlendSrcAlpha = null;
currentBlendDstAlpha = null;
currentPremultipledAlpha = false;
currentFlipSided = null;
currentCullFace = null;
currentLineWidth = null;
currentPolygonOffsetFactor = null;
currentPolygonOffsetUnits = null;
colorBuffer.reset();
depthBuffer.reset();
stencilBuffer.reset();
}
function createTexture( type, target, count ) {
const data = new Uint8Array( 4 ); // 4 is required to match default unpack alignment of 4.
const texture = gl.createTexture();
gl.bindTexture( type, texture );
gl.texParameteri( type, 10241, 9728 );
gl.texParameteri( type, 10240, 9728 );
for ( let i = 0; i < count; i ++ ) {
gl.texImage2D( target + i, 0, 6408, 1, 1, 0, 6408, 5121, data );
}
return texture;
}
function bindTexture( webglType, webglTexture ) {
if ( currentTextureSlot === null ) {
activeTexture();
}
let boundTexture = currentBoundTextures[ currentTextureSlot ];
if ( boundTexture === undefined ) {
boundTexture = { type: undefined, texture: undefined };
currentBoundTextures[ currentTextureSlot ] = boundTexture;
}
if ( boundTexture.type !== webglType || boundTexture.texture !== webglTexture ) {
gl.bindTexture( webglType, webglTexture || emptyTextures[ webglType ] );
boundTexture.type = webglType;
boundTexture.texture = webglTexture;
}
}
function unbindTexture() {
const boundTexture = currentBoundTextures[ currentTextureSlot ];
if ( boundTexture !== undefined && boundTexture.type !== undefined ) {
gl.bindTexture( boundTexture.type, null );
boundTexture.type = undefined;
boundTexture.texture = undefined;
}
}
function setTextureParameters( textureType, texture, supportsMips ) {
if ( supportsMips ) {
_gl.texParameteri( textureType, 10242, wrappingToGL[ texture.wrapS ] );
_gl.texParameteri( textureType, 10243, wrappingToGL[ texture.wrapT ] );
if ( textureType === 32879 || textureType === 35866 ) {
_gl.texParameteri( textureType, 32882, wrappingToGL[ texture.wrapR ] );
}
_gl.texParameteri( textureType, 10240, filterToGL[ texture.magFilter ] );
_gl.texParameteri( textureType, 10241, filterToGL[ texture.minFilter ] );
} else {
_gl.texParameteri( textureType, 10242, 33071 );
_gl.texParameteri( textureType, 10243, 33071 );
if ( textureType === 32879 || textureType === 35866 ) {
_gl.texParameteri( textureType, 32882, 33071 );
}
if ( texture.wrapS !== ClampToEdgeWrapping || texture.wrapT !== ClampToEdgeWrapping ) {
console.warn( 'THREE.WebGLRenderer: Texture is not power of two. Texture.wrapS and Texture.wrapT should be set to THREE.ClampToEdgeWrapping.' );
}
_gl.texParameteri( textureType, 10240, filterFallback( texture.magFilter ) );
_gl.texParameteri( textureType, 10241, filterFallback( texture.minFilter ) );
if ( texture.minFilter !== NearestFilter && texture.minFilter !== LinearFilter ) {
console.warn( 'THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter.' );
}
}
if ( extensions.has( 'EXT_texture_filter_anisotropic' ) === true ) {
const extension = extensions.get( 'EXT_texture_filter_anisotropic' );
if ( texture.type === FloatType && extensions.has( 'OES_texture_float_linear' ) === false ) return; // verify extension for WebGL 1 and WebGL 2
if ( isWebGL2 === false && ( texture.type === HalfFloatType && extensions.has( 'OES_texture_half_float_linear' ) === false ) ) return; // verify extension for WebGL 1 only
if ( texture.anisotropy > 1 || properties.get( texture ).__currentAnisotropy ) {
_gl.texParameterf( textureType, extension.TEXTURE_MAX_ANISOTROPY_EXT, Math.min( texture.anisotropy, capabilities.getMaxAnisotropy() ) );
properties.get( texture ).__currentAnisotropy = texture.anisotropy;
}
}
}
#启用功能
// enable disable 的 cap 参数
const GLenum CULL_FACE = 0x0B44;
// 混合
const GLenum BLEND = 0x0BE2;
const GLenum DITHER = 0x0BD0;
const GLenum STENCIL_TEST = 0x0B90;
// 隐藏面消除
const GLenum DEPTH_TEST = 0x0B71;
const GLenum SCISSOR_TEST = 0x0C11;
// 多边形位移 （解决深度冲突问题）
const GLenum POLYGON_OFFSET_FILL = 0x8037;
const GLenum SAMPLE_ALPHA_TO_COVERAGE = 0x809E;
const GLenum SAMPLE_COVERAGE = 0x80A0;
// 启用功能
void enable(GLenum cap);
// 关闭功能
void disable(GLenum cap);
// 解决深度冲突
// gl.enable(POLYGON_OFFSET_FILL);
// 指定加到每个顶点绘制后Z值上的偏移量，偏移量按照公式 m * factor + r * units 计算，其中m代表顶点所在表面
// 相对于观察者的实现角度，而r表示硬件能够区分两个Z值之差的最小值
void polygonOffset(GLfloat factor, GLfloat units);
// 虽然上面的方法可以使用，但是在渲染器中用起来还是很麻烦的。
// 解决深度冲突有更好的方式，就是缩小远近裁剪面的距离
function enable( id ) {
if ( enabledCapabilities[ id ] !== true ) {
gl.enable( id );
enabledCapabilities[ id ] = true;
}
}
function disable( id ) {
if ( enabledCapabilities[ id ] !== false ) {
gl.disable( id );
enabledCapabilities[ id ] = false;
}
}
function setPolygonOffset( polygonOffset, factor, units ) {
if ( polygonOffset ) {
enable( 32823 );
if ( currentPolygonOffsetFactor !== factor || currentPolygonOffsetUnits !== units ) {
gl.polygonOffset( factor, units );
currentPolygonOffsetFactor = factor;
currentPolygonOffsetUnits = units;
}
} else {
disable( 32823 );
}
}
#着色器相关
// createShader 的 type 参数
const GLenum FRAGMENT_SHADER = 0x8B30;
const GLenum VERTEX_SHADER = 0x8B31;
// getShaderParameter 的 pname 参数
const GLenum SHADER_TYPE = 0x8B4F;
const GLenum DELETE_STATUS = 0x8B80;
const GLenum COMPILE_STATUS = 0x8B81;
// 创建由type指定的着色器对象
// @param type 见上枚举
WebGLShader? createShader(GLenum type);
// 删除 shader 指定的着色器对象
void deleteShader(WebGLShader? shader);
// 将 source 指定的字符串形式的代码传入shader指定的着色器 如果之前已经向shader传入了代码 旧的代码就会被替换掉
void shaderSource(WebGLShader shader, DOMString source);
// 编译 shader 指定的着色器中的源代码
void compileShader(WebGLShader shader);
// 获取 shader 指定的着色器中 pname 指定的参数信息
// @param pname 见上枚举
any getShaderParameter(WebGLShader shader, GLenum pname);
// 如果 getShaderParameter(shader, COMPILE_STATUS) 返回false
// 则可以通过 此函数获取 指定shader 的信息日志
DOMString? getShaderInfoLog(WebGLShader shader);
function WebGLShader( gl, type, string ) {
const shader = gl.createShader( type );
gl.shaderSource( shader, string );
gl.compileShader( shader );
return shader;
}
function getShaderErrors( gl, shader, type ) {
const status = gl.getShaderParameter( shader, 35713 );
const log = gl.getShaderInfoLog( shader ).trim();
if ( status && log === '' ) return '';
// --enable-privileged-webgl-extension
// console.log( '**' + type + '**', gl.getExtension( 'WEBGL_debug_shaders' ).getTranslatedShaderSource( shader ) );
const source = gl.getShaderSource( shader );
return 'THREE.WebGLShader: gl.getShaderInfoLog() ' + type + '\n' + log + addLineNumbers( source );
}
着色器程序相关
// getProgramParameter 的 pname 参数
// 着色器相关 章节已定义
const GLenum DELETE_STATUS;
const GLenum LINK_STATUS = 0x8B82;
const GLenum VALIDATE_STATUS = 0x8B83;
const GLenum ATTACHED_SHADERS = 0x8B85;
const GLenum ACTIVE_UNIFORMS = 0x8B86;
const GLenum ACTIVE_ATTRIBUTES = 0x8B89;
// 创建着色器程序对象
WebGLProgram? createProgram();
// 删除着色器程序对象
void deleteProgram(WebGLProgram? program);
// 将 shader 指定的着色器对象分配给 program 指定的程序对象
void attachShader(WebGLProgram program, WebGLShader shader);
// 取消 shader 指定的着色器对 program 对象的分配
void detachShader(WebGLProgram program, WebGLShader shader);
// 连接 program 指定的程序对象中的着色器
// 目的：
// 1. 保证顶点着色器 和 片元着色器的varying变量同名同类型，且一一对应
// 2. 保证顶点着色器对每个varying变量赋了值
// 3. 保证顶点着色器 和 片元着色器中的同名 uniform 变量也是同类型的 无需一一对应
// 4. 保证着色器中的attribute、uniform、varying变量的个数没有超过着色器上限
void linkProgram(WebGLProgram program);
// 获取 program 指定的程序对象中 pname 指定的参数信息
// @param pname 见上枚举
any getProgramParameter(WebGLProgram program, GLenum pname);
// 如果通过 getProgramParameter(LINK_STATUS) 获得返回值 为 false
// 可以通过 此函数获取 program 指定的程序对象的信息日志
DOMString? getProgramInfoLog(WebGLProgram program);
// 验证 WebGLProgram
void validateProgram(WebGLProgram program);
// 告知 WEBGL 系统绘制时使用的 program 对象
void useProgram(WebGLProgram? program);
function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
const gl = renderer.getContext();
const defines = parameters.defines;
let vertexShader = parameters.vertexShader;
let fragmentShader = parameters.fragmentShader;
const shadowMapTypeDefine = generateShadowMapTypeDefine( parameters );
const envMapTypeDefine = generateEnvMapTypeDefine( parameters );
const envMapModeDefine = generateEnvMapModeDefine( parameters );
const envMapBlendingDefine = generateEnvMapBlendingDefine( parameters );
const gammaFactorDefine = ( renderer.gammaFactor > 0 ) ? renderer.gammaFactor : 1.0;
const customExtensions = parameters.isWebGL2 ? '' : generateExtensions( parameters );
const customDefines = generateDefines( defines );
const program = gl.createProgram();
let prefixVertex, prefixFragment;
let versionString = parameters.glslVersion ? '#version ' + parameters.glslVersion + '\n' : '';
if ( parameters.isRawShaderMaterial ) {
prefixVertex = [
customDefines
].filter( filterEmptyLine ).join( '\n' );
if ( prefixVertex.length > 0 ) {
prefixVertex += '\n';
}
prefixFragment = [
customExtensions,
customDefines
].filter( filterEmptyLine ).join( '\n' );
if ( prefixFragment.length > 0 ) {
prefixFragment += '\n';
}
} else {
prefixVertex = [
generatePrecision( parameters ),
'#define SHADER_NAME ' + parameters.shaderName,
customDefines,
parameters.instancing ? '#define USE_INSTANCING' : '',
parameters.instancingColor ? '#define USE_INSTANCING_COLOR' : '',
parameters.supportsVertexTextures ? '#define VERTEX_TEXTURES' : '',
'#define GAMMA_FACTOR ' + gammaFactorDefine,
'#define MAX_BONES ' + parameters.maxBones,
( parameters.useFog && parameters.fog ) ? '#define USE_FOG' : '',
( parameters.useFog && parameters.fogExp2 ) ? '#define FOG_EXP2' : '',
parameters.map ? '#define USE_MAP' : '',
parameters.envMap ? '#define USE_ENVMAP' : '',
parameters.envMap ? '#define ' + envMapModeDefine : '',
parameters.lightMap ? '#define USE_LIGHTMAP' : '',
parameters.aoMap ? '#define USE_AOMAP' : '',
parameters.emissiveMap ? '#define USE_EMISSIVEMAP' : '',
parameters.bumpMap ? '#define USE_BUMPMAP' : '',
parameters.normalMap ? '#define USE_NORMALMAP' : '',
( parameters.normalMap && parameters.objectSpaceNormalMap ) ? '#define OBJECTSPACE_NORMALMAP' : '',
( parameters.normalMap && parameters.tangentSpaceNormalMap ) ? '#define TANGENTSPACE_NORMALMAP' : '',
parameters.clearcoatMap ? '#define USE_CLEARCOATMAP' : '',
parameters.clearcoatRoughnessMap ? '#define USE_CLEARCOAT_ROUGHNESSMAP' : '',
parameters.clearcoatNormalMap ? '#define USE_CLEARCOAT_NORMALMAP' : '',
parameters.displacementMap && parameters.supportsVertexTextures ? '#define USE_DISPLACEMENTMAP' : '',
parameters.specularMap ? '#define USE_SPECULARMAP' : '',
parameters.roughnessMap ? '#define USE_ROUGHNESSMAP' : '',
parameters.metalnessMap ? '#define USE_METALNESSMAP' : '',
parameters.alphaMap ? '#define USE_ALPHAMAP' : '',
parameters.transmissionMap ? '#define USE_TRANSMISSIONMAP' : '',
parameters.vertexTangents ? '#define USE_TANGENT' : '',
parameters.vertexColors ? '#define USE_COLOR' : '',
parameters.vertexUvs ? '#define USE_UV' : '',
parameters.uvsVertexOnly ? '#define UVS_VERTEX_ONLY' : '',
parameters.flatShading ? '#define FLAT_SHADED' : '',
parameters.skinning ? '#define USE_SKINNING' : '',
parameters.useVertexTexture ? '#define BONE_TEXTURE' : '',
parameters.morphTargets ? '#define USE_MORPHTARGETS' : '',
parameters.morphNormals && parameters.flatShading === false ? '#define USE_MORPHNORMALS' : '',
parameters.doubleSided ? '#define DOUBLE_SIDED' : '',
parameters.flipSided ? '#define FLIP_SIDED' : '',
parameters.shadowMapEnabled ? '#define USE_SHADOWMAP' : '',
parameters.shadowMapEnabled ? '#define ' + shadowMapTypeDefine : '',
parameters.sizeAttenuation ? '#define USE_SIZEATTENUATION' : '',
parameters.logarithmicDepthBuffer ? '#define USE_LOGDEPTHBUF' : '',
( parameters.logarithmicDepthBuffer && parameters.rendererExtensionFragDepth ) ? '#define USE_LOGDEPTHBUF_EXT' : '',
'uniform mat4 modelMatrix;',
'uniform mat4 modelViewMatrix;',
'uniform mat4 projectionMatrix;',
'uniform mat4 viewMatrix;',
'uniform mat3 normalMatrix;',
'uniform vec3 cameraPosition;',
'uniform bool isOrthographic;',
'#ifdef USE_INSTANCING',
' attribute mat4 instanceMatrix;',
'#endif',
'#ifdef USE_INSTANCING_COLOR',
' attribute vec3 instanceColor;',
'#endif',
'attribute vec3 position;',
'attribute vec3 normal;',
'attribute vec2 uv;',
'#ifdef USE_TANGENT',
' attribute vec4 tangent;',
'#endif',
'#ifdef USE_COLOR',
' attribute vec3 color;',
'#endif',
'#ifdef USE_MORPHTARGETS',
' attribute vec3 morphTarget0;',
' attribute vec3 morphTarget1;',
' attribute vec3 morphTarget2;',
' attribute vec3 morphTarget3;',
' #ifdef USE_MORPHNORMALS',
' attribute vec3 morphNormal0;',
' attribute vec3 morphNormal1;',
' attribute vec3 morphNormal2;',
' attribute vec3 morphNormal3;',
' #else',
' attribute vec3 morphTarget4;',
' attribute vec3 morphTarget5;',
' attribute vec3 morphTarget6;',
' attribute vec3 morphTarget7;',
' #endif',
'#endif',
'#ifdef USE_SKINNING',
' attribute vec4 skinIndex;',
' attribute vec4 skinWeight;',
'#endif',
'\n'
].filter( filterEmptyLine ).join( '\n' );
prefixFragment = [
customExtensions,
generatePrecision( parameters ),
'#define SHADER_NAME ' + parameters.shaderName,
customDefines,
parameters.alphaTest ? '#define ALPHATEST ' + parameters.alphaTest + ( parameters.alphaTest % 1 ? '' : '.0' ) : '', // add '.0' if integer
'#define GAMMA_FACTOR ' + gammaFactorDefine,
( parameters.useFog && parameters.fog ) ? '#define USE_FOG' : '',
( parameters.useFog && parameters.fogExp2 ) ? '#define FOG_EXP2' : '',
parameters.map ? '#define USE_MAP' : '',
parameters.matcap ? '#define USE_MATCAP' : '',
parameters.envMap ? '#define USE_ENVMAP' : '',
parameters.envMap ? '#define ' + envMapTypeDefine : '',
parameters.envMap ? '#define ' + envMapModeDefine : '',
parameters.envMap ? '#define ' + envMapBlendingDefine : '',
parameters.lightMap ? '#define USE_LIGHTMAP' : '',
parameters.aoMap ? '#define USE_AOMAP' : '',
parameters.emissiveMap ? '#define USE_EMISSIVEMAP' : '',
parameters.bumpMap ? '#define USE_BUMPMAP' : '',
parameters.normalMap ? '#define USE_NORMALMAP' : '',
( parameters.normalMap && parameters.objectSpaceNormalMap ) ? '#define OBJECTSPACE_NORMALMAP' : '',
( parameters.normalMap && parameters.tangentSpaceNormalMap ) ? '#define TANGENTSPACE_NORMALMAP' : '',
parameters.clearcoatMap ? '#define USE_CLEARCOATMAP' : '',
parameters.clearcoatRoughnessMap ? '#define USE_CLEARCOAT_ROUGHNESSMAP' : '',
parameters.clearcoatNormalMap ? '#define USE_CLEARCOAT_NORMALMAP' : '',
parameters.specularMap ? '#define USE_SPECULARMAP' : '',
parameters.roughnessMap ? '#define USE_ROUGHNESSMAP' : '',
parameters.metalnessMap ? '#define USE_METALNESSMAP' : '',
parameters.alphaMap ? '#define USE_ALPHAMAP' : '',
parameters.sheen ? '#define USE_SHEEN' : '',
parameters.transmissionMap ? '#define USE_TRANSMISSIONMAP' : '',
parameters.vertexTangents ? '#define USE_TANGENT' : '',
parameters.vertexColors || parameters.instancingColor ? '#define USE_COLOR' : '',
parameters.vertexUvs ? '#define USE_UV' : '',
parameters.uvsVertexOnly ? '#define UVS_VERTEX_ONLY' : '',
parameters.gradientMap ? '#define USE_GRADIENTMAP' : '',
parameters.flatShading ? '#define FLAT_SHADED' : '',
parameters.doubleSided ? '#define DOUBLE_SIDED' : '',
parameters.flipSided ? '#define FLIP_SIDED' : '',
parameters.shadowMapEnabled ? '#define USE_SHADOWMAP' : '',
parameters.shadowMapEnabled ? '#define ' + shadowMapTypeDefine : '',
parameters.premultipliedAlpha ? '#define PREMULTIPLIED_ALPHA' : '',
parameters.physicallyCorrectLights ? '#define PHYSICALLY_CORRECT_LIGHTS' : '',
parameters.logarithmicDepthBuffer ? '#define USE_LOGDEPTHBUF' : '',
( parameters.logarithmicDepthBuffer && parameters.rendererExtensionFragDepth ) ? '#define USE_LOGDEPTHBUF_EXT' : '',
( ( parameters.extensionShaderTextureLOD || parameters.envMap ) && parameters.rendererExtensionShaderTextureLod ) ? '#define TEXTURE_LOD_EXT' : '',
'uniform mat4 viewMatrix;',
'uniform vec3 cameraPosition;',
'uniform bool isOrthographic;',
( parameters.toneMapping !== NoToneMapping ) ? '#define TONE_MAPPING' : '',
( parameters.toneMapping !== NoToneMapping ) ? ShaderChunk[ 'tonemapping_pars_fragment' ] : '', // this code is required here because it is used by the toneMapping() function defined below
( parameters.toneMapping !== NoToneMapping ) ? getToneMappingFunction( 'toneMapping', parameters.toneMapping ) : '',
parameters.dithering ? '#define DITHERING' : '',
ShaderChunk[ 'encodings_pars_fragment' ], // this code is required here because it is used by the various encoding/decoding function defined below
parameters.map ? getTexelDecodingFunction( 'mapTexelToLinear', parameters.mapEncoding ) : '',
parameters.matcap ? getTexelDecodingFunction( 'matcapTexelToLinear', parameters.matcapEncoding ) : '',
parameters.envMap ? getTexelDecodingFunction( 'envMapTexelToLinear', parameters.envMapEncoding ) : '',
parameters.emissiveMap ? getTexelDecodingFunction( 'emissiveMapTexelToLinear', parameters.emissiveMapEncoding ) : '',
parameters.lightMap ? getTexelDecodingFunction( 'lightMapTexelToLinear', parameters.lightMapEncoding ) : '',
getTexelEncodingFunction( 'linearToOutputTexel', parameters.outputEncoding ),
parameters.depthPacking ? '#define DEPTH_PACKING ' + parameters.depthPacking : '',
'\n'
].filter( filterEmptyLine ).join( '\n' );
}
vertexShader = resolveIncludes( vertexShader );
vertexShader = replaceLightNums( vertexShader, parameters );
vertexShader = replaceClippingPlaneNums( vertexShader, parameters );
fragmentShader = resolveIncludes( fragmentShader );
fragmentShader = replaceLightNums( fragmentShader, parameters );
fragmentShader = replaceClippingPlaneNums( fragmentShader, parameters );
vertexShader = unrollLoops( vertexShader );
fragmentShader = unrollLoops( fragmentShader );
if ( parameters.isWebGL2 && parameters.isRawShaderMaterial !== true ) {
// GLSL 3.0 conversion for built-in materials and ShaderMaterial
versionString = '#version 300 es\n';
prefixVertex = [
'#define attribute in',
'#define varying out',
'#define texture2D texture'
].join( '\n' ) + '\n' + prefixVertex;
prefixFragment = [
'#define varying in',
( parameters.glslVersion === GLSL3 ) ? '' : 'out highp vec4 pc_fragColor;',
( parameters.glslVersion === GLSL3 ) ? '' : '#define gl_FragColor pc_fragColor',
'#define gl_FragDepthEXT gl_FragDepth',
'#define texture2D texture',
'#define textureCube texture',
'#define texture2DProj textureProj',
'#define texture2DLodEXT textureLod',
'#define texture2DProjLodEXT textureProjLod',
'#define textureCubeLodEXT textureLod',
'#define texture2DGradEXT textureGrad',
'#define texture2DProjGradEXT textureProjGrad',
'#define textureCubeGradEXT textureGrad'
].join( '\n' ) + '\n' + prefixFragment;
}
const vertexGlsl = versionString + prefixVertex + vertexShader;
const fragmentGlsl = versionString + prefixFragment + fragmentShader;
// console.log( '*VERTEX*', vertexGlsl );
// console.log( '*FRAGMENT*', fragmentGlsl );
const glVertexShader = WebGLShader( gl, 35633, vertexGlsl );
const glFragmentShader = WebGLShader( gl, 35632, fragmentGlsl );
gl.attachShader( program, glVertexShader );
gl.attachShader( program, glFragmentShader );
// Force a particular attribute to index 0.
if ( parameters.index0AttributeName !== undefined ) {
gl.bindAttribLocation( program, 0, parameters.index0AttributeName );
} else if ( parameters.morphTargets === true ) {
// programs with morphTargets displace position out of attribute 0
gl.bindAttribLocation( program, 0, 'position' );
}
gl.linkProgram( program );
// check for link errors
if ( renderer.debug.checkShaderErrors ) {
const programLog = gl.getProgramInfoLog( program ).trim();
const vertexLog = gl.getShaderInfoLog( glVertexShader ).trim();
const fragmentLog = gl.getShaderInfoLog( glFragmentShader ).trim();
let runnable = true;
let haveDiagnostics = true;
if ( gl.getProgramParameter( program, 35714 ) === false ) {
runnable = false;
const vertexErrors = getShaderErrors( gl, glVertexShader, 'vertex' );
const fragmentErrors = getShaderErrors( gl, glFragmentShader, 'fragment' );
console.error( 'THREE.WebGLProgram: shader error: ', gl.getError(), '35715', gl.getProgramParameter( program, 35715 ), 'gl.getProgramInfoLog', programLog, vertexErrors, fragmentErrors );
} else if ( programLog !== '' ) {
console.warn( 'THREE.WebGLProgram: gl.getProgramInfoLog()', programLog );
} else if ( vertexLog === '' || fragmentLog === '' ) {
haveDiagnostics = false;
}
if ( haveDiagnostics ) {
this.diagnostics = {
runnable: runnable,
programLog: programLog,
vertexShader: {
log: vertexLog,
prefix: prefixVertex
},
fragmentShader: {
log: fragmentLog,
prefix: prefixFragment
}
};
}
}
// Clean up
// Crashes in iOS9 and iOS10. #18402
// gl.detachShader( program, glVertexShader );
// gl.detachShader( program, glFragmentShader );
gl.deleteShader( glVertexShader );
gl.deleteShader( glFragmentShader );
// set up caching for uniform locations
let cachedUniforms;
this.getUniforms = function () {
if ( cachedUniforms === undefined ) {
cachedUniforms = new WebGLUniforms( gl, program );
}
return cachedUniforms;
};
// set up caching for attribute locations
let cachedAttributes;
this.getAttributes = function () {
if ( cachedAttributes === undefined ) {
cachedAttributes = fetchAttributeLocations( gl, program );
}
return cachedAttributes;
};
// free resource
this.destroy = function () {
bindingStates.releaseStatesOfProgram( this );
gl.deleteProgram( program );
this.program = undefined;
};
//
this.name = parameters.shaderName;
this.id = programIdCount ++;
this.cacheKey = cacheKey;
this.usedTimes = 1;
this.program = program;
this.vertexShader = glVertexShader;
this.fragmentShader = glFragmentShader;
return this;
}
function useProgram( program ) {
if ( currentProgram !== program ) {
gl.useProgram( program );
currentProgram = program;
return true;
}
return false;
}
#扩展
// 获取扩展
object? getExtension(DOMString name);
// 获取扩展支持信息
sequence<DOMString>? getSupportedExtensions();
function WebGLExtensions( gl ) {
const extensions = {};
function getExtension( name ) {
if ( extensions[ name ] !== undefined ) {
return extensions[ name ];
}
let extension;
switch ( name ) {
case 'WEBGL_depth_texture':
extension = gl.getExtension( 'WEBGL_depth_texture' ) || gl.getExtension( 'MOZ_WEBGL_depth_texture' ) || gl.getExtension( 'WEBKIT_WEBGL_depth_texture' );
break;
case 'EXT_texture_filter_anisotropic':
extension = gl.getExtension( 'EXT_texture_filter_anisotropic' ) || gl.getExtension( 'MOZ_EXT_texture_filter_anisotropic' ) || gl.getExtension( 'WEBKIT_EXT_texture_filter_anisotropic' );
break;
case 'WEBGL_compressed_texture_s3tc':
extension = gl.getExtension( 'WEBGL_compressed_texture_s3tc' ) || gl.getExtension( 'MOZ_WEBGL_compressed_texture_s3tc' ) || gl.getExtension( 'WEBKIT_WEBGL_compressed_texture_s3tc' );
break;
case 'WEBGL_compressed_texture_pvrtc':
extension = gl.getExtension( 'WEBGL_compressed_texture_pvrtc' ) || gl.getExtension( 'WEBKIT_WEBGL_compressed_texture_pvrtc' );
break;
default:
extension = gl.getExtension( name );
}
extensions[ name ] = extension;
return extension;
}
return {
has: function ( name ) {
return getExtension( name ) !== null;
},
init: function ( capabilities ) {
if ( capabilities.isWebGL2 ) {
getExtension( 'EXT_color_buffer_float' );
} else {
getExtension( 'WEBGL_depth_texture' );
getExtension( 'OES_texture_float' );
getExtension( 'OES_texture_half_float' );
getExtension( 'OES_texture_half_float_linear' );
getExtension( 'OES_standard_derivatives' );
getExtension( 'OES_element_index_uint' );
getExtension( 'OES_vertex_array_object' );
getExtension( 'ANGLE_instanced_arrays' );
}
getExtension( 'OES_texture_float_linear' );
getExtension( 'EXT_color_buffer_half_float' );
},
get: function ( name ) {
const extension = getExtension( name );
if ( extension === null ) {
console.warn( 'THREE.WebGLRenderer: ' + name + ' extension not supported.' );
}
return extension;
}
};
}
#查询状态参数
// 获取当前激活的材质枚举值 getParameter
const GLenum ACTIVE_TEXTURE = 0x84E0;
// 获取材质最大支持数量 getParameter
const GLenum MAX_COMBINED_TEXTURE_IMAGE_UNITS = 0x8B4D;
const GLenum MAX_VERTEX_ATTRIBS = 0x8869;
const GLenum MAX_VERTEX_UNIFORM_VECTORS = 0x8DFB;
const GLenum MAX_VARYING_VECTORS = 0x8DFC;
const GLenum MAX_VERTEX_TEXTURE_IMAGE_UNITS = 0x8B4C;
const GLenum MAX_TEXTURE_IMAGE_UNITS = 0x8872;
const GLenum MAX_FRAGMENT_UNIFORM_VECTORS = 0x8DFD;
const GLenum SHADING_LANGUAGE_VERSION = 0x8B8C;
const GLenum CURRENT_PROGRAM = 0x8B8D;
// 获取混合方程
const GLenum BLEND_EQUATION = 0x8009;
const GLenum BLEND_EQUATION_RGB = 0x8009; /* same as BLEND_EQUATION */
const GLenum BLEND_EQUATION_ALPHA = 0x883D;
// 面消除查询
const GLenum CULL_FACE_MODE = 0x0B45;
// 通过查询参数获取值
any getParameter(GLenum pname);
any getTexParameter(GLenum target, GLenum pname);
// 查询着色器相关参数
any getShaderParameter(WebGLShader shader, GLenum pname);
// 查询着色器程序相关参数
any getProgramParameter(WebGLProgram program, GLenum pname);
function WebGLUniforms( gl, program ) {
this.seq = [];
this.map = {};
const n = gl.getProgramParameter( program, 35718 );
for ( let i = 0; i < n; ++ i ) {
const info = gl.getActiveUniform( program, i ),
addr = gl.getUniformLocation( program, info.name );
parseUniform( info, addr, this );
}
}
#其他方法
// 从颜色缓冲区中读取 x y width height 参数确定的矩形块中的所有像素值 并保存在pixels指定的数组中
// @param x y 选择矩形区域左上角坐标
// @param width height 选择矩形区域的宽 长
// @param format 指定像素值的颜色格式 必须为 gl.RGB
// @param type 指定像素值得数据格式 必须是 gl.UNSIGNED_BYTE
// @param pixels 类型化数组 Unit8Array
void readPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);
// 透明混合参数
// blendFunc 的 sfactor dfactor 参数
const GLenum ZERO = 0;
const GLenum ONE = 1;
const GLenum SRC_COLOR = 0x0300;
const GLenum ONE_MINUS_SRC_COLOR = 0x0301;
const GLenum SRC_ALPHA = 0x0302;
const GLenum ONE_MINUS_SRC_ALPHA = 0x0303;
const GLenum DST_ALPHA = 0x0304;
const GLenum ONE_MINUS_DST_ALPHA = 0x0305;
// blendFunc 的 sfactor 参数
const GLenum DST_COLOR = 0x0306;
const GLenum ONE_MINUS_DST_COLOR = 0x0307;
const GLenum SRC_ALPHA_SATURATE = 0x0308;
// 通过参数 sfactor 和 dfactor 指定进行混合操作的函数 混合后的颜色如下计算
// 混合后颜色 = 源颜色 * sfactor + 目标颜色 * dfactor
// @param sfactor 见此方法上枚举
// @param dfactor 见此方法上枚举
void blendFunc(GLenum sfactor, GLenum dfactor);
// 同上 只是分开设置RGB 和 ALPHA
void blendFuncSeparate(GLenum srcRGB, GLenum dstRGB, GLenum srcAlpha, GLenum dstAlpha);
// 创建帧缓冲区对象
WebGLFramebuffer? createFramebuffer();
// 删除帧缓冲区对象
void deleteFramebuffer(WebGLFramebuffer? framebuffer);
// 创建渲染缓冲区对象
WebGLRenderbuffer? createRenderbuffer();
// 删除渲染缓冲区对象
void deleteRenderbuffer(WebGLRenderbuffer? renderbuffer);
const GLenum RENDERBUFFER = 0x8D41;
// 将 renderbuffer 指定的渲染缓冲区对象绑定在target目标上
// 如果 renderbuffer 为 null 则将已经绑定在target目标上的渲染缓冲区对象解除绑定
// @param target 必须是 gl.RENDERBUFFER
void bindRenderbuffer(GLenum target, WebGLRenderbuffer? renderbuffer);
// 表示渲染缓冲区将替代颜色缓冲区
const GLenum RGBA4 = 0x8056;
const GLenum RGB5_A1 = 0x8057;
const GLenum RGB565 = 0x8D62;
// 表示渲染缓冲区将替代深度缓冲区
const GLenum DEPTH_COMPONENT16 = 0x81A5;
// 表示渲染缓冲区将替代模板缓冲区
const GLenum STENCIL_INDEX8 = 0x8D48;
// 创建并初始化渲染缓冲区的数据区
// @param target 必须是 gl.RENDERBUFFER
// @param internalformat 指定渲染缓冲区中的数据格式 见方法上枚举
// @param width height 指定渲染缓冲区的宽度和高度 单位像素
void renderbufferStorage(GLenum target, GLenum internalformat, GLsizei width, GLsizei height);
// 绑定帧缓冲区
// FBO就是由颜色附件（COLOR_ATTACHMENT0)，深度附件（DEPTH_ATTACHMENT），模板附件（STENCIL_ATTACHMENT）组成的一个逻辑存储对象
// RBO是一个2D图像缓冲区，可以用于分配和存储颜色值，深度或者模板值，可以作为FBO的颜色，深度模板附件。
void bindFramebuffer(GLenum target, WebGLFramebuffer? framebuffer);
// attachment
const GLenum COLOR_ATTACHMENT0 = 0x8CE0;
const GLenum DEPTH_ATTACHMENT = 0x8D00;
const GLenum STENCIL_ATTACHMENT = 0x8D20;
const GLenum DEPTH_STENCIL_ATTACHMENT = 0x821A;
// 设置纹理为 attachment 附件
void framebufferTexture2D(GLenum target, GLenum attachment, GLenum textarget, WebGLTexture? texture, GLint level);
// 设置渲染缓冲区对象为 attachment 附件
void framebufferRenderbuffer(GLenum target, GLenum attachment, GLenum renderbuffertarget, WebGLRenderbuffer? renderbuffer);
// 检查帧缓冲区
[WebGLHandlesContextLoss] GLenum checkFramebufferStatus(GLenum target);
// 设置视口宽度
void viewport(GLint x, GLint y, GLsizei width, GLsizei height);
// 锁定或者释放深度缓冲区的写入操作
// @param flag false 只读 true 可读写
void depthMask(GLboolean flag);
// 返回类似下列上下文参数
// {
// alpha: true,
// antialias: true,
// depth: true,
// failIfMajorPerformanceCaveat: false,
// premultipliedAlpha: true,
// preserveDrawingBuffer: false,
// stencil: false
// }
// 可以通过下列方法设置
// canvas.getContext('webgl', { antialias: false, depth: false });
[WebGLHandlesContextLoss] WebGLContextAttributes? getContextAttributes();
// 标记上下文是否已经丢失
[WebGLHandlesContextLoss] boolean isContextLost();
// 设置源和目标混合因子 值范围 在0到1之间
void blendColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);
// blendEquation 的 mode 参数
const GLenum FUNC_ADD = 0x8006;
const GLenum FUNC_SUBTRACT = 0x800A;
const GLenum FUNC_REVERSE_SUBTRACT = 0x800B;
// 将RGB混合方程和阿尔法混合方程设置为单个方程。
// 混合方程式确定新像素如何与 WebGLFramebuffer 中的像素组合
// @ext EXT_blend_minmax
void blendEquation(GLenum mode);
// 同上 只是分开设置RGB 和 ALPHA
// @ext EXT_blend_minmax
void blendEquationSeparate(GLenum modeRGB, GLenum modeAlpha);
// 设置在绘制或渲染WebGLFramebuffer时要开启或关闭的颜色分量。
void colorMask(GLboolean red, GLboolean green, GLboolean blue, GLboolean alpha);
// 指定一个为压缩格式的2D纹理图片。
void compressedTexImage2D(GLenum target, GLint level, GLenum internalformat, GLsizei width, GLsizei height, GLint border, [AllowShared] ArrayBufferView data);
// 指定一个为压缩格式的2D纹理子图片。
void compressedTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, [AllowShared] ArrayBufferView data);
// 复制2D纹理图片。
void copyTexImage2D(GLenum target, GLint level, GLenum internalformat, GLint x, GLint y, GLsizei width, GLsizei height, GLint border);
// 复制2D纹理子图片。
void copyTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLint x, GLint y, GLsizei width, GLsizei height);
// cullFace 的 mode 参数
const GLenum FRONT = 0x0404;
const GLenum BACK = 0x0405;
const GLenum FRONT_AND_BACK = 0x0408;
// 设置多边形的正面或反面是否要被排除。
// gl.enable(gl.CULL_FACE);
// gl.cullFace(gl.FRONT_AND_BACK);
// gl.getParameter(gl.CULL_FACE_MODE) === gl.FRONT_AND_BACK;
void cullFace(GLenum mode);
// depthFunc 的 func 参数
const GLenum NEVER = 0x0200;
const GLenum LESS = 0x0201;
const GLenum EQUAL = 0x0202;
const GLenum LEQUAL = 0x0203;
const GLenum GREATER = 0x0204;
const GLenum NOTEQUAL = 0x0205;
const GLenum GEQUAL = 0x0206;
const GLenum ALWAYS = 0x0207;
// 设置比较输入像素深度和深度缓存值得函数
// gl.enable(gl.DEPTH_TEST);
// gl.depthFunc(gl.NEVER);
// gl.getParameter(gl.DEPTH_FUNC) === gl.NEVER;
void depthFunc(GLenum func);
// 设置从规范化设备坐标映射到窗口或视口坐标时的深度范围。
void depthRange(GLclampf zNear, GLclampf zFar);
// 阻断执行，直到之前所有的操作都完成。
void finish();
// 清空缓冲的命令，这会导致所有命令尽快执行完。
void flush();
// 设置多边形的正面使用顺时针还是逆时针绘制表示。
void frontFace(GLenum mode);
// 为 WebGLTexture 对象生成一组mip纹理映射。
void generateMipmap(GLenum target);
// 返回激活状态的attribute变量信息。
WebGLActiveInfo? getActiveAttrib(WebGLProgram program, GLuint index);
// 返回激活状态的uniform 变量信息。
WebGLActiveInfo? getActiveUniform(WebGLProgram program, GLuint index);
// 返回附加在 WebGLProgram 上的 WebGLShader 对象的列表
sequence<WebGLShader>? getAttachedShaders(WebGLProgram program);
// 返回缓冲信息。
any getBufferParameter(GLenum target, GLenum pname);
// 返回错误信息。
[WebGLHandlesContextLoss] GLenum getError();
// 返回帧缓冲区的信息。
any getFramebufferAttachmentParameter(GLenum target, GLenum attachment, GLenum pname);
// 返回渲染缓冲区的信息。
any getRenderbufferParameter(GLenum target, GLenum pname);
// 返回一个描述着色器数字类型精度的WebGLShaderPrecisionFormat 对象。
WebGLShaderPrecisionFormat? getShaderPrecisionFormat(GLenum shadertype, GLenum precisiontype);
// 以字符串形式返回 WebGLShader 的源码。
DOMString? getShaderSource(WebGLShader shader);
// 返回指定位置的uniform 变量。
any getUniform(WebGLProgram program, WebGLUniformLocation location);
// 返回指定位置的顶点attribute变量。
any getVertexAttrib(GLuint index, GLenum pname);
// 获取给定索引的顶点attribute位置。
[WebGLHandlesContextLoss] GLintptr getVertexAttribOffset(GLuint index, GLenum pname);
// 给某些行为设置建议使用的模式。具体建议需要看执行的情况。
void hint(GLenum target, GLenum mode);
// 返回给入的缓冲是否有效。
[WebGLHandlesContextLoss] GLboolean isBuffer(WebGLBuffer? buffer);
// 测试这个上下文的WebGL功能是否开启。
[WebGLHandlesContextLoss] GLboolean isEnabled(GLenum cap);
// 返回 Boolean 值，表示给入的 WebGLFrameBuffer 对象是否有效。
[WebGLHandlesContextLoss] GLboolean isFramebuffer(WebGLFramebuffer? framebuffer);
// 返回一个 Boolean 值，表示给入的 WebGLProgram 是否有效。
[WebGLHandlesContextLoss] GLboolean isProgram(WebGLProgram? program);
[WebGLHandlesContextLoss] GLboolean isRenderbuffer(WebGLRenderbuffer? renderbuffer);
[WebGLHandlesContextLoss] GLboolean isShader(WebGLShader? shader);
[WebGLHandlesContextLoss] GLboolean isTexture(WebGLTexture? texture);
// 设置线宽。无效
void lineWidth(GLfloat width);
// 为抗锯齿效果设置多重取样覆盖参数。
void sampleCoverage(GLclampf value, GLboolean invert);
// 设置裁剪框。
void scissor(GLint x, GLint y, GLsizei width, GLsizei height);
// 同时设置前面和背面的模板测试函数，及其引用值。
void stencilFunc(GLenum func, GLint ref, GLuint mask);
// 可分开设置前面或背面的模板测试函数，及其引用值。
void stencilFuncSeparate(GLenum face, GLenum func, GLint ref, GLuint mask);
// 同时启用或禁用，前面和背面的模板测试掩码。
void stencilMask(GLuint mask);
// 可分开启用或禁用，前面和背面的模板测试掩码。
void stencilMaskSeparate(GLenum face, GLuint mask);
// 同时设置，在前面和背面的模板缓冲区上执行的操作。
void stencilOp(GLenum fail, GLenum zfail, GLenum zpass);
// 可分开设置，在前面和背面的模板缓冲区上执行的操作。
void stencilOpSeparate(GLenum face, GLenum fail, GLenum zfail, GLenum zpass);
// 更新当前 WebGLTexture 的子矩形。
void texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);
void texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLenum format, GLenum type, TexImageSource source); // May throw DOMException
this.readRenderTargetPixels = function ( renderTarget, x, y, width, height, buffer, activeCubeFaceIndex ) {
if ( ! ( renderTarget && renderTarget.isWebGLRenderTarget ) ) {
console.error( 'THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not THREE.WebGLRenderTarget.' );
return;
}
let framebuffer = properties.get( renderTarget ).__webglFramebuffer;
if ( renderTarget.isWebGLCubeRenderTarget && activeCubeFaceIndex !== undefined ) {
framebuffer = framebuffer[ activeCubeFaceIndex ];
}
if ( framebuffer ) {
let restore = false;
if ( framebuffer !== _currentFramebuffer ) {
_gl.bindFramebuffer( 36160, framebuffer );
restore = true;
}
try {
const texture = renderTarget.texture;
const textureFormat = texture.format;
const textureType = texture.type;
if ( textureFormat !== RGBAFormat && utils.convert( textureFormat ) !== _gl.getParameter( 35739 ) ) {
console.error( 'THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not in RGBA or implementation defined format.' );
return;
}
const halfFloatSupportedByExt = ( textureType === HalfFloatType ) && ( extensions.has( 'EXT_color_buffer_half_float' ) || ( capabilities.isWebGL2 && extensions.has( 'EXT_color_buffer_float' ) ) );
if ( textureType !== UnsignedByteType && utils.convert( textureType ) !== _gl.getParameter( 35738 ) && // Edge and Chrome Mac < 52 (#9513)
! ( textureType === FloatType && ( capabilities.isWebGL2 || extensions.has( 'OES_texture_float' ) || extensions.has( 'WEBGL_color_buffer_float' ) ) ) && // Chrome Mac >= 52 and Firefox
! halfFloatSupportedByExt ) {
console.error( 'THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not in UnsignedByteType or implementation defined type.' );
return;
}
if ( _gl.checkFramebufferStatus( 36160 ) === 36053 ) {
// the following if statement ensures valid read requests (no out-of-bounds pixels, see #8604)
if ( ( x >= 0 && x <= ( renderTarget.width - width ) ) && ( y >= 0 && y <= ( renderTarget.height - height ) ) ) {
_gl.readPixels( x, y, width, height, utils.convert( textureFormat ), utils.convert( textureType ), buffer );
}
} else {
console.error( 'THREE.WebGLRenderer.readRenderTargetPixels: readPixels from renderTarget failed. Framebuffer not complete.' );
}
} finally {
if ( restore ) {
_gl.bindFramebuffer( 36160, _currentFramebuffer );
}
}
}
};
function setBlending( blending, blendEquation, blendSrc, blendDst, blendEquationAlpha, blendSrcAlpha, blendDstAlpha, premultipliedAlpha ) {
if ( blending === NoBlending ) {
if ( currentBlendingEnabled === true ) {
disable( 3042 );
currentBlendingEnabled = false;
}
return;
}
if ( currentBlendingEnabled === false ) {
enable( 3042 );
currentBlendingEnabled = true;
}
if ( blending !== CustomBlending ) {
if ( blending !== currentBlending || premultipliedAlpha !== currentPremultipledAlpha ) {
if ( currentBlendEquation !== AddEquation || currentBlendEquationAlpha !== AddEquation ) {
gl.blendEquation( 32774 );
currentBlendEquation = AddEquation;
currentBlendEquationAlpha = AddEquation;
}
if ( premultipliedAlpha ) {
switch ( blending ) {
case NormalBlending:
gl.blendFuncSeparate( 1, 771, 1, 771 );
break;
case AdditiveBlending:
gl.blendFunc( 1, 1 );
break;
case SubtractiveBlending:
gl.blendFuncSeparate( 0, 0, 769, 771 );
break;
case MultiplyBlending:
gl.blendFuncSeparate( 0, 768, 0, 770 );
break;
default:
console.error( 'THREE.WebGLState: Invalid blending: ', blending );
break;
}
} else {
switch ( blending ) {
case NormalBlending:
gl.blendFuncSeparate( 770, 771, 1, 771 );
break;
case AdditiveBlending:
gl.blendFunc( 770, 1 );
break;
case SubtractiveBlending:
gl.blendFunc( 0, 769 );
break;
case MultiplyBlending:
gl.blendFunc( 0, 768 );
break;
default:
console.error( 'THREE.WebGLState: Invalid blending: ', blending );
break;
}
}
currentBlendSrc = null;
currentBlendDst = null;
currentBlendSrcAlpha = null;
currentBlendDstAlpha = null;
currentBlending = blending;
currentPremultipledAlpha = premultipliedAlpha;
}
return;
}
// custom blending
blendEquationAlpha = blendEquationAlpha || blendEquation;
blendSrcAlpha = blendSrcAlpha || blendSrc;
blendDstAlpha = blendDstAlpha || blendDst;
if ( blendEquation !== currentBlendEquation || blendEquationAlpha !== currentBlendEquationAlpha ) {
gl.blendEquationSeparate( equationToGL[ blendEquation ], equationToGL[ blendEquationAlpha ] );
currentBlendEquation = blendEquation;
currentBlendEquationAlpha = blendEquationAlpha;
}
if ( blendSrc !== currentBlendSrc || blendDst !== currentBlendDst || blendSrcAlpha !== currentBlendSrcAlpha || blendDstAlpha !== currentBlendDstAlpha ) {
gl.blendFuncSeparate( factorToGL[ blendSrc ], factorToGL[ blendDst ], factorToGL[ blendSrcAlpha ], factorToGL[ blendDstAlpha ] );
currentBlendSrc = blendSrc;
currentBlendDst = blendDst;
currentBlendSrcAlpha = blendSrcAlpha;
currentBlendDstAlpha = blendDstAlpha;
}
currentBlending = blending;
currentPremultipledAlpha = null;
}
function setupRenderTarget( renderTarget ) {
const texture = renderTarget.texture;
const renderTargetProperties = properties.get( renderTarget );
const textureProperties = properties.get( texture );
renderTarget.addEventListener( 'dispose', onRenderTargetDispose );
textureProperties.__webglTexture = _gl.createTexture();
info.memory.textures ++;
const isCube = ( renderTarget.isWebGLCubeRenderTarget === true );
const isMultisample = ( renderTarget.isWebGLMultisampleRenderTarget === true );
const isRenderTarget3D = texture.isDataTexture3D || texture.isDataTexture2DArray;
const supportsMips = isPowerOfTwo( renderTarget ) || isWebGL2;
// Handles WebGL2 RGBFormat fallback - #18858
if ( isWebGL2 && texture.format === RGBFormat && ( texture.type === FloatType || texture.type === HalfFloatType ) ) {
texture.format = RGBAFormat;
console.warn( 'THREE.WebGLRenderer: Rendering to textures with RGB format is not supported. Using RGBA format instead.' );
}
// Setup framebuffer
if ( isCube ) {
renderTargetProperties.__webglFramebuffer = [];
for ( let i = 0; i < 6; i ++ ) {
renderTargetProperties.__webglFramebuffer[ i ] = _gl.createFramebuffer();
}
} else {
renderTargetProperties.__webglFramebuffer = _gl.createFramebuffer();
if ( isMultisample ) {
if ( isWebGL2 ) {
renderTargetProperties.__webglMultisampledFramebuffer = _gl.createFramebuffer();
renderTargetProperties.__webglColorRenderbuffer = _gl.createRenderbuffer();
_gl.bindRenderbuffer( 36161, renderTargetProperties.__webglColorRenderbuffer );
const glFormat = utils.convert( texture.format );
const glType = utils.convert( texture.type );
const glInternalFormat = getInternalFormat( texture.internalFormat, glFormat, glType );
const samples = getRenderTargetSamples( renderTarget );
_gl.renderbufferStorageMultisample( 36161, samples, glInternalFormat, renderTarget.width, renderTarget.height );
_gl.bindFramebuffer( 36160, renderTargetProperties.__webglMultisampledFramebuffer );
_gl.framebufferRenderbuffer( 36160, 36064, 36161, renderTargetProperties.__webglColorRenderbuffer );
_gl.bindRenderbuffer( 36161, null );
if ( renderTarget.depthBuffer ) {
renderTargetProperties.__webglDepthRenderbuffer = _gl.createRenderbuffer();
setupRenderBufferStorage( renderTargetProperties.__webglDepthRenderbuffer, renderTarget, true );
}
_gl.bindFramebuffer( 36160, null );
} else {
console.warn( 'THREE.WebGLRenderer: WebGLMultisampleRenderTarget can only be used with WebGL2.' );
}
}
}
// Setup color buffer
if ( isCube ) {
state.bindTexture( 34067, textureProperties.__webglTexture );
setTextureParameters( 34067, texture, supportsMips );
for ( let i = 0; i < 6; i ++ ) {
setupFrameBufferTexture( renderTargetProperties.__webglFramebuffer[ i ], renderTarget, 36064, 34069 + i );
}
if ( textureNeedsGenerateMipmaps( texture, supportsMips ) ) {
generateMipmap( 34067, texture, renderTarget.width, renderTarget.height );
}
state.bindTexture( 34067, null );
} else {
let glTextureType = 3553;
if ( isRenderTarget3D ) {
// Render targets containing layers, i.e: Texture 3D and 2d arrays
if ( isWebGL2 ) {
const isTexture3D = texture.isDataTexture3D;
glTextureType = isTexture3D ? 32879 : 35866;
} else {
console.warn( 'THREE.DataTexture3D and THREE.DataTexture2DArray only supported with WebGL2.' );
}
}
state.bindTexture( glTextureType, textureProperties.__webglTexture );
setTextureParameters( glTextureType, texture, supportsMips );
setupFrameBufferTexture( renderTargetProperties.__webglFramebuffer, renderTarget, 36064, glTextureType );
if ( textureNeedsGenerateMipmaps( texture, supportsMips ) ) {
generateMipmap( 3553, texture, renderTarget.width, renderTarget.height );
}
state.bindTexture( 3553, null );
}
// Setup depth and stencil buffers
if ( renderTarget.depthBuffer ) {
setupDepthRenderbuffer( renderTarget );
}
}
function deallocateRenderTarget( renderTarget ) {
const texture = renderTarget.texture;
const renderTargetProperties = properties.get( renderTarget );
const textureProperties = properties.get( texture );
if ( ! renderTarget ) return;
if ( textureProperties.__webglTexture !== undefined ) {
_gl.deleteTexture( textureProperties.__webglTexture );
}
if ( renderTarget.depthTexture ) {
renderTarget.depthTexture.dispose();
}
if ( renderTarget.isWebGLCubeRenderTarget ) {
for ( let i = 0; i < 6; i ++ ) {
_gl.deleteFramebuffer( renderTargetProperties.__webglFramebuffer[ i ] );
if ( renderTargetProperties.__webglDepthbuffer ) _gl.deleteRenderbuffer( renderTargetProperties.__webglDepthbuffer[ i ] );
}
} else {
_gl.deleteFramebuffer( renderTargetProperties.__webglFramebuffer );
if ( renderTargetProperties.__webglDepthbuffer ) _gl.deleteRenderbuffer( renderTargetProperties.__webglDepthbuffer );
if ( renderTargetProperties.__webglMultisampledFramebuffer ) _gl.deleteFramebuffer( renderTargetProperties.__webglMultisampledFramebuffer );
if ( renderTargetProperties.__webglColorRenderbuffer ) _gl.deleteRenderbuffer( renderTargetProperties.__webglColorRenderbuffer );
if ( renderTargetProperties.__webglDepthRenderbuffer ) _gl.deleteRenderbuffer( renderTargetProperties.__webglDepthRenderbuffer );
}
properties.remove( texture );
properties.remove( renderTarget );
}
function setupDepthRenderbuffer( renderTarget ) {
const renderTargetProperties = properties.get( renderTarget );
const isCube = ( renderTarget.isWebGLCubeRenderTarget === true );
if ( renderTarget.depthTexture ) {
if ( isCube ) throw new Error( 'target.depthTexture not supported in Cube render targets' );
setupDepthTexture( renderTargetProperties.__webglFramebuffer, renderTarget );
} else {
if ( isCube ) {
renderTargetProperties.__webglDepthbuffer = [];
for ( let i = 0; i < 6; i ++ ) {
_gl.bindFramebuffer( 36160, renderTargetProperties.__webglFramebuffer[ i ] );
renderTargetProperties.__webglDepthbuffer[ i ] = _gl.createRenderbuffer();
setupRenderBufferStorage( renderTargetProperties.__webglDepthbuffer[ i ], renderTarget, false );
}
} else {
_gl.bindFramebuffer( 36160, renderTargetProperties.__webglFramebuffer );
renderTargetProperties.__webglDepthbuffer = _gl.createRenderbuffer();
setupRenderBufferStorage( renderTargetProperties.__webglDepthbuffer, renderTarget, false );
}
}
_gl.bindFramebuffer( 36160, null );
}
function setupRenderBufferStorage( renderbuffer, renderTarget, isMultisample ) {
_gl.bindRenderbuffer( 36161, renderbuffer );
if ( renderTarget.depthBuffer && ! renderTarget.stencilBuffer ) {
let glInternalFormat = 33189;
if ( isMultisample ) {
const depthTexture = renderTarget.depthTexture;
if ( depthTexture && depthTexture.isDepthTexture ) {
if ( depthTexture.type === FloatType ) {
glInternalFormat = 36012;
} else if ( depthTexture.type === UnsignedIntType ) {
glInternalFormat = 33190;
}
}
const samples = getRenderTargetSamples( renderTarget );
_gl.renderbufferStorageMultisample( 36161, samples, glInternalFormat, renderTarget.width, renderTarget.height );
} else {
_gl.renderbufferStorage( 36161, glInternalFormat, renderTarget.width, renderTarget.height );
}
_gl.framebufferRenderbuffer( 36160, 36096, 36161, renderbuffer );
} else if ( renderTarget.depthBuffer && renderTarget.stencilBuffer ) {
if ( isMultisample ) {
const samples = getRenderTargetSamples( renderTarget );
_gl.renderbufferStorageMultisample( 36161, samples, 35056, renderTarget.width, renderTarget.height );
} else {
_gl.renderbufferStorage( 36161, 34041, renderTarget.width, renderTarget.height );
}
_gl.framebufferRenderbuffer( 36160, 33306, 36161, renderbuffer );
} else {
const texture = renderTarget.texture;
const glFormat = utils.convert( texture.format );
const glType = utils.convert( texture.type );
const glInternalFormat = getInternalFormat( texture.internalFormat, glFormat, glType );
if ( isMultisample ) {
const samples = getRenderTargetSamples( renderTarget );
_gl.renderbufferStorageMultisample( 36161, samples, glInternalFormat, renderTarget.width, renderTarget.height );
} else {
_gl.renderbufferStorage( 36161, glInternalFormat, renderTarget.width, renderTarget.height );
}
}
_gl.bindRenderbuffer( 36161, null );
}
function setupRenderTarget( renderTarget ) {
const texture = renderTarget.texture;
const renderTargetProperties = properties.get( renderTarget );
const textureProperties = properties.get( texture );
renderTarget.addEventListener( 'dispose', onRenderTargetDispose );
textureProperties.__webglTexture = _gl.createTexture();
info.memory.textures ++;
const isCube = ( renderTarget.isWebGLCubeRenderTarget === true );
const isMultisample = ( renderTarget.isWebGLMultisampleRenderTarget === true );
const isRenderTarget3D = texture.isDataTexture3D || texture.isDataTexture2DArray;
const supportsMips = isPowerOfTwo( renderTarget ) || isWebGL2;
// Handles WebGL2 RGBFormat fallback - #18858
if ( isWebGL2 && texture.format === RGBFormat && ( texture.type === FloatType || texture.type === HalfFloatType ) ) {
texture.format = RGBAFormat;
console.warn( 'THREE.WebGLRenderer: Rendering to textures with RGB format is not supported. Using RGBA format instead.' );
}
// Setup framebuffer
if ( isCube ) {
renderTargetProperties.__webglFramebuffer = [];
for ( let i = 0; i < 6; i ++ ) {
renderTargetProperties.__webglFramebuffer[ i ] = _gl.createFramebuffer();
}
} else {
renderTargetProperties.__webglFramebuffer = _gl.createFramebuffer();
if ( isMultisample ) {
if ( isWebGL2 ) {
renderTargetProperties.__webglMultisampledFramebuffer = _gl.createFramebuffer();
renderTargetProperties.__webglColorRenderbuffer = _gl.createRenderbuffer();
_gl.bindRenderbuffer( 36161, renderTargetProperties.__webglColorRenderbuffer );
const glFormat = utils.convert( texture.format );
const glType = utils.convert( texture.type );
const glInternalFormat = getInternalFormat( texture.internalFormat, glFormat, glType );
const samples = getRenderTargetSamples( renderTarget );
_gl.renderbufferStorageMultisample( 36161, samples, glInternalFormat, renderTarget.width, renderTarget.height );
_gl.bindFramebuffer( 36160, renderTargetProperties.__webglMultisampledFramebuffer );
_gl.framebufferRenderbuffer( 36160, 36064, 36161, renderTargetProperties.__webglColorRenderbuffer );
_gl.bindRenderbuffer( 36161, null );
if ( renderTarget.depthBuffer ) {
renderTargetProperties.__webglDepthRenderbuffer = _gl.createRenderbuffer();
setupRenderBufferStorage( renderTargetProperties.__webglDepthRenderbuffer, renderTarget, true );
}
_gl.bindFramebuffer( 36160, null );
} else {
console.warn( 'THREE.WebGLRenderer: WebGLMultisampleRenderTarget can only be used with WebGL2.' );
}
}
}
// Setup color buffer
if ( isCube ) {
state.bindTexture( 34067, textureProperties.__webglTexture );
setTextureParameters( 34067, texture, supportsMips );
for ( let i = 0; i < 6; i ++ ) {
setupFrameBufferTexture( renderTargetProperties.__webglFramebuffer[ i ], renderTarget, 36064, 34069 + i );
}
if ( textureNeedsGenerateMipmaps( texture, supportsMips ) ) {
generateMipmap( 34067, texture, renderTarget.width, renderTarget.height );
}
state.bindTexture( 34067, null );
} else {
let glTextureType = 3553;
if ( isRenderTarget3D ) {
// Render targets containing layers, i.e: Texture 3D and 2d arrays
if ( isWebGL2 ) {
const isTexture3D = texture.isDataTexture3D;
glTextureType = isTexture3D ? 32879 : 35866;
} else {
console.warn( 'THREE.DataTexture3D and THREE.DataTexture2DArray only supported with WebGL2.' );
}
}
state.bindTexture( glTextureType, textureProperties.__webglTexture );
setTextureParameters( glTextureType, texture, supportsMips );
setupFrameBufferTexture( renderTargetProperties.__webglFramebuffer, renderTarget, 36064, glTextureType );
if ( textureNeedsGenerateMipmaps( texture, supportsMips ) ) {
generateMipmap( 3553, texture, renderTarget.width, renderTarget.height );
}
state.bindTexture( 3553, null );
}
// Setup depth and stencil buffers
if ( renderTarget.depthBuffer ) {
setupDepthRenderbuffer( renderTarget );
}
}
this.setRenderTarget = function ( renderTarget, activeCubeFace = 0, activeMipmapLevel = 0 ) {
_currentRenderTarget = renderTarget;
_currentActiveCubeFace = activeCubeFace;
_currentActiveMipmapLevel = activeMipmapLevel;
if ( renderTarget && properties.get( renderTarget ).__webglFramebuffer === undefined ) {
textures.setupRenderTarget( renderTarget );
}
let framebuffer = _framebuffer;
let isCube = false;
let isRenderTarget3D = false;
if ( renderTarget ) {
const texture = renderTarget.texture;
if ( texture.isDataTexture3D || texture.isDataTexture2DArray ) {
isRenderTarget3D = true;
}
const __webglFramebuffer = properties.get( renderTarget ).__webglFramebuffer;
if ( renderTarget.isWebGLCubeRenderTarget ) {
framebuffer = __webglFramebuffer[ activeCubeFace ];
isCube = true;
} else if ( renderTarget.isWebGLMultisampleRenderTarget ) {
framebuffer = properties.get( renderTarget ).__webglMultisampledFramebuffer;
} else {
framebuffer = __webglFramebuffer;
}
_currentViewport.copy( renderTarget.viewport );
_currentScissor.copy( renderTarget.scissor );
_currentScissorTest = renderTarget.scissorTest;
} else {
_currentViewport.copy( _viewport ).multiplyScalar( _pixelRatio ).floor();
_currentScissor.copy( _scissor ).multiplyScalar( _pixelRatio ).floor();
_currentScissorTest = _scissorTest;
}
if ( _currentFramebuffer !== framebuffer ) {
_gl.bindFramebuffer( 36160, framebuffer );
_currentFramebuffer = framebuffer;
}
state.viewport( _currentViewport );
state.scissor( _currentScissor );
state.setScissorTest( _currentScissorTest );
if ( isCube ) {
const textureProperties = properties.get( renderTarget.texture );
_gl.framebufferTexture2D( 36160, 36064, 34069 + activeCubeFace, textureProperties.__webglTexture, activeMipmapLevel );
} else if ( isRenderTarget3D ) {
const textureProperties = properties.get( renderTarget.texture );
const layer = activeCubeFace || 0;
_gl.framebufferTextureLayer( 36160, 36064, textureProperties.__webglTexture, activeMipmapLevel || 0, layer );
}
};
#启用功能
// enable disable 的 cap 参数
const GLenum CULL_FACE = 0x0B44;
// 混合
const GLenum BLEND = 0x0BE2;
const GLenum DITHER = 0x0BD0;
const GLenum STENCIL_TEST = 0x0B90;
// 隐藏面消除
const GLenum DEPTH_TEST = 0x0B71;
const GLenum SCISSOR_TEST = 0x0C11;
// 多边形位移 （解决深度冲突问题）
const GLenum POLYGON_OFFSET_FILL = 0x8037;
const GLenum SAMPLE_ALPHA_TO_COVERAGE = 0x809E;
const GLenum SAMPLE_COVERAGE = 0x80A0;
// 启用功能
void enable(GLenum cap);
// 关闭功能
void disable(GLenum cap);
// 解决深度冲突
// gl.enable(POLYGON_OFFSET_FILL);
// 指定加到每个顶点绘制后Z值上的偏移量，偏移量按照公式 m * factor + r * units 计算，其中m代表顶点所在表面
// 相对于观察者的实现角度，而r表示硬件能够区分两个Z值之差的最小值
void polygonOffset(GLfloat factor, GLfloat units);
// 虽然上面的方法可以使用，但是在渲染器中用起来还是很麻烦的。
// 解决深度冲突有更好的方式，就是缩小远近裁剪面的距离
function enable( id ) {
if ( enabledCapabilities[ id ] !== true ) {
gl.enable( id );
enabledCapabilities[ id ] = true;
}
}
function disable( id ) {
if ( enabledCapabilities[ id ] !== false ) {
gl.disable( id );
enabledCapabilities[ id ] = false;
}
}
function setPolygonOffset( polygonOffset, factor, units ) {
if ( polygonOffset ) {
enable( 32823 );
if ( currentPolygonOffsetFactor !== factor || currentPolygonOffsetUnits !== units ) {
gl.polygonOffset( factor, units );
currentPolygonOffsetFactor = factor;
currentPolygonOffsetUnits = units;
}
} else {
disable( 32823 );
}
}
#着色器相关
// createShader 的 type 参数
const GLenum FRAGMENT_SHADER = 0x8B30;
const GLenum VERTEX_SHADER = 0x8B31;
// getShaderParameter 的 pname 参数
const GLenum SHADER_TYPE = 0x8B4F;
const GLenum DELETE_STATUS = 0x8B80;
const GLenum COMPILE_STATUS = 0x8B81;
// 创建由type指定的着色器对象
// @param type 见上枚举
WebGLShader? createShader(GLenum type);
// 删除 shader 指定的着色器对象
void deleteShader(WebGLShader? shader);
// 将 source 指定的字符串形式的代码传入shader指定的着色器 如果之前已经向shader传入了代码 旧的代码就会被替换掉
void shaderSource(WebGLShader shader, DOMString source);
// 编译 shader 指定的着色器中的源代码
void compileShader(WebGLShader shader);
// 获取 shader 指定的着色器中 pname 指定的参数信息
// @param pname 见上枚举
any getShaderParameter(WebGLShader shader, GLenum pname);
// 如果 getShaderParameter(shader, COMPILE_STATUS) 返回false
// 则可以通过 此函数获取 指定shader 的信息日志
DOMString? getShaderInfoLog(WebGLShader shader);
function WebGLShader( gl, type, string ) {
const shader = gl.createShader( type );
gl.shaderSource( shader, string );
gl.compileShader( shader );
return shader;
}
function getShaderErrors( gl, shader, type ) {
const status = gl.getShaderParameter( shader, 35713 );
const log = gl.getShaderInfoLog( shader ).trim();
if ( status && log === '' ) return '';
// --enable-privileged-webgl-extension
// console.log( '**' + type + '**', gl.getExtension( 'WEBGL_debug_shaders' ).getTranslatedShaderSource( shader ) );
const source = gl.getShaderSource( shader );
return 'THREE.WebGLShader: gl.getShaderInfoLog() ' + type + '\n' + log + addLineNumbers( source );
}
#着色器程序相关
// getProgramParameter 的 pname 参数
// 着色器相关 章节已定义
const GLenum DELETE_STATUS;
const GLenum LINK_STATUS = 0x8B82;
const GLenum VALIDATE_STATUS = 0x8B83;
const GLenum ATTACHED_SHADERS = 0x8B85;
const GLenum ACTIVE_UNIFORMS = 0x8B86;
const GLenum ACTIVE_ATTRIBUTES = 0x8B89;
// 创建着色器程序对象
WebGLProgram? createProgram();
// 删除着色器程序对象
void deleteProgram(WebGLProgram? program);
// 将 shader 指定的着色器对象分配给 program 指定的程序对象
void attachShader(WebGLProgram program, WebGLShader shader);
// 取消 shader 指定的着色器对 program 对象的分配
void detachShader(WebGLProgram program, WebGLShader shader);
// 连接 program 指定的程序对象中的着色器
// 目的：
// 1. 保证顶点着色器 和 片元着色器的varying变量同名同类型，且一一对应
// 2. 保证顶点着色器对每个varying变量赋了值
// 3. 保证顶点着色器 和 片元着色器中的同名 uniform 变量也是同类型的 无需一一对应
// 4. 保证着色器中的attribute、uniform、varying变量的个数没有超过着色器上限
void linkProgram(WebGLProgram program);
// 获取 program 指定的程序对象中 pname 指定的参数信息
// @param pname 见上枚举
any getProgramParameter(WebGLProgram program, GLenum pname);
// 如果通过 getProgramParameter(LINK_STATUS) 获得返回值 为 false
// 可以通过 此函数获取 program 指定的程序对象的信息日志
DOMString? getProgramInfoLog(WebGLProgram program);
// 验证 WebGLProgram
void validateProgram(WebGLProgram program);
// 告知 WEBGL 系统绘制时使用的 program 对象
void useProgram(WebGLProgram? program);
function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
const gl = renderer.getContext();
const defines = parameters.defines;
let vertexShader = parameters.vertexShader;
let fragmentShader = parameters.fragmentShader;
const shadowMapTypeDefine = generateShadowMapTypeDefine( parameters );
const envMapTypeDefine = generateEnvMapTypeDefine( parameters );
const envMapModeDefine = generateEnvMapModeDefine( parameters );
const envMapBlendingDefine = generateEnvMapBlendingDefine( parameters );
const gammaFactorDefine = ( renderer.gammaFactor > 0 ) ? renderer.gammaFactor : 1.0;
const customExtensions = parameters.isWebGL2 ? '' : generateExtensions( parameters );
const customDefines = generateDefines( defines );
const program = gl.createProgram();
let prefixVertex, prefixFragment;
let versionString = parameters.glslVersion ? '#version ' + parameters.glslVersion + '\n' : '';
if ( parameters.isRawShaderMaterial ) {
prefixVertex = [
customDefines
].filter( filterEmptyLine ).join( '\n' );
if ( prefixVertex.length > 0 ) {
prefixVertex += '\n';
}
prefixFragment = [
customExtensions,
customDefines
].filter( filterEmptyLine ).join( '\n' );
if ( prefixFragment.length > 0 ) {
prefixFragment += '\n';
}
} else {
prefixVertex = [
generatePrecision( parameters ),
'#define SHADER_NAME ' + parameters.shaderName,
customDefines,
parameters.instancing ? '#define USE_INSTANCING' : '',
parameters.instancingColor ? '#define USE_INSTANCING_COLOR' : '',
parameters.supportsVertexTextures ? '#define VERTEX_TEXTURES' : '',
'#define GAMMA_FACTOR ' + gammaFactorDefine,
'#define MAX_BONES ' + parameters.maxBones,
( parameters.useFog && parameters.fog ) ? '#define USE_FOG' : '',
( parameters.useFog && parameters.fogExp2 ) ? '#define FOG_EXP2' : '',
parameters.map ? '#define USE_MAP' : '',
parameters.envMap ? '#define USE_ENVMAP' : '',
parameters.envMap ? '#define ' + envMapModeDefine : '',
parameters.lightMap ? '#define USE_LIGHTMAP' : '',
parameters.aoMap ? '#define USE_AOMAP' : '',
parameters.emissiveMap ? '#define USE_EMISSIVEMAP' : '',
parameters.bumpMap ? '#define USE_BUMPMAP' : '',
parameters.normalMap ? '#define USE_NORMALMAP' : '',
( parameters.normalMap && parameters.objectSpaceNormalMap ) ? '#define OBJECTSPACE_NORMALMAP' : '',
( parameters.normalMap && parameters.tangentSpaceNormalMap ) ? '#define TANGENTSPACE_NORMALMAP' : '',
parameters.clearcoatMap ? '#define USE_CLEARCOATMAP' : '',
parameters.clearcoatRoughnessMap ? '#define USE_CLEARCOAT_ROUGHNESSMAP' : '',
parameters.clearcoatNormalMap ? '#define USE_CLEARCOAT_NORMALMAP' : '',
parameters.displacementMap && parameters.supportsVertexTextures ? '#define USE_DISPLACEMENTMAP' : '',
parameters.specularMap ? '#define USE_SPECULARMAP' : '',
parameters.roughnessMap ? '#define USE_ROUGHNESSMAP' : '',
parameters.metalnessMap ? '#define USE_METALNESSMAP' : '',
parameters.alphaMap ? '#define USE_ALPHAMAP' : '',
parameters.transmissionMap ? '#define USE_TRANSMISSIONMAP' : '',
parameters.vertexTangents ? '#define USE_TANGENT' : '',
parameters.vertexColors ? '#define USE_COLOR' : '',
parameters.vertexUvs ? '#define USE_UV' : '',
parameters.uvsVertexOnly ? '#define UVS_VERTEX_ONLY' : '',
parameters.flatShading ? '#define FLAT_SHADED' : '',
parameters.skinning ? '#define USE_SKINNING' : '',
parameters.useVertexTexture ? '#define BONE_TEXTURE' : '',
parameters.morphTargets ? '#define USE_MORPHTARGETS' : '',
parameters.morphNormals && parameters.flatShading === false ? '#define USE_MORPHNORMALS' : '',
parameters.doubleSided ? '#define DOUBLE_SIDED' : '',
parameters.flipSided ? '#define FLIP_SIDED' : '',
parameters.shadowMapEnabled ? '#define USE_SHADOWMAP' : '',
parameters.shadowMapEnabled ? '#define ' + shadowMapTypeDefine : '',
parameters.sizeAttenuation ? '#define USE_SIZEATTENUATION' : '',
parameters.logarithmicDepthBuffer ? '#define USE_LOGDEPTHBUF' : '',
( parameters.logarithmicDepthBuffer && parameters.rendererExtensionFragDepth ) ? '#define USE_LOGDEPTHBUF_EXT' : '',
'uniform mat4 modelMatrix;',
'uniform mat4 modelViewMatrix;',
'uniform mat4 projectionMatrix;',
'uniform mat4 viewMatrix;',
'uniform mat3 normalMatrix;',
'uniform vec3 cameraPosition;',
'uniform bool isOrthographic;',
'#ifdef USE_INSTANCING',
' attribute mat4 instanceMatrix;',
'#endif',
'#ifdef USE_INSTANCING_COLOR',
' attribute vec3 instanceColor;',
'#endif',
'attribute vec3 position;',
'attribute vec3 normal;',
'attribute vec2 uv;',
'#ifdef USE_TANGENT',
' attribute vec4 tangent;',
'#endif',
'#ifdef USE_COLOR',
' attribute vec3 color;',
'#endif',
'#ifdef USE_MORPHTARGETS',
' attribute vec3 morphTarget0;',
' attribute vec3 morphTarget1;',
' attribute vec3 morphTarget2;',
' attribute vec3 morphTarget3;',
' #ifdef USE_MORPHNORMALS',
' attribute vec3 morphNormal0;',
' attribute vec3 morphNormal1;',
' attribute vec3 morphNormal2;',
' attribute vec3 morphNormal3;',
' #else',
' attribute vec3 morphTarget4;',
' attribute vec3 morphTarget5;',
' attribute vec3 morphTarget6;',
' attribute vec3 morphTarget7;',
' #endif',
'#endif',
'#ifdef USE_SKINNING',
' attribute vec4 skinIndex;',
' attribute vec4 skinWeight;',
'#endif',
'\n'
].filter( filterEmptyLine ).join( '\n' );
prefixFragment = [
customExtensions,
generatePrecision( parameters ),
'#define SHADER_NAME ' + parameters.shaderName,
customDefines,
parameters.alphaTest ? '#define ALPHATEST ' + parameters.alphaTest + ( parameters.alphaTest % 1 ? '' : '.0' ) : '', // add '.0' if integer
'#define GAMMA_FACTOR ' + gammaFactorDefine,
( parameters.useFog && parameters.fog ) ? '#define USE_FOG' : '',
( parameters.useFog && parameters.fogExp2 ) ? '#define FOG_EXP2' : '',
parameters.map ? '#define USE_MAP' : '',
parameters.matcap ? '#define USE_MATCAP' : '',
parameters.envMap ? '#define USE_ENVMAP' : '',
parameters.envMap ? '#define ' + envMapTypeDefine : '',
parameters.envMap ? '#define ' + envMapModeDefine : '',
parameters.envMap ? '#define ' + envMapBlendingDefine : '',
parameters.lightMap ? '#define USE_LIGHTMAP' : '',
parameters.aoMap ? '#define USE_AOMAP' : '',
parameters.emissiveMap ? '#define USE_EMISSIVEMAP' : '',
parameters.bumpMap ? '#define USE_BUMPMAP' : '',
parameters.normalMap ? '#define USE_NORMALMAP' : '',
( parameters.normalMap && parameters.objectSpaceNormalMap ) ? '#define OBJECTSPACE_NORMALMAP' : '',
( parameters.normalMap && parameters.tangentSpaceNormalMap ) ? '#define TANGENTSPACE_NORMALMAP' : '',
parameters.clearcoatMap ? '#define USE_CLEARCOATMAP' : '',
parameters.clearcoatRoughnessMap ? '#define USE_CLEARCOAT_ROUGHNESSMAP' : '',
parameters.clearcoatNormalMap ? '#define USE_CLEARCOAT_NORMALMAP' : '',
parameters.specularMap ? '#define USE_SPECULARMAP' : '',
parameters.roughnessMap ? '#define USE_ROUGHNESSMAP' : '',
parameters.metalnessMap ? '#define USE_METALNESSMAP' : '',
parameters.alphaMap ? '#define USE_ALPHAMAP' : '',
parameters.sheen ? '#define USE_SHEEN' : '',
parameters.transmissionMap ? '#define USE_TRANSMISSIONMAP' : '',
parameters.vertexTangents ? '#define USE_TANGENT' : '',
parameters.vertexColors || parameters.instancingColor ? '#define USE_COLOR' : '',
parameters.vertexUvs ? '#define USE_UV' : '',
parameters.uvsVertexOnly ? '#define UVS_VERTEX_ONLY' : '',
parameters.gradientMap ? '#define USE_GRADIENTMAP' : '',
parameters.flatShading ? '#define FLAT_SHADED' : '',
parameters.doubleSided ? '#define DOUBLE_SIDED' : '',
parameters.flipSided ? '#define FLIP_SIDED' : '',
parameters.shadowMapEnabled ? '#define USE_SHADOWMAP' : '',
parameters.shadowMapEnabled ? '#define ' + shadowMapTypeDefine : '',
parameters.premultipliedAlpha ? '#define PREMULTIPLIED_ALPHA' : '',
parameters.physicallyCorrectLights ? '#define PHYSICALLY_CORRECT_LIGHTS' : '',
parameters.logarithmicDepthBuffer ? '#define USE_LOGDEPTHBUF' : '',
( parameters.logarithmicDepthBuffer && parameters.rendererExtensionFragDepth ) ? '#define USE_LOGDEPTHBUF_EXT' : '',
( ( parameters.extensionShaderTextureLOD || parameters.envMap ) && parameters.rendererExtensionShaderTextureLod ) ? '#define TEXTURE_LOD_EXT' : '',
'uniform mat4 viewMatrix;',
'uniform vec3 cameraPosition;',
'uniform bool isOrthographic;',
( parameters.toneMapping !== NoToneMapping ) ? '#define TONE_MAPPING' : '',
( parameters.toneMapping !== NoToneMapping ) ? ShaderChunk[ 'tonemapping_pars_fragment' ] : '', // this code is required here because it is used by the toneMapping() function defined below
( parameters.toneMapping !== NoToneMapping ) ? getToneMappingFunction( 'toneMapping', parameters.toneMapping ) : '',
parameters.dithering ? '#define DITHERING' : '',
ShaderChunk[ 'encodings_pars_fragment' ], // this code is required here because it is used by the various encoding/decoding function defined below
parameters.map ? getTexelDecodingFunction( 'mapTexelToLinear', parameters.mapEncoding ) : '',
parameters.matcap ? getTexelDecodingFunction( 'matcapTexelToLinear', parameters.matcapEncoding ) : '',
parameters.envMap ? getTexelDecodingFunction( 'envMapTexelToLinear', parameters.envMapEncoding ) : '',
parameters.emissiveMap ? getTexelDecodingFunction( 'emissiveMapTexelToLinear', parameters.emissiveMapEncoding ) : '',
parameters.lightMap ? getTexelDecodingFunction( 'lightMapTexelToLinear', parameters.lightMapEncoding ) : '',
getTexelEncodingFunction( 'linearToOutputTexel', parameters.outputEncoding ),
parameters.depthPacking ? '#define DEPTH_PACKING ' + parameters.depthPacking : '',
'\n'
].filter( filterEmptyLine ).join( '\n' );
}
vertexShader = resolveIncludes( vertexShader );
vertexShader = replaceLightNums( vertexShader, parameters );
vertexShader = replaceClippingPlaneNums( vertexShader, parameters );
fragmentShader = resolveIncludes( fragmentShader );
fragmentShader = replaceLightNums( fragmentShader, parameters );
fragmentShader = replaceClippingPlaneNums( fragmentShader, parameters );
vertexShader = unrollLoops( vertexShader );
fragmentShader = unrollLoops( fragmentShader );
if ( parameters.isWebGL2 && parameters.isRawShaderMaterial !== true ) {
// GLSL 3.0 conversion for built-in materials and ShaderMaterial
versionString = '#version 300 es\n';
prefixVertex = [
'#define attribute in',
'#define varying out',
'#define texture2D texture'
].join( '\n' ) + '\n' + prefixVertex;
prefixFragment = [
'#define varying in',
( parameters.glslVersion === GLSL3 ) ? '' : 'out highp vec4 pc_fragColor;',
( parameters.glslVersion === GLSL3 ) ? '' : '#define gl_FragColor pc_fragColor',
'#define gl_FragDepthEXT gl_FragDepth',
'#define texture2D texture',
'#define textureCube texture',
'#define texture2DProj textureProj',
'#define texture2DLodEXT textureLod',
'#define texture2DProjLodEXT textureProjLod',
'#define textureCubeLodEXT textureLod',
'#define texture2DGradEXT textureGrad',
'#define texture2DProjGradEXT textureProjGrad',
'#define textureCubeGradEXT textureGrad'
].join( '\n' ) + '\n' + prefixFragment;
}
const vertexGlsl = versionString + prefixVertex + vertexShader;
const fragmentGlsl = versionString + prefixFragment + fragmentShader;
// console.log( '*VERTEX*', vertexGlsl );
// console.log( '*FRAGMENT*', fragmentGlsl );
const glVertexShader = WebGLShader( gl, 35633, vertexGlsl );
const glFragmentShader = WebGLShader( gl, 35632, fragmentGlsl );
gl.attachShader( program, glVertexShader );
gl.attachShader( program, glFragmentShader );
// Force a particular attribute to index 0.
if ( parameters.index0AttributeName !== undefined ) {
gl.bindAttribLocation( program, 0, parameters.index0AttributeName );
} else if ( parameters.morphTargets === true ) {
// programs with morphTargets displace position out of attribute 0
gl.bindAttribLocation( program, 0, 'position' );
}
gl.linkProgram( program );
// check for link errors
if ( renderer.debug.checkShaderErrors ) {
const programLog = gl.getProgramInfoLog( program ).trim();
const vertexLog = gl.getShaderInfoLog( glVertexShader ).trim();
const fragmentLog = gl.getShaderInfoLog( glFragmentShader ).trim();
let runnable = true;
let haveDiagnostics = true;
if ( gl.getProgramParameter( program, 35714 ) === false ) {
runnable = false;
const vertexErrors = getShaderErrors( gl, glVertexShader, 'vertex' );
const fragmentErrors = getShaderErrors( gl, glFragmentShader, 'fragment' );
console.error( 'THREE.WebGLProgram: shader error: ', gl.getError(), '35715', gl.getProgramParameter( program, 35715 ), 'gl.getProgramInfoLog', programLog, vertexErrors, fragmentErrors );
} else if ( programLog !== '' ) {
console.warn( 'THREE.WebGLProgram: gl.getProgramInfoLog()', programLog );
} else if ( vertexLog === '' || fragmentLog === '' ) {
haveDiagnostics = false;
}
if ( haveDiagnostics ) {
this.diagnostics = {
runnable: runnable,
programLog: programLog,
vertexShader: {
log: vertexLog,
prefix: prefixVertex
},
fragmentShader: {
log: fragmentLog,
prefix: prefixFragment
}
};
}
}
// Clean up
// Crashes in iOS9 and iOS10. #18402
// gl.detachShader( program, glVertexShader );
// gl.detachShader( program, glFragmentShader );
gl.deleteShader( glVertexShader );
gl.deleteShader( glFragmentShader );
// set up caching for uniform locations
let cachedUniforms;
this.getUniforms = function () {
if ( cachedUniforms === undefined ) {
cachedUniforms = new WebGLUniforms( gl, program );
}
return cachedUniforms;
};
// set up caching for attribute locations
let cachedAttributes;
this.getAttributes = function () {
if ( cachedAttributes === undefined ) {
cachedAttributes = fetchAttributeLocations( gl, program );
}
return cachedAttributes;
};
// free resource
this.destroy = function () {
bindingStates.releaseStatesOfProgram( this );
gl.deleteProgram( program );
this.program = undefined;
};
//
this.name = parameters.shaderName;
this.id = programIdCount ++;
this.cacheKey = cacheKey;
this.usedTimes = 1;
this.program = program;
this.vertexShader = glVertexShader;
this.fragmentShader = glFragmentShader;
return this;
}
function useProgram( program ) {
if ( currentProgram !== program ) {
gl.useProgram( program );
currentProgram = program;
return true;
}
return false;
}
#扩展
// 获取扩展
object? getExtension(DOMString name);
// 获取扩展支持信息
sequence<DOMString>? getSupportedExtensions();
function WebGLExtensions( gl ) {
const extensions = {};
function getExtension( name ) {
if ( extensions[ name ] !== undefined ) {
return extensions[ name ];
}
let extension;
switch ( name ) {
case 'WEBGL_depth_texture':
extension = gl.getExtension( 'WEBGL_depth_texture' ) || gl.getExtension( 'MOZ_WEBGL_depth_texture' ) || gl.getExtension( 'WEBKIT_WEBGL_depth_texture' );
break;
case 'EXT_texture_filter_anisotropic':
extension = gl.getExtension( 'EXT_texture_filter_anisotropic' ) || gl.getExtension( 'MOZ_EXT_texture_filter_anisotropic' ) || gl.getExtension( 'WEBKIT_EXT_texture_filter_anisotropic' );
break;
case 'WEBGL_compressed_texture_s3tc':
extension = gl.getExtension( 'WEBGL_compressed_texture_s3tc' ) || gl.getExtension( 'MOZ_WEBGL_compressed_texture_s3tc' ) || gl.getExtension( 'WEBKIT_WEBGL_compressed_texture_s3tc' );
break;
case 'WEBGL_compressed_texture_pvrtc':
extension = gl.getExtension( 'WEBGL_compressed_texture_pvrtc' ) || gl.getExtension( 'WEBKIT_WEBGL_compressed_texture_pvrtc' );
break;
default:
extension = gl.getExtension( name );
}
extensions[ name ] = extension;
return extension;
}
return {
has: function ( name ) {
return getExtension( name ) !== null;
},
init: function ( capabilities ) {
if ( capabilities.isWebGL2 ) {
getExtension( 'EXT_color_buffer_float' );
} else {
getExtension( 'WEBGL_depth_texture' );
getExtension( 'OES_texture_float' );
getExtension( 'OES_texture_half_float' );
getExtension( 'OES_texture_half_float_linear' );
getExtension( 'OES_standard_derivatives' );
getExtension( 'OES_element_index_uint' );
getExtension( 'OES_vertex_array_object' );
getExtension( 'ANGLE_instanced_arrays' );
}
getExtension( 'OES_texture_float_linear' );
getExtension( 'EXT_color_buffer_half_float' );
},
get: function ( name ) {
const extension = getExtension( name );
if ( extension === null ) {
console.warn( 'THREE.WebGLRenderer: ' + name + ' extension not supported.' );
}
return extension;
}
};
}
#查询状态参数
// 获取当前激活的材质枚举值 getParameter
const GLenum ACTIVE_TEXTURE = 0x84E0;
// 获取材质最大支持数量 getParameter
const GLenum MAX_COMBINED_TEXTURE_IMAGE_UNITS = 0x8B4D;
const GLenum MAX_VERTEX_ATTRIBS = 0x8869;
const GLenum MAX_VERTEX_UNIFORM_VECTORS = 0x8DFB;
const GLenum MAX_VARYING_VECTORS = 0x8DFC;
const GLenum MAX_VERTEX_TEXTURE_IMAGE_UNITS = 0x8B4C;
const GLenum MAX_TEXTURE_IMAGE_UNITS = 0x8872;
const GLenum MAX_FRAGMENT_UNIFORM_VECTORS = 0x8DFD;
const GLenum SHADING_LANGUAGE_VERSION = 0x8B8C;
const GLenum CURRENT_PROGRAM = 0x8B8D;
// 获取混合方程
const GLenum BLEND_EQUATION = 0x8009;
const GLenum BLEND_EQUATION_RGB = 0x8009; /* same as BLEND_EQUATION */
const GLenum BLEND_EQUATION_ALPHA = 0x883D;
// 面消除查询
const GLenum CULL_FACE_MODE = 0x0B45;
// 通过查询参数获取值
any getParameter(GLenum pname);
any getTexParameter(GLenum target, GLenum pname);
// 查询着色器相关参数
any getShaderParameter(WebGLShader shader, GLenum pname);
// 查询着色器程序相关参数
any getProgramParameter(WebGLProgram program, GLenum pname);
function WebGLUniforms( gl, program ) {
this.seq = [];
this.map = {};
const n = gl.getProgramParameter( program, 35718 );
for ( let i = 0; i < n; ++ i ) {
const info = gl.getActiveUniform( program, i ),
addr = gl.getUniformLocation( program, info.name );
parseUniform( info, addr, this );
}
}
#其他方法
// 从颜色缓冲区中读取 x y width height 参数确定的矩形块中的所有像素值 并保存在pixels指定的数组中
// @param x y 选择矩形区域左上角坐标
// @param width height 选择矩形区域的宽 长
// @param format 指定像素值的颜色格式 必须为 gl.RGB
// @param type 指定像素值得数据格式 必须是 gl.UNSIGNED_BYTE
// @param pixels 类型化数组 Unit8Array
void readPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);
// 透明混合参数
// blendFunc 的 sfactor dfactor 参数
const GLenum ZERO = 0;
const GLenum ONE = 1;
const GLenum SRC_COLOR = 0x0300;
const GLenum ONE_MINUS_SRC_COLOR = 0x0301;
const GLenum SRC_ALPHA = 0x0302;
const GLenum ONE_MINUS_SRC_ALPHA = 0x0303;
const GLenum DST_ALPHA = 0x0304;
const GLenum ONE_MINUS_DST_ALPHA = 0x0305;
// blendFunc 的 sfactor 参数
const GLenum DST_COLOR = 0x0306;
const GLenum ONE_MINUS_DST_COLOR = 0x0307;
const GLenum SRC_ALPHA_SATURATE = 0x0308;
// 通过参数 sfactor 和 dfactor 指定进行混合操作的函数 混合后的颜色如下计算
// 混合后颜色 = 源颜色 * sfactor + 目标颜色 * dfactor
// @param sfactor 见此方法上枚举
// @param dfactor 见此方法上枚举
void blendFunc(GLenum sfactor, GLenum dfactor);
// 同上 只是分开设置RGB 和 ALPHA
void blendFuncSeparate(GLenum srcRGB, GLenum dstRGB, GLenum srcAlpha, GLenum dstAlpha);
// 创建帧缓冲区对象
WebGLFramebuffer? createFramebuffer();
// 删除帧缓冲区对象
void deleteFramebuffer(WebGLFramebuffer? framebuffer);
// 创建渲染缓冲区对象
WebGLRenderbuffer? createRenderbuffer();
// 删除渲染缓冲区对象
void deleteRenderbuffer(WebGLRenderbuffer? renderbuffer);
const GLenum RENDERBUFFER = 0x8D41;
// 将 renderbuffer 指定的渲染缓冲区对象绑定在target目标上
// 如果 renderbuffer 为 null 则将已经绑定在target目标上的渲染缓冲区对象解除绑定
// @param target 必须是 gl.RENDERBUFFER
void bindRenderbuffer(GLenum target, WebGLRenderbuffer? renderbuffer);
// 表示渲染缓冲区将替代颜色缓冲区
const GLenum RGBA4 = 0x8056;
const GLenum RGB5_A1 = 0x8057;
const GLenum RGB565 = 0x8D62;
// 表示渲染缓冲区将替代深度缓冲区
const GLenum DEPTH_COMPONENT16 = 0x81A5;
// 表示渲染缓冲区将替代模板缓冲区
const GLenum STENCIL_INDEX8 = 0x8D48;
// 创建并初始化渲染缓冲区的数据区
// @param target 必须是 gl.RENDERBUFFER
// @param internalformat 指定渲染缓冲区中的数据格式 见方法上枚举
// @param width height 指定渲染缓冲区的宽度和高度 单位像素
void renderbufferStorage(GLenum target, GLenum internalformat, GLsizei width, GLsizei height);
// 绑定帧缓冲区
// FBO就是由颜色附件（COLOR_ATTACHMENT0)，深度附件（DEPTH_ATTACHMENT），模板附件（STENCIL_ATTACHMENT）组成的一个逻辑存储对象
// RBO是一个2D图像缓冲区，可以用于分配和存储颜色值，深度或者模板值，可以作为FBO的颜色，深度模板附件。
void bindFramebuffer(GLenum target, WebGLFramebuffer? framebuffer);
// attachment
const GLenum COLOR_ATTACHMENT0 = 0x8CE0;
const GLenum DEPTH_ATTACHMENT = 0x8D00;
const GLenum STENCIL_ATTACHMENT = 0x8D20;
const GLenum DEPTH_STENCIL_ATTACHMENT = 0x821A;
// 设置纹理为 attachment 附件
void framebufferTexture2D(GLenum target, GLenum attachment, GLenum textarget, WebGLTexture? texture, GLint level);
// 设置渲染缓冲区对象为 attachment 附件
void framebufferRenderbuffer(GLenum target, GLenum attachment, GLenum renderbuffertarget, WebGLRenderbuffer? renderbuffer);
// 检查帧缓冲区
[WebGLHandlesContextLoss] GLenum checkFramebufferStatus(GLenum target);
// 设置视口宽度
void viewport(GLint x, GLint y, GLsizei width, GLsizei height);
// 锁定或者释放深度缓冲区的写入操作
// @param flag false 只读 true 可读写
void depthMask(GLboolean flag);
// 返回类似下列上下文参数
// {
// alpha: true,
// antialias: true,
// depth: true,
// failIfMajorPerformanceCaveat: false,
// premultipliedAlpha: true,
// preserveDrawingBuffer: false,
// stencil: false
// }
// 可以通过下列方法设置
// canvas.getContext('webgl', { antialias: false, depth: false });
[WebGLHandlesContextLoss] WebGLContextAttributes? getContextAttributes();
// 标记上下文是否已经丢失
[WebGLHandlesContextLoss] boolean isContextLost();
// 设置源和目标混合因子 值范围 在0到1之间
void blendColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);
// blendEquation 的 mode 参数
const GLenum FUNC_ADD = 0x8006;
const GLenum FUNC_SUBTRACT = 0x800A;
const GLenum FUNC_REVERSE_SUBTRACT = 0x800B;
// 将RGB混合方程和阿尔法混合方程设置为单个方程。
// 混合方程式确定新像素如何与 WebGLFramebuffer 中的像素组合
// @ext EXT_blend_minmax
void blendEquation(GLenum mode);
// 同上 只是分开设置RGB 和 ALPHA
// @ext EXT_blend_minmax
void blendEquationSeparate(GLenum modeRGB, GLenum modeAlpha);
// 设置在绘制或渲染WebGLFramebuffer时要开启或关闭的颜色分量。
void colorMask(GLboolean red, GLboolean green, GLboolean blue, GLboolean alpha);
// 指定一个为压缩格式的2D纹理图片。
void compressedTexImage2D(GLenum target, GLint level, GLenum internalformat, GLsizei width, GLsizei height, GLint border, [AllowShared] ArrayBufferView data);
// 指定一个为压缩格式的2D纹理子图片。
void compressedTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, [AllowShared] ArrayBufferView data);
// 复制2D纹理图片。
void copyTexImage2D(GLenum target, GLint level, GLenum internalformat, GLint x, GLint y, GLsizei width, GLsizei height, GLint border);
// 复制2D纹理子图片。
void copyTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLint x, GLint y, GLsizei width, GLsizei height);
// cullFace 的 mode 参数
const GLenum FRONT = 0x0404;
const GLenum BACK = 0x0405;
const GLenum FRONT_AND_BACK = 0x0408;
// 设置多边形的正面或反面是否要被排除。
// gl.enable(gl.CULL_FACE);
// gl.cullFace(gl.FRONT_AND_BACK);
// gl.getParameter(gl.CULL_FACE_MODE) === gl.FRONT_AND_BACK;
void cullFace(GLenum mode);
// depthFunc 的 func 参数
const GLenum NEVER = 0x0200;
const GLenum LESS = 0x0201;
const GLenum EQUAL = 0x0202;
const GLenum LEQUAL = 0x0203;
const GLenum GREATER = 0x0204;
const GLenum NOTEQUAL = 0x0205;
const GLenum GEQUAL = 0x0206;
const GLenum ALWAYS = 0x0207;
// 设置比较输入像素深度和深度缓存值得函数
// gl.enable(gl.DEPTH_TEST);
// gl.depthFunc(gl.NEVER);
// gl.getParameter(gl.DEPTH_FUNC) === gl.NEVER;
void depthFunc(GLenum func);
// 设置从规范化设备坐标映射到窗口或视口坐标时的深度范围。
void depthRange(GLclampf zNear, GLclampf zFar);
// 阻断执行，直到之前所有的操作都完成。
void finish();
// 清空缓冲的命令，这会导致所有命令尽快执行完。
void flush();
// 设置多边形的正面使用顺时针还是逆时针绘制表示。
void frontFace(GLenum mode);
// 为 WebGLTexture 对象生成一组mip纹理映射。
void generateMipmap(GLenum target);
// 返回激活状态的attribute变量信息。
WebGLActiveInfo? getActiveAttrib(WebGLProgram program, GLuint index);
// 返回激活状态的uniform 变量信息。
WebGLActiveInfo? getActiveUniform(WebGLProgram program, GLuint index);
// 返回附加在 WebGLProgram 上的 WebGLShader 对象的列表
sequence<WebGLShader>? getAttachedShaders(WebGLProgram program);
// 返回缓冲信息。
any getBufferParameter(GLenum target, GLenum pname);
// 返回错误信息。
[WebGLHandlesContextLoss] GLenum getError();
// 返回帧缓冲区的信息。
any getFramebufferAttachmentParameter(GLenum target, GLenum attachment, GLenum pname);
// 返回渲染缓冲区的信息。
any getRenderbufferParameter(GLenum target, GLenum pname);
// 返回一个描述着色器数字类型精度的WebGLShaderPrecisionFormat 对象。
WebGLShaderPrecisionFormat? getShaderPrecisionFormat(GLenum shadertype, GLenum precisiontype);
// 以字符串形式返回 WebGLShader 的源码。
DOMString? getShaderSource(WebGLShader shader);
// 返回指定位置的uniform 变量。
any getUniform(WebGLProgram program, WebGLUniformLocation location);
// 返回指定位置的顶点attribute变量。
any getVertexAttrib(GLuint index, GLenum pname);
// 获取给定索引的顶点attribute位置。
[WebGLHandlesContextLoss] GLintptr getVertexAttribOffset(GLuint index, GLenum pname);
// 给某些行为设置建议使用的模式。具体建议需要看执行的情况。
void hint(GLenum target, GLenum mode);
// 返回给入的缓冲是否有效。
[WebGLHandlesContextLoss] GLboolean isBuffer(WebGLBuffer? buffer);
// 测试这个上下文的WebGL功能是否开启。
[WebGLHandlesContextLoss] GLboolean isEnabled(GLenum cap);
// 返回 Boolean 值，表示给入的 WebGLFrameBuffer 对象是否有效。
[WebGLHandlesContextLoss] GLboolean isFramebuffer(WebGLFramebuffer? framebuffer);
// 返回一个 Boolean 值，表示给入的 WebGLProgram 是否有效。
[WebGLHandlesContextLoss] GLboolean isProgram(WebGLProgram? program);
[WebGLHandlesContextLoss] GLboolean isRenderbuffer(WebGLRenderbuffer? renderbuffer);
[WebGLHandlesContextLoss] GLboolean isShader(WebGLShader? shader);
[WebGLHandlesContextLoss] GLboolean isTexture(WebGLTexture? texture);
// 设置线宽。无效
void lineWidth(GLfloat width);
// 为抗锯齿效果设置多重取样覆盖参数。
void sampleCoverage(GLclampf value, GLboolean invert);
// 设置裁剪框。
void scissor(GLint x, GLint y, GLsizei width, GLsizei height);
// 同时设置前面和背面的模板测试函数，及其引用值。
void stencilFunc(GLenum func, GLint ref, GLuint mask);
// 可分开设置前面或背面的模板测试函数，及其引用值。
void stencilFuncSeparate(GLenum face, GLenum func, GLint ref, GLuint mask);
// 同时启用或禁用，前面和背面的模板测试掩码。
void stencilMask(GLuint mask);
// 可分开启用或禁用，前面和背面的模板测试掩码。
void stencilMaskSeparate(GLenum face, GLuint mask);
// 同时设置，在前面和背面的模板缓冲区上执行的操作。
void stencilOp(GLenum fail, GLenum zfail, GLenum zpass);
// 可分开设置，在前面和背面的模板缓冲区上执行的操作。
void stencilOpSeparate(GLenum face, GLenum fail, GLenum zfail, GLenum zpass);
// 更新当前 WebGLTexture 的子矩形。
void texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);
void texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLenum format, GLenum type, TexImageSource source); // May throw DOMException
this.readRenderTargetPixels = function ( renderTarget, x, y, width, height, buffer, activeCubeFaceIndex ) {
if ( ! ( renderTarget && renderTarget.isWebGLRenderTarget ) ) {
console.error( 'THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not THREE.WebGLRenderTarget.' );
return;
}
let framebuffer = properties.get( renderTarget ).__webglFramebuffer;
if ( renderTarget.isWebGLCubeRenderTarget && activeCubeFaceIndex !== undefined ) {
framebuffer = framebuffer[ activeCubeFaceIndex ];
}
if ( framebuffer ) {
let restore = false;
if ( framebuffer !== _currentFramebuffer ) {
_gl.bindFramebuffer( 36160, framebuffer );
restore = true;
}
try {
const texture = renderTarget.texture;
const textureFormat = texture.format;
const textureType = texture.type;
if ( textureFormat !== RGBAFormat && utils.convert( textureFormat ) !== _gl.getParameter( 35739 ) ) {
console.error( 'THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not in RGBA or implementation defined format.' );
return;
}
const halfFloatSupportedByExt = ( textureType === HalfFloatType ) && ( extensions.has( 'EXT_color_buffer_half_float' ) || ( capabilities.isWebGL2 && extensions.has( 'EXT_color_buffer_float' ) ) );
if ( textureType !== UnsignedByteType && utils.convert( textureType ) !== _gl.getParameter( 35738 ) && // Edge and Chrome Mac < 52 (#9513)
! ( textureType === FloatType && ( capabilities.isWebGL2 || extensions.has( 'OES_texture_float' ) || extensions.has( 'WEBGL_color_buffer_float' ) ) ) && // Chrome Mac >= 52 and Firefox
! halfFloatSupportedByExt ) {
console.error( 'THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not in UnsignedByteType or implementation defined type.' );
return;
}
if ( _gl.checkFramebufferStatus( 36160 ) === 36053 ) {
// the following if statement ensures valid read requests (no out-of-bounds pixels, see #8604)
if ( ( x >= 0 && x <= ( renderTarget.width - width ) ) && ( y >= 0 && y <= ( renderTarget.height - height ) ) ) {
_gl.readPixels( x, y, width, height, utils.convert( textureFormat ), utils.convert( textureType ), buffer );
}
} else {
console.error( 'THREE.WebGLRenderer.readRenderTargetPixels: readPixels from renderTarget failed. Framebuffer not complete.' );
}
} finally {
if ( restore ) {
_gl.bindFramebuffer( 36160, _currentFramebuffer );
}
}
}
};
function setBlending( blending, blendEquation, blendSrc, blendDst, blendEquationAlpha, blendSrcAlpha, blendDstAlpha, premultipliedAlpha ) {
if ( blending === NoBlending ) {
if ( currentBlendingEnabled === true ) {
disable( 3042 );
currentBlendingEnabled = false;
}
return;
}
if ( currentBlendingEnabled === false ) {
enable( 3042 );
currentBlendingEnabled = true;
}
if ( blending !== CustomBlending ) {
if ( blending !== currentBlending || premultipliedAlpha !== currentPremultipledAlpha ) {
if ( currentBlendEquation !== AddEquation || currentBlendEquationAlpha !== AddEquation ) {
gl.blendEquation( 32774 );
currentBlendEquation = AddEquation;
currentBlendEquationAlpha = AddEquation;
}
if ( premultipliedAlpha ) {
switch ( blending ) {
case NormalBlending:
gl.blendFuncSeparate( 1, 771, 1, 771 );
break;
case AdditiveBlending:
gl.blendFunc( 1, 1 );
break;
case SubtractiveBlending:
gl.blendFuncSeparate( 0, 0, 769, 771 );
break;
case MultiplyBlending:
gl.blendFuncSeparate( 0, 768, 0, 770 );
break;
default:
console.error( 'THREE.WebGLState: Invalid blending: ', blending );
break;
}
} else {
switch ( blending ) {
case NormalBlending:
gl.blendFuncSeparate( 770, 771, 1, 771 );
break;
case AdditiveBlending:
gl.blendFunc( 770, 1 );
break;
case SubtractiveBlending:
gl.blendFunc( 0, 769 );
break;
case MultiplyBlending:
gl.blendFunc( 0, 768 );
break;
default:
console.error( 'THREE.WebGLState: Invalid blending: ', blending );
break;
}
}
currentBlendSrc = null;
currentBlendDst = null;
currentBlendSrcAlpha = null;
currentBlendDstAlpha = null;
currentBlending = blending;
currentPremultipledAlpha = premultipliedAlpha;
}
return;
}
// custom blending
blendEquationAlpha = blendEquationAlpha || blendEquation;
blendSrcAlpha = blendSrcAlpha || blendSrc;
blendDstAlpha = blendDstAlpha || blendDst;
if ( blendEquation !== currentBlendEquation || blendEquationAlpha !== currentBlendEquationAlpha ) {
gl.blendEquationSeparate( equationToGL[ blendEquation ], equationToGL[ blendEquationAlpha ] );
currentBlendEquation = blendEquation;
currentBlendEquationAlpha = blendEquationAlpha;
}
if ( blendSrc !== currentBlendSrc || blendDst !== currentBlendDst || blendSrcAlpha !== currentBlendSrcAlpha || blendDstAlpha !== currentBlendDstAlpha ) {
gl.blendFuncSeparate( factorToGL[ blendSrc ], factorToGL[ blendDst ], factorToGL[ blendSrcAlpha ], factorToGL[ blendDstAlpha ] );
currentBlendSrc = blendSrc;
currentBlendDst = blendDst;
currentBlendSrcAlpha = blendSrcAlpha;
currentBlendDstAlpha = blendDstAlpha;
}
currentBlending = blending;
currentPremultipledAlpha = null;
}
function setupRenderTarget( renderTarget ) {
const texture = renderTarget.texture;
const renderTargetProperties = properties.get( renderTarget );
const textureProperties = properties.get( texture );
renderTarget.addEventListener( 'dispose', onRenderTargetDispose );
textureProperties.__webglTexture = _gl.createTexture();
info.memory.textures ++;
const isCube = ( renderTarget.isWebGLCubeRenderTarget === true );
const isMultisample = ( renderTarget.isWebGLMultisampleRenderTarget === true );
const isRenderTarget3D = texture.isDataTexture3D || texture.isDataTexture2DArray;
const supportsMips = isPowerOfTwo( renderTarget ) || isWebGL2;
// Handles WebGL2 RGBFormat fallback - #18858
if ( isWebGL2 && texture.format === RGBFormat && ( texture.type === FloatType || texture.type === HalfFloatType ) ) {
texture.format = RGBAFormat;
console.warn( 'THREE.WebGLRenderer: Rendering to textures with RGB format is not supported. Using RGBA format instead.' );
}
// Setup framebuffer
if ( isCube ) {
renderTargetProperties.__webglFramebuffer = [];
for ( let i = 0; i < 6; i ++ ) {
renderTargetProperties.__webglFramebuffer[ i ] = _gl.createFramebuffer();
}
} else {
renderTargetProperties.__webglFramebuffer = _gl.createFramebuffer();
if ( isMultisample ) {
if ( isWebGL2 ) {
renderTargetProperties.__webglMultisampledFramebuffer = _gl.createFramebuffer();
renderTargetProperties.__webglColorRenderbuffer = _gl.createRenderbuffer();
_gl.bindRenderbuffer( 36161, renderTargetProperties.__webglColorRenderbuffer );
const glFormat = utils.convert( texture.format );
const glType = utils.convert( texture.type );
const glInternalFormat = getInternalFormat( texture.internalFormat, glFormat, glType );
const samples = getRenderTargetSamples( renderTarget );
_gl.renderbufferStorageMultisample( 36161, samples, glInternalFormat, renderTarget.width, renderTarget.height );
_gl.bindFramebuffer( 36160, renderTargetProperties.__webglMultisampledFramebuffer );
_gl.framebufferRenderbuffer( 36160, 36064, 36161, renderTargetProperties.__webglColorRenderbuffer );
_gl.bindRenderbuffer( 36161, null );
if ( renderTarget.depthBuffer ) {
renderTargetProperties.__webglDepthRenderbuffer = _gl.createRenderbuffer();
setupRenderBufferStorage( renderTargetProperties.__webglDepthRenderbuffer, renderTarget, true );
}
_gl.bindFramebuffer( 36160, null );
} else {
console.warn( 'THREE.WebGLRenderer: WebGLMultisampleRenderTarget can only be used with WebGL2.' );
}
}
}
// Setup color buffer
if ( isCube ) {
state.bindTexture( 34067, textureProperties.__webglTexture );
setTextureParameters( 34067, texture, supportsMips );
for ( let i = 0; i < 6; i ++ ) {
setupFrameBufferTexture( renderTargetProperties.__webglFramebuffer[ i ], renderTarget, 36064, 34069 + i );
}
if ( textureNeedsGenerateMipmaps( texture, supportsMips ) ) {
generateMipmap( 34067, texture, renderTarget.width, renderTarget.height );
}
state.bindTexture( 34067, null );
} else {
let glTextureType = 3553;
if ( isRenderTarget3D ) {
// Render targets containing layers, i.e: Texture 3D and 2d arrays
if ( isWebGL2 ) {
const isTexture3D = texture.isDataTexture3D;
glTextureType = isTexture3D ? 32879 : 35866;
} else {
console.warn( 'THREE.DataTexture3D and THREE.DataTexture2DArray only supported with WebGL2.' );
}
}
state.bindTexture( glTextureType, textureProperties.__webglTexture );
setTextureParameters( glTextureType, texture, supportsMips );
setupFrameBufferTexture( renderTargetProperties.__webglFramebuffer, renderTarget, 36064, glTextureType );
if ( textureNeedsGenerateMipmaps( texture, supportsMips ) ) {
generateMipmap( 3553, texture, renderTarget.width, renderTarget.height );
}
state.bindTexture( 3553, null );
}
// Setup depth and stencil buffers
if ( renderTarget.depthBuffer ) {
setupDepthRenderbuffer( renderTarget );
}
}
function deallocateRenderTarget( renderTarget ) {
const texture = renderTarget.texture;
const renderTargetProperties = properties.get( renderTarget );
const textureProperties = properties.get( texture );
if ( ! renderTarget ) return;
if ( textureProperties.__webglTexture !== undefined ) {
_gl.deleteTexture( textureProperties.__webglTexture );
}
if ( renderTarget.depthTexture ) {
renderTarget.depthTexture.dispose();
}
if ( renderTarget.isWebGLCubeRenderTarget ) {
for ( let i = 0; i < 6; i ++ ) {
_gl.deleteFramebuffer( renderTargetProperties.__webglFramebuffer[ i ] );
if ( renderTargetProperties.__webglDepthbuffer ) _gl.deleteRenderbuffer( renderTargetProperties.__webglDepthbuffer[ i ] );
}
} else {
_gl.deleteFramebuffer( renderTargetProperties.__webglFramebuffer );
if ( renderTargetProperties.__webglDepthbuffer ) _gl.deleteRenderbuffer( renderTargetProperties.__webglDepthbuffer );
if ( renderTargetProperties.__webglMultisampledFramebuffer ) _gl.deleteFramebuffer( renderTargetProperties.__webglMultisampledFramebuffer );
if ( renderTargetProperties.__webglColorRenderbuffer ) _gl.deleteRenderbuffer( renderTargetProperties.__webglColorRenderbuffer );
if ( renderTargetProperties.__webglDepthRenderbuffer ) _gl.deleteRenderbuffer( renderTargetProperties.__webglDepthRenderbuffer );
}
properties.remove( texture );
properties.remove( renderTarget );
}
function setupDepthRenderbuffer( renderTarget ) {
const renderTargetProperties = properties.get( renderTarget );
const isCube = ( renderTarget.isWebGLCubeRenderTarget === true );
if ( renderTarget.depthTexture ) {
if ( isCube ) throw new Error( 'target.depthTexture not supported in Cube render targets' );
setupDepthTexture( renderTargetProperties.__webglFramebuffer, renderTarget );
} else {
if ( isCube ) {
renderTargetProperties.__webglDepthbuffer = [];
for ( let i = 0; i < 6; i ++ ) {
_gl.bindFramebuffer( 36160, renderTargetProperties.__webglFramebuffer[ i ] );
renderTargetProperties.__webglDepthbuffer[ i ] = _gl.createRenderbuffer();
setupRenderBufferStorage( renderTargetProperties.__webglDepthbuffer[ i ], renderTarget, false );
}
} else {
_gl.bindFramebuffer( 36160, renderTargetProperties.__webglFramebuffer );
renderTargetProperties.__webglDepthbuffer = _gl.createRenderbuffer();
setupRenderBufferStorage( renderTargetProperties.__webglDepthbuffer, renderTarget, false );
}
}
_gl.bindFramebuffer( 36160, null );
}
function setupRenderBufferStorage( renderbuffer, renderTarget, isMultisample ) {
_gl.bindRenderbuffer( 36161, renderbuffer );
if ( renderTarget.depthBuffer && ! renderTarget.stencilBuffer ) {
let glInternalFormat = 33189;
if ( isMultisample ) {
const depthTexture = renderTarget.depthTexture;
if ( depthTexture && depthTexture.isDepthTexture ) {
if ( depthTexture.type === FloatType ) {
glInternalFormat = 36012;
} else if ( depthTexture.type === UnsignedIntType ) {
glInternalFormat = 33190;
}
}
const samples = getRenderTargetSamples( renderTarget );
_gl.renderbufferStorageMultisample( 36161, samples, glInternalFormat, renderTarget.width, renderTarget.height );
} else {
_gl.renderbufferStorage( 36161, glInternalFormat, renderTarget.width, renderTarget.height );
}
_gl.framebufferRenderbuffer( 36160, 36096, 36161, renderbuffer );
} else if ( renderTarget.depthBuffer && renderTarget.stencilBuffer ) {
if ( isMultisample ) {
const samples = getRenderTargetSamples( renderTarget );
_gl.renderbufferStorageMultisample( 36161, samples, 35056, renderTarget.width, renderTarget.height );
} else {
_gl.renderbufferStorage( 36161, 34041, renderTarget.width, renderTarget.height );
}
_gl.framebufferRenderbuffer( 36160, 33306, 36161, renderbuffer );
} else {
const texture = renderTarget.texture;
const glFormat = utils.convert( texture.format );
const glType = utils.convert( texture.type );
const glInternalFormat = getInternalFormat( texture.internalFormat, glFormat, glType );
if ( isMultisample ) {
const samples = getRenderTargetSamples( renderTarget );
_gl.renderbufferStorageMultisample( 36161, samples, glInternalFormat, renderTarget.width, renderTarget.height );
} else {
_gl.renderbufferStorage( 36161, glInternalFormat, renderTarget.width, renderTarget.height );
}
}
_gl.bindRenderbuffer( 36161, null );
}
function setupRenderTarget( renderTarget ) {
const texture = renderTarget.texture;
const renderTargetProperties = properties.get( renderTarget );
const textureProperties = properties.get( texture );
renderTarget.addEventListener( 'dispose', onRenderTargetDispose );
textureProperties.__webglTexture = _gl.createTexture();
info.memory.textures ++;
const isCube = ( renderTarget.isWebGLCubeRenderTarget === true );
const isMultisample = ( renderTarget.isWebGLMultisampleRenderTarget === true );
const isRenderTarget3D = texture.isDataTexture3D || texture.isDataTexture2DArray;
const supportsMips = isPowerOfTwo( renderTarget ) || isWebGL2;
// Handles WebGL2 RGBFormat fallback - #18858
if ( isWebGL2 && texture.format === RGBFormat && ( texture.type === FloatType || texture.type === HalfFloatType ) ) {
texture.format = RGBAFormat;
console.warn( 'THREE.WebGLRenderer: Rendering to textures with RGB format is not supported. Using RGBA format instead.' );
}
// Setup framebuffer
if ( isCube ) {
renderTargetProperties.__webglFramebuffer = [];
for ( let i = 0; i < 6; i ++ ) {
renderTargetProperties.__webglFramebuffer[ i ] = _gl.createFramebuffer();
}
} else {
renderTargetProperties.__webglFramebuffer = _gl.createFramebuffer();
if ( isMultisample ) {
if ( isWebGL2 ) {
renderTargetProperties.__webglMultisampledFramebuffer = _gl.createFramebuffer();
renderTargetProperties.__webglColorRenderbuffer = _gl.createRenderbuffer();
_gl.bindRenderbuffer( 36161, renderTargetProperties.__webglColorRenderbuffer );
const glFormat = utils.convert( texture.format );
const glType = utils.convert( texture.type );
const glInternalFormat = getInternalFormat( texture.internalFormat, glFormat, glType );
const samples = getRenderTargetSamples( renderTarget );
_gl.renderbufferStorageMultisample( 36161, samples, glInternalFormat, renderTarget.width, renderTarget.height );
_gl.bindFramebuffer( 36160, renderTargetProperties.__webglMultisampledFramebuffer );
_gl.framebufferRenderbuffer( 36160, 36064, 36161, renderTargetProperties.__webglColorRenderbuffer );
_gl.bindRenderbuffer( 36161, null );
if ( renderTarget.depthBuffer ) {
renderTargetProperties.__webglDepthRenderbuffer = _gl.createRenderbuffer();
setupRenderBufferStorage( renderTargetProperties.__webglDepthRenderbuffer, renderTarget, true );
}
_gl.bindFramebuffer( 36160, null );
} else {
console.warn( 'THREE.WebGLRenderer: WebGLMultisampleRenderTarget can only be used with WebGL2.' );
}
}
}
// Setup color buffer
if ( isCube ) {
state.bindTexture( 34067, textureProperties.__webglTexture );
setTextureParameters( 34067, texture, supportsMips );
for ( let i = 0; i < 6; i ++ ) {
setupFrameBufferTexture( renderTargetProperties.__webglFramebuffer[ i ], renderTarget, 36064, 34069 + i );
}
if ( textureNeedsGenerateMipmaps( texture, supportsMips ) ) {
generateMipmap( 34067, texture, renderTarget.width, renderTarget.height );
}
state.bindTexture( 34067, null );
} else {
let glTextureType = 3553;
if ( isRenderTarget3D ) {
// Render targets containing layers, i.e: Texture 3D and 2d arrays
if ( isWebGL2 ) {
const isTexture3D = texture.isDataTexture3D;
glTextureType = isTexture3D ? 32879 : 35866;
} else {
console.warn( 'THREE.DataTexture3D and THREE.DataTexture2DArray only supported with WebGL2.' );
}
}
state.bindTexture( glTextureType, textureProperties.__webglTexture );
setTextureParameters( glTextureType, texture, supportsMips );
setupFrameBufferTexture( renderTargetProperties.__webglFramebuffer, renderTarget, 36064, glTextureType );
if ( textureNeedsGenerateMipmaps( texture, supportsMips ) ) {
generateMipmap( 3553, texture, renderTarget.width, renderTarget.height );
}
state.bindTexture( 3553, null );
}
// Setup depth and stencil buffers
if ( renderTarget.depthBuffer ) {
setupDepthRenderbuffer( renderTarget );
}
}
this.setRenderTarget = function ( renderTarget, activeCubeFace = 0, activeMipmapLevel = 0 ) {
_currentRenderTarget = renderTarget;
_currentActiveCubeFace = activeCubeFace;
_currentActiveMipmapLevel = activeMipmapLevel;
if ( renderTarget && properties.get( renderTarget ).__webglFramebuffer === undefined ) {
textures.setupRenderTarget( renderTarget );
}
let framebuffer = _framebuffer;
let isCube = false;
let isRenderTarget3D = false;
if ( renderTarget ) {
const texture = renderTarget.texture;
if ( texture.isDataTexture3D || texture.isDataTexture2DArray ) {
isRenderTarget3D = true;
}
const __webglFramebuffer = properties.get( renderTarget ).__webglFramebuffer;
if ( renderTarget.isWebGLCubeRenderTarget ) {
framebuffer = __webglFramebuffer[ activeCubeFace ];
isCube = true;
} else if ( renderTarget.isWebGLMultisampleRenderTarget ) {
framebuffer = properties.get( renderTarget ).__webglMultisampledFramebuffer;
} else {
framebuffer = __webglFramebuffer;
}
_currentViewport.copy( renderTarget.viewport );
_currentScissor.copy( renderTarget.scissor );
_currentScissorTest = renderTarget.scissorTest;
} else {
_currentViewport.copy( _viewport ).multiplyScalar( _pixelRatio ).floor();
_currentScissor.copy( _scissor ).multiplyScalar( _pixelRatio ).floor();
_currentScissorTest = _scissorTest;
}
if ( _currentFramebuffer !== framebuffer ) {
_gl.bindFramebuffer( 36160, framebuffer );
_currentFramebuffer = framebuffer;
}
state.viewport( _currentViewport );
state.scissor( _currentScissor );
state.setScissorTest( _currentScissorTest );
if ( isCube ) {
const textureProperties = properties.get( renderTarget.texture );
_gl.framebufferTexture2D( 36160, 36064, 34069 + activeCubeFace, textureProperties.__webglTexture, activeMipmapLevel );
} else if ( isRenderTarget3D ) {
const textureProperties = properties.get( renderTarget.texture );
const layer = activeCubeFace || 0;
_gl.framebufferTextureLayer( 36160, 36064, textureProperties.__webglTexture, activeMipmapLevel || 0, layer );
}
};
1694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
