From 7d1a8b2a6ca378ebe274e2476136c2bccec0db62 Mon Sep 17 00:00:00 2001
From: tengge1 <930372551@qq.com>
Date: Thu, 28 Nov 2019 22:28:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E5=AD=97=E7=BB=98=E5=88=B6=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ShadowEditor.Web/src/object/text/PointText.js | 27 +++++++++++++------
 .../text/shader/point_text_fragment.glsl      |  3 +++
 .../object/text/shader/point_text_vertex.glsl |  7 ++---
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/ShadowEditor.Web/src/object/text/PointText.js b/ShadowEditor.Web/src/object/text/PointText.js
index cb831a42..8cef5a56 100644
--- a/ShadowEditor.Web/src/object/text/PointText.js
+++ b/ShadowEditor.Web/src/object/text/PointText.js
@@ -17,10 +17,13 @@ class PointText extends THREE.Mesh {
                     value: new THREE.CanvasTexture(canvas)
                 },
                 width: {
-                    value: 100.0
+                    value: 1.0 // 设备宽度
                 },
                 height: {
-                    value: 80.0
+                    value: 1.0 // 设备高度
+                },
+                location: {
+                    value: null
                 }
             },
             transparent: true
@@ -28,12 +31,16 @@ class PointText extends THREE.Mesh {
 
         super(geometry, material);
 
+        this.material.uniforms.location.value = this.position;
+
+        this.frusCulled = false;
+
         this.userData.type = 'text';
         this.setText(text);
     }
 
     setText(text) {
-        const fontSize = 12;
+        const fontSize = 32;
         const padding = 2;
 
         this.name = text;
@@ -50,19 +57,23 @@ class PointText extends THREE.Mesh {
         canvas.width = width + padding * 2;
         canvas.height = fontSize + padding * 2;
 
-        this.material.uniforms.width.value = canvas.width;
-        this.material.uniforms.height.value = canvas.height;
+        const domWidth = app.editor.renderer.domElement.width;
+        const domHeight = app.editor.renderer.domElement.height;
+
+        this.material.uniforms.width.value = canvas.width / domWidth;
+        this.material.uniforms.height.value = canvas.height / domHeight;
 
         // 设置样式并绘制文字
         context = canvas.getContext('2d');
 
-        context.font = `${fontSize}px "Microsoft YaHei"`;
         context.textBaseline = 'hanging';
         context.imageSmoothingQuality = 'high';
 
-        context.stroke = '#fff';
-        context.strokeText(text, padding, padding);
+        context.font = `bold ${fontSize}px "Microsoft YaHei"`;
+        context.fill = '#fff';
+        context.fillText(text, padding, padding);
 
+        context.font = `normal ${fontSize}px "Microsoft YaHei"`;
         context.fill = '#555';
         context.fillText(text, padding, padding);
 
diff --git a/ShadowEditor.Web/src/object/text/shader/point_text_fragment.glsl b/ShadowEditor.Web/src/object/text/shader/point_text_fragment.glsl
index 9ae27d8e..53f098dc 100644
--- a/ShadowEditor.Web/src/object/text/shader/point_text_fragment.glsl
+++ b/ShadowEditor.Web/src/object/text/shader/point_text_fragment.glsl
@@ -4,5 +4,8 @@ varying vec2 vUv;
  
 void main() {
     vec4 texel = texture2D( tDiffuse, vUv );
+    if (texel.a == 0.0) {
+        discard;
+    }
     gl_FragColor = texel;
 }
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/object/text/shader/point_text_vertex.glsl b/ShadowEditor.Web/src/object/text/shader/point_text_vertex.glsl
index c484e150..e8d50fb6 100644
--- a/ShadowEditor.Web/src/object/text/shader/point_text_vertex.glsl
+++ b/ShadowEditor.Web/src/object/text/shader/point_text_vertex.glsl
@@ -1,14 +1,15 @@
 uniform float width;
 uniform float height;
+uniform vec3 location;
 
 varying vec2 vUv;
  
 void main() {
     vUv = uv;
-    vec4 _loc = projectionMatrix * modelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0);
+    vec4 _loc = projectionMatrix * viewMatrix * vec4(location, 1.0);
     gl_Position = vec4(
-        _loc.x + position.x,
-        _loc.y + position.y,
+        _loc.x + position.x * width,
+        _loc.y + position.y * height,
         0.0,
         1.0
     );