Gahing's blog Gahing's blog
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Gahing / francecil

To be best
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 前端基础

  • 应用框架

  • 工程能力

  • 应用基础

  • 专业领域

    • 服务端

    • 跨端技术

    • Web IDE

    • 中后台

    • 动效渲染

      • Canvas

      • WebGL

        • WebGL 光照
        • WebGL 初探
        • WebGL 矩阵处理
        • WebGL 纹理
        • WebGL 性能优化
        • 喝酒没骰子?手摸手教你实现基于 WebGL 的掷骰子游戏
        • WebGL 笔记
          • gl.drawArrays 与 gl.drawElements 区别
          • gl.STATICDRAW、gl.STREAMDRAW、gl.DYNAMIC_DRAW
          • webgl canvas 图片下载时纯黑
          • 判断点击的物体
            • 读取像素法
          • 绘制其他图形
        • 利用 WebGL 给图片增加光影效果
      • WebGPU

      • Web动画

      • 动效方案

    • 可视化

    • 埋点监控

    • 多媒体

    • 桌面技术

    • 游戏互动

    • 编辑器

    • 虚拟化与容器化

    • 设计系统

  • 业务场景

  • 大前端
  • 专业领域
  • 动效渲染
  • WebGL
gahing
2020-03-11
目录

WebGL 笔记草稿

# gl.drawArrays 与 gl.drawElements 区别

传入顶点索引

# gl.STATIC_DRAW、gl.STREAM_DRAW、gl.DYNAMIC_DRAW

# webgl canvas 图片下载时纯黑

# 判断点击的物体

# 读取像素法

片段着色器中增加一个全局变量 flag

当 flag 为 true 时,绘制为某个特殊颜色 c ;否则正常绘制

点击物体时,设置 flag 为 true

读取点击坐标处的像素颜色,判断是否为 c ,若为 c 说明点中物体

最后对颜色进行还原

此外,配合顶点着色器还可以实现点击在物体的哪一面

# 绘制其他图形

比如圆

gl_PointCoord

...

编辑 (opens new window)
上次更新: 2024/09/01, 23:56:56
喝酒没骰子?手摸手教你实现基于 WebGL 的掷骰子游戏
利用 WebGL 给图片增加光影效果

← 喝酒没骰子?手摸手教你实现基于 WebGL 的掷骰子游戏 利用 WebGL 给图片增加光影效果→

最近更新
01
浅谈代码质量与量化指标
08-27
02
快速理解 JS 装饰器
08-26
03
Vue 项目中的 data-v-xxx 是怎么生成的
09-19
更多文章>
Theme by Vdoing | Copyright © 2016-2024 Gahing | 闽ICP备19024221号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式