问题背景

因为之前想修改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.xscale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );//这里拿到模型视图矩阵里面的scale.yscale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );#ifndef USE_SIZEATTENUATIONbool 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.xrotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y; 默认是alignedPosition.ymvPosition.xy += rotatedPosition;//计算得到所有点的相机空间坐标gl_Position = projectionMatrix * mvPosition; //投影坐标系坐标
}

【THREE源码解析篇】THREE.Sprite详解相关推荐

php get 返回源码,php源码 fsockopen获取网页内容实例详解
PHP fsockopen函数说明: Open Internet or Unix domain socket connection(打开套接字链接) Initiates a socket connec ...
UVM源码分析之factory机制详解
前言作者在学习了一段时间的UVM factory源码之后写下此文,旨在记录自己的学习成果,毕竟好记性不如烂笔头嘛,当然如果能帮助到对这部分有疑惑的同仁就更好了.作者是在笔记本电脑上的windows环 ...
【THREE源码解析篇】THREE.Matrix4源码详解
THREE.Matrix4源码详解 THREE.Matrix set函数: copyPosition函数(重要) makeTranslation(得到平移矩阵) transpose(矩阵转置) set ...
Android进阶——Small源码分析之启动流程详解
前言插件化现在已经是Android工程师必备的技能之一,只是学会怎么使用是不行的,所以蹭有时间研究一下Small的源码.对于插件化主要解决的问题是四大组件的加载和资源的加载,读懂所有Small源码需 ...
Java API源码在哪里找_详解查看JAVA API及JAVA源码的方法
在java的日常学习中,我们有时候会需要看java的api说明,或者是查看java的源码,使我们更好的了解java,接下来我就来说说如何查看java的api以及java源码对于java的api,一般 ...
Android内核开发：源码的版本与分支详解
我想很多初学者或许跟我一样,看完Android源码下载相关的文章以后,就开始兴致勃勃地去下载Android源码了,但是下载完了源码后,有没有像我一样产生如下几个困惑呢? (1) Android版本有哪 ...
FreeRTOS 之一源码目录文件及移植详解
写在前面 2018/1/15更新了文章中的部分错误. FreeRTOS源码为最新版的10.0.1.FreeRTOS 10包含两个重要的新功能:流缓冲区和消息缓冲区. 从10.0.0开始,FreeRTO ...
linux设备驱动开发详解源码,linux设备驱动开发详解光盘源码.rar
压缩包 : linux设备驱动开发详解光盘源码.rar 列表 19/busybox源代码/busybox-1.2.1.tar.bz2 19/MTD工具/mtd-utils-1.0.0.tar.gz 1 ...
Android源码中的目录结构详解
由于自己从事与底层开发,一开始对项目结构不是很清楚,然后就百度找到了源码结构,我觉得讲的很清楚.Android 2.1源码结构 |-- Makefile |-- bionic ...

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

THREE.Sprite详解

问题背景

1.sprite_vert.glsl解析

【THREE源码解析篇】THREE.Sprite详解相关推荐

最新文章

热门文章