import { Texture } from '../../../textures/Texture'; import { Vector3 } from '../../../math/Vector3'; import { Quaternion } from '../../../math/Quaternion'; /**当场景中需要添加不被遮挡的热点信息时，就需要使用到精灵类了。 * @author mikael emtinger / http://gomo.se/ * @author alteredq / http://alteredqualia.com/ */ function SpritePlugin( renderer, sprites ) {//threejs中精灵的管理类 var gl = renderer.context;//WebGL上下文 var state = renderer.state;//当前WebGL的状态管理对象 var vertexBuffer, elementBuffer;//精灵对象需要的顶点缓冲对象和索引缓冲区 var program, attributes, uniforms;//shader的程序编号、attribute和uniform值 var texture;//精灵所需要的纹理 // decompose matrixWorld var spritePosition = new Vector3();//精灵的位置 var spriteRotation = new Quaternion();//精灵旋转的四元数 var spriteScale = new Vector3();//精灵的缩放倍数 function init() {//初始化精灵的方法 var vertices = new Float32Array( [//构建精灵所需要的顶点坐标信息 - 0.5, - 0.5, 0, 0, 0.5, - 0.5, 1, 0, 0.5, 0.5, 1, 1, - 0.5, 0.5, 0, 1 ] ); var faces = new Uint16Array( [//索引信息 0, 1, 2, 0, 2, 3 ] ); vertexBuffer = gl.createBuffer();//创建顶点缓冲区 elementBuffer = gl.createBuffer();//创建索引缓冲区 gl.bindBuffer( gl.ARRAY_BUFFER, vertexBuffer );//绑定顶点缓冲区 gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW );//初始化顶点缓冲区 gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, elementBuffer );//绑定索引缓冲区 gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, faces, gl.STATIC_DRAW );//初始化索引缓冲区 program = createProgram();//创建着色器程序 attributes = { position: gl.getAttribLocation ( program, 'position' ), //顶点坐标 uv: gl.getAttribLocation ( program, 'uv' ) //纹理坐标 }; uniforms = { uvOffset: gl.getUniformLocation( program, 'uvOffset' ), //纹理的偏移量 uvScale: gl.getUniformLocation( program, 'uvScale' ), //纹理的缩放值 rotation: gl.getUniformLocation( program, 'rotation' ), //旋转四元数 scale: gl.getUniformLocation( program, 'scale' ), color: gl.getUniformLocation( program, 'color' ), map: gl.getUniformLocation( program, 'map' ), //精灵上的贴图 opacity: gl.getUniformLocation( program, 'opacity' ), //精灵的透明度 modelViewMatrix: gl.getUniformLocation( program, 'modelViewMatrix' ), //模-视矩阵 projectionMatrix: gl.getUniformLocation( program, 'projectionMatrix' ), //投影矩阵 fogType: gl.getUniformLocation( program, 'fogType' ), //雾的类型 fogDensity: gl.getUniformLocation( program, 'fogDensity' ), //雾的密度 fogNear: gl.getUniformLocation( program, 'fogNear' ), //雾的近平面 fogFar: gl.getUniformLocation( program, 'fogFar' ), //雾的远平面 fogColor: gl.getUniformLocation( program, 'fogColor' ), //雾的颜色 alphaTest: gl.getUniformLocation( program, 'alphaTest' ) //透明度检测 }; var canvas = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );//创建canvas对象 canvas.width = 8; //设置canvas的长和宽 canvas.height = 8; var context = canvas.getContext( '2d' ); //获取canvas的上下文 context.fillStyle = 'white'; //设置白色背景 context.fillRect( 0, 0, 8, 8 ); //使用白色进行填充 texture = new Texture( canvas ); //将canvas作为纹理 texture.needsUpdate = true; //更新纹理对象 } this.render = function ( scene, camera ) { //精灵的绘制方法 if ( sprites.length === 0 ) return; // setup gl if ( program === undefined ) { //如果没有指定着色器程序编号 init(); //对着色器程序进行初始化 } gl.useProgram( program ); //指定使用的着色器程序 state.initAttributes(); //重置webGL的状态 state.enableAttribute( attributes.position ); //开启顶点坐标数组 state.enableAttribute( attributes.uv ); //开启纹理坐标数组 state.disableUnusedAttributes(); //禁用所有没使用到的属性 state.disable( gl.CULL_FACE ); //关闭背面剪裁 state.enable( gl.BLEND ); //开启混合 gl.bindBuffer( gl.ARRAY_BUFFER, vertexBuffer ); //绑定顶点坐标缓冲 gl.vertexAttribPointer( attributes.position, 2, gl.FLOAT, false, 2 * 8, 0 ); //指定定点坐标缓冲区数据的位置和格式 gl.vertexAttribPointer( attributes.uv, 2, gl.FLOAT, false, 2 * 8, 8 ); //指定纹理坐标缓冲区数据的位置和格式 gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, elementBuffer ); //绑定索引缓冲区 gl.uniformMatrix4fv( uniforms.projectionMatrix, false, camera.projectionMatrix.elements );//将投影矩阵传入渲染管线 state.activeTexture( gl.TEXTURE0 ); //激活对应纹理？？？？？？？？？ gl.uniform1i( uniforms.map, 0 ); //将纹理图传入渲染管线中 var oldFogType = 0; var sceneFogType = 0; var fog = scene.fog; if ( fog ) {//两种雾的实现方法 gl.uniform3f( uniforms.fogColor, fog.color.r, fog.color.g, fog.color.b ); if ( fog.isFog ) { gl.uniform1f( uniforms.fogNear, fog.near ); gl.uniform1f( uniforms.fogFar, fog.far ); gl.uniform1i( uniforms.fogType, 1 ); oldFogType = 1; sceneFogType = 1; } else if ( fog.isFogExp2 ) { gl.uniform1f( uniforms.fogDensity, fog.density ); gl.uniform1i( uniforms.fogType, 2 ); oldFogType = 2; sceneFogType = 2; } } else { gl.uniform1i( uniforms.fogType, 0 ); oldFogType = 0; sceneFogType = 0; } // update positions and sort for ( var i = 0, l = sprites.length; i < l; i ++ ) { var sprite = sprites[ i ]; sprite.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, sprite.matrixWorld );//更新精灵图的模-视矩阵 sprite.z = - sprite.modelViewMatrix.elements[ 14 ];//获取精灵在摄像机视图下的Z值 （其实也就是深度值） } sprites.sort( painterSortStable );//根据精灵的深度值进行排序，确定渲染顺序（肯定是需要先绘制远处的精灵，再绘制近处的，否则遮挡顺序就不对咯） // render all sprites var scale = []; for ( var i = 0, l = sprites.length; i < l; i ++ ) { var sprite = sprites[ i ];//获取精灵对象 var material = sprite.material;//获取精灵的材质 if ( material.visible === false ) continue;//如果该精灵不可见 直接跳出 sprite.onBeforeRender( renderer, scene, camera, undefined, material, undefined );//？？？？？？？？？？？？？？？？？？？？？？搜索一下再写 gl.uniform1f( uniforms.alphaTest, material.alphaTest ); gl.uniformMatrix4fv( uniforms.modelViewMatrix, false, sprite.modelViewMatrix.elements ); sprite.matrixWorld.decompose( spritePosition, spriteRotation, spriteScale );//根据各种属性 生成精灵的世界坐标矩阵 /* 传入各种着色器中用到的变量 * */ scale[ 0 ] = spriteScale.x; scale[ 1 ] = spriteScale.y; var fogType = 0; if ( scene.fog && material.fog ) { fogType = sceneFogType; } if ( oldFogType !== fogType ) { gl.uniform1i( uniforms.fogType, fogType ); oldFogType = fogType; } if ( material.map !== null ) { gl.uniform2f( uniforms.uvOffset, material.map.offset.x, material.map.offset.y ); gl.uniform2f( uniforms.uvScale, material.map.repeat.x, material.map.repeat.y ); } else { gl.uniform2f( uniforms.uvOffset, 0, 0 ); gl.uniform2f( uniforms.uvScale, 1, 1 ); } gl.uniform1f( uniforms.opacity, material.opacity ); gl.uniform3f( uniforms.color, material.color.r, material.color.g, material.color.b ); gl.uniform1f( uniforms.rotation, material.rotation ); gl.uniform2fv( uniforms.scale, scale ); state.setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst, material.blendEquationAlpha, material.blendSrcAlpha, material.blendDstAlpha, material.premultipliedAlpha ); state.buffers.depth.setTest( material.depthTest );//开启深度测试 state.buffers.depth.setMask( material.depthWrite );//开启深度写入 if ( material.map ) { renderer.setTexture2D( material.map, 0 ); } else { renderer.setTexture2D( texture, 0 ); } gl.drawElements( gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 );//进行绘制 sprite.onAfterRender( renderer, scene, camera, undefined, material, undefined ); } // restore gl state.enable( gl.CULL_FACE ); renderer.resetGLState(); }; function createProgram() {//创建绘制精灵所用的着色器 var program = gl.createProgram(); var vertexShader = gl.createShader( gl.VERTEX_SHADER ); var fragmentShader = gl.createShader( gl.FRAGMENT_SHADER ); //*顶点着色器内容*/ gl.shaderSource( vertexShader, [ 'precision ' + renderer.getPrecision() + ' float;', '#define SHADER_NAME ' + 'SpriteMaterial', 'uniform mat4 modelViewMatrix;', 'uniform mat4 projectionMatrix;', 'uniform float rotation;', 'uniform vec2 scale;', 'uniform vec2 uvOffset;', 'uniform vec2 uvScale;', 'attribute vec2 position;', 'attribute vec2 uv;', 'varying vec2 vUV;', 'void main() {', 'vUV = uvOffset + uv * uvScale;', 'vec2 alignedPosition = position * scale;', 'vec2 rotatedPosition;', 'rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;', 'rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;', 'vec4 finalPosition;', 'finalPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );', 'finalPosition.xy += rotatedPosition;', 'finalPosition = projectionMatrix * finalPosition;', 'gl_Position = finalPosition;', '}' ].join( '\n' ) ); /*片元着色器内容*/ gl.shaderSource( fragmentShader, [ 'precision ' + renderer.getPrecision() + ' float;', '#define SHADER_NAME ' + 'SpriteMaterial', 'uniform vec3 color;', 'uniform sampler2D map;', 'uniform float opacity;', 'uniform int fogType;', 'uniform vec3 fogColor;', 'uniform float fogDensity;', 'uniform float fogNear;', 'uniform float fogFar;', 'uniform float alphaTest;', 'varying vec2 vUV;', 'void main() {', 'vec4 texture = texture2D( map, vUV );', 'if ( texture.a < alphaTest ) discard;',//如果当前片元中的透明度小于alphaTest直接舍弃， 'gl_FragColor = vec4( color * texture.xyz, texture.a * opacity );', 'if ( fogType > 0 ) {',/*下面是两种雾的着色器实现*/ 'float depth = gl_FragCoord.z / gl_FragCoord.w;', 'float fogFactor = 0.0;', 'if ( fogType == 1 ) {', 'fogFactor = smoothstep( fogNear, fogFar, depth );', '} else {', 'const float LOG2 = 1.442695;', 'fogFactor = exp2( - fogDensity * fogDensity * depth * depth * LOG2 );', 'fogFactor = 1.0 - clamp( fogFactor, 0.0, 1.0 );', '}', 'gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );', '}', '}' ].join( '\n' ) ); gl.compileShader( vertexShader ); gl.compileShader( fragmentShader ); gl.attachShader( program, vertexShader ); gl.attachShader( program, fragmentShader ); gl.linkProgram( program ); return program; } function painterSortStable( a, b ) { if ( a.renderOrder !== b.renderOrder ) { return a.renderOrder - b.renderOrder; } else if ( a.z !== b.z ) { return b.z - a.z; } else { return b.id - a.id; } } } export { SpritePlugin };
05-16
506
506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
