【THREE源码解析篇】THREE.Sprite详解

GAMESLI-GIS

已于 2022-02-09 16:02:14 修改

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： THREE 文章标签： cocos2d unity 游戏引擎

于 2021-06-21 18:25:17 首次发布

本文链接：https://blog.csdn.net/qq_22849251/article/details/118091512

THREE 专栏收录该内容

18 篇文章

订阅专栏

本文深入解析THREE.js中的sprite_vert.glsl，探讨如何使精灵不面向屏幕并保持3D效果。通过分析模型视图矩阵获取scale，并结合rotation统一变量实现旋转。关键步骤包括计算scale、调整坐标、旋转变换和投影坐标转换，为3D场景中的精灵提供了更多可能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题背景

因为之前想修改sprite使得可以不面向屏幕，正常立起来和3D文字一样，对此研究了下THREE对这块的实现原理。

1.sprite_vert.glsl解析

uniform float rotation;
uniform vec2 center;//默认0.5,0.5
#include <common>
#include <uv_pars_vertex>
#include <fog_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>
void main() {
		vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 ); 
		vec2 scale;
		// modelMatrix is matrixWorld
		//因为矩阵左上角到右下角是模型对象的scale控制参数
		//这里拿到模型视图矩阵里面的scale.x
		scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
		//这里拿到模型视图矩阵里面的scale.y
		scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );
		
		#ifndef USE_SIZEATTENUATION
			bool isPerspective = isPerspectiveMatrix( projectionMatrix );
			if ( isPerspective ) scale *= - mvPosition.z;
		#endif
		
		//计算得到sprite包括中心点，其他点的坐标（相对的），下面才计算才最终坐标
		//center默认传的是0.5,0.5
		// position坐标是下面的结构，一个半径0.5的正方形
		//var float32Array = new Float32Array( [
		//	- 0.5, - 0.5, 0, 0, 0,
		//	0.5, - 0.5, 0, 1, 0,
		//	0.5, 0.5, 0, 1, 1,
		//	- 0.5, 0.5, 0, 0, 1
		//] );
		vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale;
		
		// 下面是利用传入的uniform float rotation进行旋转变换
		vec2 rotatedPosition;
		rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y; //默认rotation=0,坐标还是alignedPosition.x
		rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y; ////默认是alignedPosition.y
		
		mvPosition.xy += rotatedPosition;//计算得到所有点的相机空间坐标
		gl_Position = projectionMatrix * mvPosition; //投影坐标系坐标
}