Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • 文章
WebGPU教程
  • WebGL教程
  • ES GLSL着色器语言
  • WebGL教程(旧版本)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • 文章
WebGPU教程
  • WebGL教程
  • ES GLSL着色器语言
  • WebGL教程(旧版本)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原官网文档 (opens new window)
Web3D系统课程视频
  • 1. 声明一个变量
  • 2. 声明一个常量const
  • 3. 数据类型—基本类型
  • 4. 数据类型-向量
  • 5. 数据类型-矩阵
  • 6. if-else语句和for语句
  • 7. 内置变量
  • 8. attribute、uniform、varying
  • 9. 顶点和片元着色器
  • 10. 取样器sampler2D
  • 11. 内置函数
  • 12. 着色器计算精度precision
    • 13. 函数
    • 14. 结构体
    • 15. discard舍弃片元
    • 16. 数组
    • 17. 预处理
    • ES GLSL着色器语言
    郭隆邦
    2026-05-22
    目录

    12. 着色器计算精度precision

    # 着色器运算精度设置

    通过设置着色器数值的精度可以更好的配置资源,可以根据需要,在不太影响渲染效果前提下,可以尽量降低运算精度。

    # lowp、mediump和highp关键字

    声明变量精度高低的三个关键子lowp、mediump和highp。

    关键子 精度
    lowp 低精度
    mediump 中精度
    highp 高精度

    声明单个WebGL着色器变量的精度

    // 低精度pos变量
    lowp vec3 pos;
    // 高精度浮点数变量k
    highp float k;
    

    # precision关键字

    通过precision关键字可以批量声明一些变量精度。

    比如顶点着色器代码设置precision highp float;,表示顶点着色器中所有浮点数精度为高精度。

    precision mediump float;
    

    比如片元着色器代码设置precision lowp int;,表示片元着色器中所有整型数精度为低精度。

    precision mediump float;
    

    # 顶点和片元着色器不同类型数据默认精度

    除了片元着色器浮点数的精度意外,WebGL系统其它的数值精通全部设置了默认精度,所以如果片元着色器中使用了浮点数类型的变量,比如声明精度,否则会报错。

    片元着色器中设置浮点数变量精度,可以单独设置一个变量,也可以使用关键子precision批量设置。

    //所有float类型数据的精度是lowp
    precision lowp float;
    

    顶点着色器默认精度

    数据类型 默认精度
    int 高精度hight
    float 高度hight
    sampler2D 低精度lowp
    samplerCube 低精度lowp

    片元着色器默认精度

    数据类型 默认精度
    int 中精度mediump
    float 无默认值,如果片元着色器用到浮点数,注意一定手动设置
    sampler2D 低精度lowp
    samplerCube 低精度lowp
    11. 内置函数
    13. 函数

    ← 11. 内置函数 13. 函数→

    Theme by Vdoing | Copyright © 2016-2026 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式