Unity WebView 中 LaTeX 渲染问题解决方案

Unity WebView 中 LaTeX 渲染问题解决方案

问题概述

在 Unity WebView 节点信息面板中，LaTeX 公式无法正确渲染，主要表现为：

1. LaTeX 公式显示为原始代码，没有被渲染
2. 特殊字符（如反斜杠 \）被显示为特殊符号（如 ♦）
3. 公式渲染出现 “Math input error” 错误提示

问题原因分析

1. 字符编码与转义问题

Unity 向 WebView 传递数据时，存在字符编码和转义问题：

• 双重转义：Unity 中的字符串 \\frac 在传递过程中变成了 \frac，导致 LaTeX 引擎无法识别
• 特殊字符编码：反斜杠 \ 被错误编码为特殊字符（如 ♦）
• JSON 序列化问题：Unity 没有使用标准 JSON 序列化，而是手动拼接字符串，导致特殊字符处理不当

2. 渲染引擎限制

• KaTeX 限制：初始使用的 KaTeX 对复杂公式支持有限，特别是嵌套分数和多层括号
• 语法严格性：LaTeX 语法要求严格，如求和符号 \sum 需要正确设置上下限

3. 预处理不足

• 缺少对特殊字符的预处理
• 缺少对常见 LaTeX 语法错误的修复

解决方案

1. 更换渲染引擎

将 KaTeX 替换为功能更强大的 MathJax：

<script>
  window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$', '$$'], ['\\[', '\\]']],
      processEscapes: true,
      packages: ['base', 'ams', 'noerrors', 'noundefined']
    },
    svg: {
      fontCache: 'global'
    },
    options: {
      ignoreHtmlClass: 'tex2jax_ignore',
      processHtmlClass: 'tex2jax_process'
    }
  };
script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">script>

2. 增强预处理函数

添加特殊字符处理和语法修复：

// 预处理LaTeX公式，修复常见错误
preprocessLatex(content) {
  if (!content) return '';
  
  console.log('预处理LaTeX公式');
  
  // 修复常见的LaTeX语法错误
  let processed = content;
  
  // 处理特殊字符编码问题
  // 将特殊字符替换回正确的LaTeX命令
  processed = processed.replace(/♦rac/g, '\\frac');
  processed = processed.replace(/♦/g, '\\');
  processed = processed.replace(/■/g, '\\');
  // 更多特殊字符替换...
  
  // 1. 修复\frac命令
  processed = processed.replace(/\\frac([^{])/g, '\\frac{$1}');
  
  // 2. 修复\left和\right命令
  processed = processed.replace(/\\left([^\\{\\[])/g, '\\left($1');
  processed = processed.replace(/\\right([^\\}\\]])/g, '\\right)$1');
  
  // 更多语法修复...
  
  return processed;
}

3. 修复公式语法

1. 求和符号：使用 \sum\limits 替代 \sum
2. 嵌套括号：使用 \left( 和 \right) 确保括号大小正确
3. 省略号：使用 \ldots 替代 ...

4. Unity 端解决方案

在 Unity 端使用标准 JSON 序列化：

[System.Serializable]
public class PanelMessage {
    public string type = "OPEN_PANEL_RESPONSE";
    public string name;
    public string title;
    public string content;
}

// 使用JsonUtility序列化对象
var message = new PanelMessage {
    name = "mathNode",
    title = "数学公式",
    content = "这是一个公式: $\\frac{1}{2}$"  // 注意这里的反斜杠需要双写
};
string json = JsonUtility.ToJson(message);
string jsCode = $"simulateUnityMessage({json})";

最佳实践

1. 使用 JSON 序列化：避免手动拼接字符串
2. 双重转义：在 Unity 中使用双反斜杠 \\ 表示 LaTeX 中的单反斜杠 \
3. 预处理检查：在渲染前对 LaTeX 公式进行预处理和语法检查
4. 使用 MathJax：对于复杂公式，MathJax 比 KaTeX 有更好的兼容性
5. SVG 渲染：使用 SVG 渲染模式，确保在任何环境下都能正确显示

结论

Unity WebView 中 LaTeX 渲染问题主要源于字符编码、转义处理和渲染引擎选择。通过更换为 MathJax 渲染引擎，增强预处理函数，修复公式语法，以及在 Unity 端使用标准 JSON 序列化，可以有效解决这些问题，实现复杂 LaTeX 公式的正确渲染。