Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
6c58539f
T
three.js
项目概览
Ablesons
/
three.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
three.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
6c58539f
编写于
9月 20, 2013
作者:
W
WestLangley
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Fixed Sprite Scaling Issues
上级
52502722
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
29 addition
and
35 deletion
+29
-35
src/extras/renderers/plugins/SpritePlugin.js
src/extras/renderers/plugins/SpritePlugin.js
+11
-16
src/extras/shaders/ShaderSprite.js
src/extras/shaders/ShaderSprite.js
+7
-5
src/materials/SpriteMaterial.js
src/materials/SpriteMaterial.js
+8
-12
src/objects/Sprite.js
src/objects/Sprite.js
+3
-2
未找到文件。
src/extras/renderers/plugins/SpritePlugin.js
浏览文件 @
6c58539f
...
...
@@ -19,16 +19,16 @@ THREE.SpritePlugin = function () {
var
i
=
0
;
_sprite
.
vertices
[
i
++
]
=
-
1
;
_sprite
.
vertices
[
i
++
]
=
-
1
;
// vertex 0
_sprite
.
vertices
[
i
++
]
=
-
0.5
;
_sprite
.
vertices
[
i
++
]
=
-
0.5
;
// vertex 0
_sprite
.
vertices
[
i
++
]
=
0
;
_sprite
.
vertices
[
i
++
]
=
0
;
// uv 0
_sprite
.
vertices
[
i
++
]
=
1
;
_sprite
.
vertices
[
i
++
]
=
-
1
;
// vertex 1
_sprite
.
vertices
[
i
++
]
=
0.5
;
_sprite
.
vertices
[
i
++
]
=
-
0.5
;
// vertex 1
_sprite
.
vertices
[
i
++
]
=
1
;
_sprite
.
vertices
[
i
++
]
=
0
;
// uv 1
_sprite
.
vertices
[
i
++
]
=
1
;
_sprite
.
vertices
[
i
++
]
=
1
;
// vertex 2
_sprite
.
vertices
[
i
++
]
=
0.5
;
_sprite
.
vertices
[
i
++
]
=
0.5
;
// vertex 2
_sprite
.
vertices
[
i
++
]
=
1
;
_sprite
.
vertices
[
i
++
]
=
1
;
// uv 2
_sprite
.
vertices
[
i
++
]
=
-
1
;
_sprite
.
vertices
[
i
++
]
=
1
;
// vertex 3
_sprite
.
vertices
[
i
++
]
=
-
0.5
;
_sprite
.
vertices
[
i
++
]
=
0.5
;
// vertex 3
_sprite
.
vertices
[
i
++
]
=
0
;
_sprite
.
vertices
[
i
++
]
=
1
;
// uv 3
i
=
0
;
...
...
@@ -59,6 +59,7 @@ THREE.SpritePlugin = function () {
_sprite
.
uniforms
.
rotation
=
_gl
.
getUniformLocation
(
_sprite
.
program
,
"
rotation
"
);
_sprite
.
uniforms
.
scale
=
_gl
.
getUniformLocation
(
_sprite
.
program
,
"
scale
"
);
_sprite
.
uniforms
.
alignment
=
_gl
.
getUniformLocation
(
_sprite
.
program
,
"
alignment
"
);
_sprite
.
uniforms
.
halfViewport
=
_gl
.
getUniformLocation
(
_sprite
.
program
,
"
halfViewport
"
);
_sprite
.
uniforms
.
color
=
_gl
.
getUniformLocation
(
_sprite
.
program
,
"
color
"
);
_sprite
.
uniforms
.
map
=
_gl
.
getUniformLocation
(
_sprite
.
program
,
"
map
"
);
...
...
@@ -90,8 +91,6 @@ THREE.SpritePlugin = function () {
var
attributes
=
_sprite
.
attributes
,
uniforms
=
_sprite
.
uniforms
;
var
invAspect
=
viewportHeight
/
viewportWidth
;
var
halfViewportWidth
=
viewportWidth
*
0.5
,
halfViewportHeight
=
viewportHeight
*
0.5
;
...
...
@@ -154,7 +153,7 @@ THREE.SpritePlugin = function () {
// update positions and sort
var
i
,
sprite
,
material
,
screenPosition
,
size
,
fogType
,
scale
=
[];
var
i
,
sprite
,
material
,
screenPosition
,
fogType
,
scale
=
[];
for
(
i
=
0
;
i
<
nSprites
;
i
++
)
{
...
...
@@ -201,8 +200,8 @@ THREE.SpritePlugin = function () {
Math
.
max
(
0
,
Math
.
min
(
1
,
sprite
.
position
.
z
)
)
);
scale
[
0
]
=
_renderer
.
devicePixelRatio
;
scale
[
1
]
=
_renderer
.
devicePixelRatio
;
scale
[
0
]
=
_renderer
.
devicePixelRatio
*
sprite
.
scale
.
x
;
scale
[
1
]
=
_renderer
.
devicePixelRatio
*
sprite
.
scale
.
y
;
}
else
{
...
...
@@ -210,8 +209,8 @@ THREE.SpritePlugin = function () {
_gl
.
uniform1i
(
uniforms
.
sizeAttenuation
,
material
.
sizeAttenuation
?
1
:
0
);
_gl
.
uniformMatrix4fv
(
uniforms
.
modelViewMatrix
,
false
,
sprite
.
_modelViewMatrix
.
elements
);
scale
[
0
]
=
1
;
scale
[
1
]
=
1
;
scale
[
0
]
=
sprite
.
scale
.
x
;
scale
[
1
]
=
sprite
.
scale
.
y
;
}
...
...
@@ -232,11 +231,6 @@ THREE.SpritePlugin = function () {
}
size
=
1
/
(
material
.
scaleByViewport
?
viewportHeight
:
1
);
scale
[
0
]
*=
size
*
invAspect
*
sprite
.
scale
.
x
scale
[
1
]
*=
size
*
sprite
.
scale
.
y
;
_gl
.
uniform2f
(
uniforms
.
uvScale
,
material
.
uvScale
.
x
,
material
.
uvScale
.
y
);
_gl
.
uniform2f
(
uniforms
.
uvOffset
,
material
.
uvOffset
.
x
,
material
.
uvOffset
.
y
);
_gl
.
uniform2f
(
uniforms
.
alignment
,
material
.
alignment
.
x
,
material
.
alignment
.
y
);
...
...
@@ -246,6 +240,7 @@ THREE.SpritePlugin = function () {
_gl
.
uniform1f
(
uniforms
.
rotation
,
sprite
.
rotation
);
_gl
.
uniform2fv
(
uniforms
.
scale
,
scale
);
_gl
.
uniform2f
(
uniforms
.
halfViewport
,
halfViewportWidth
,
halfViewportHeight
);
_renderer
.
setBlending
(
material
.
blending
,
material
.
blendEquation
,
material
.
blendSrc
,
material
.
blendDst
);
_renderer
.
setDepthTest
(
material
.
depthTest
);
...
...
src/extras/shaders/ShaderSprite.js
浏览文件 @
6c58539f
...
...
@@ -20,6 +20,7 @@ THREE.ShaderSprite = {
"
uniform vec2 alignment;
"
,
"
uniform vec2 uvOffset;
"
,
"
uniform vec2 uvScale;
"
,
"
uniform vec2 halfViewport;
"
,
"
attribute vec2 position;
"
,
"
attribute vec2 uv;
"
,
...
...
@@ -30,22 +31,23 @@ THREE.ShaderSprite = {
"
vUV = uvOffset + uv * uvScale;
"
,
"
vec2 alignedPosition =
position + alignment
;
"
,
"
vec2 alignedPosition =
( position + alignment ) * scale
;
"
,
"
vec2 rotatedPosition;
"
,
"
rotatedPosition.x =
( cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y ) * scale.x
;
"
,
"
rotatedPosition.y =
( sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y ) * scale
.y;
"
,
"
rotatedPosition.x =
cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y
;
"
,
"
rotatedPosition.y =
sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition
.y;
"
,
"
vec4 finalPosition;
"
,
"
if( useScreenCoordinates != 0 ) {
"
,
"
finalPosition = vec4( screenPosition.xy +
rotatedPosition
, screenPosition.z, 1.0 );
"
,
"
finalPosition = vec4( screenPosition.xy +
( rotatedPosition / halfViewport )
, screenPosition.z, 1.0 );
"
,
"
} else {
"
,
"
finalPosition =
projectionMatrix *
modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
"
,
"
finalPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
"
,
"
finalPosition.xy += rotatedPosition * ( sizeAttenuation == 1 ? 1.0 : finalPosition.z );
"
,
"
finalPosition = projectionMatrix * finalPosition;
"
,
"
}
"
,
...
...
src/materials/SpriteMaterial.js
浏览文件 @
6c58539f
...
...
@@ -12,7 +12,6 @@
*
* useScreenCoordinates: <bool>,
* sizeAttenuation: <bool>,
* scaleByViewport: <bool>,
* alignment: THREE.SpriteAlignment.center,
*
* uvOffset: new THREE.Vector2(),
...
...
@@ -34,7 +33,6 @@ THREE.SpriteMaterial = function ( parameters ) {
this
.
useScreenCoordinates
=
true
;
this
.
depthTest
=
!
this
.
useScreenCoordinates
;
this
.
sizeAttenuation
=
!
this
.
useScreenCoordinates
;
this
.
scaleByViewport
=
!
this
.
sizeAttenuation
;
this
.
alignment
=
THREE
.
SpriteAlignment
.
center
.
clone
();
this
.
fog
=
false
;
...
...
@@ -52,7 +50,6 @@ THREE.SpriteMaterial = function ( parameters ) {
if
(
parameters
.
depthTest
===
undefined
)
this
.
depthTest
=
!
this
.
useScreenCoordinates
;
if
(
parameters
.
sizeAttenuation
===
undefined
)
this
.
sizeAttenuation
=
!
this
.
useScreenCoordinates
;
if
(
parameters
.
scaleByViewport
===
undefined
)
this
.
scaleByViewport
=
!
this
.
sizeAttenuation
;
};
...
...
@@ -69,7 +66,6 @@ THREE.SpriteMaterial.prototype.clone = function () {
material
.
useScreenCoordinates
=
this
.
useScreenCoordinates
;
material
.
sizeAttenuation
=
this
.
sizeAttenuation
;
material
.
scaleByViewport
=
this
.
scaleByViewport
;
material
.
alignment
.
copy
(
this
.
alignment
);
material
.
uvOffset
.
copy
(
this
.
uvOffset
);
...
...
@@ -84,12 +80,12 @@ THREE.SpriteMaterial.prototype.clone = function () {
// Alignment enums
THREE
.
SpriteAlignment
=
{};
THREE
.
SpriteAlignment
.
topLeft
=
new
THREE
.
Vector2
(
1
,
-
1
);
THREE
.
SpriteAlignment
.
topCenter
=
new
THREE
.
Vector2
(
0
,
-
1
);
THREE
.
SpriteAlignment
.
topRight
=
new
THREE
.
Vector2
(
-
1
,
-
1
);
THREE
.
SpriteAlignment
.
centerLeft
=
new
THREE
.
Vector2
(
1
,
0
);
THREE
.
SpriteAlignment
.
topLeft
=
new
THREE
.
Vector2
(
0.5
,
-
0.5
);
THREE
.
SpriteAlignment
.
topCenter
=
new
THREE
.
Vector2
(
0
,
-
0.5
);
THREE
.
SpriteAlignment
.
topRight
=
new
THREE
.
Vector2
(
-
0.5
,
-
0.5
);
THREE
.
SpriteAlignment
.
centerLeft
=
new
THREE
.
Vector2
(
0.5
,
0
);
THREE
.
SpriteAlignment
.
center
=
new
THREE
.
Vector2
(
0
,
0
);
THREE
.
SpriteAlignment
.
centerRight
=
new
THREE
.
Vector2
(
-
1
,
0
);
THREE
.
SpriteAlignment
.
bottomLeft
=
new
THREE
.
Vector2
(
1
,
1
);
THREE
.
SpriteAlignment
.
bottomCenter
=
new
THREE
.
Vector2
(
0
,
1
);
THREE
.
SpriteAlignment
.
bottomRight
=
new
THREE
.
Vector2
(
-
1
,
1
);
THREE
.
SpriteAlignment
.
centerRight
=
new
THREE
.
Vector2
(
-
0.5
,
0
);
THREE
.
SpriteAlignment
.
bottomLeft
=
new
THREE
.
Vector2
(
0.5
,
0.5
);
THREE
.
SpriteAlignment
.
bottomCenter
=
new
THREE
.
Vector2
(
0
,
0.5
);
THREE
.
SpriteAlignment
.
bottomRight
=
new
THREE
.
Vector2
(
-
0.5
,
0.5
);
src/objects/Sprite.js
浏览文件 @
6c58539f
...
...
@@ -22,8 +22,9 @@ THREE.Sprite.prototype = Object.create( THREE.Object3D.prototype );
THREE
.
Sprite
.
prototype
.
updateMatrix
=
function
()
{
this
.
rotation3d
.
set
(
0
,
0
,
this
.
rotation
,
this
.
rotation3d
.
order
);
this
.
quaternion
.
setFromEuler
(
this
.
rotation3d
);
// this.rotation3d.set( 0, 0, this.rotation, this.rotation3d.order ); // not needed. sprite is rotated in the vertex shader.
// this.quaternion.setFromEuler( this.rotation3d ); // ...sprite.rotation3d remains zero.
this
.
matrix
.
compose
(
this
.
position
,
this
.
quaternion
,
this
.
scale
);
this
.
matrixWorldNeedsUpdate
=
true
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录