0302画一个方形

1 未经授权,禁止转载了解课程
课程介绍
讨论{{interaction.discussNum ? '(' + interaction.discussNum + ')' : ''}}
适合人群
希望制作出众网站的网络开发人员。 需要创建自己的着色器的 3D 开发人员。
你将会学到
使用自定义着色器让 WebGL 充满活力
课程简介

在本课程中,我们将学习 GLSL(OpenGL 着色语言),以创建令人惊叹的效果。

也许您是:


  • 设计师,看到过一些使用酷炫过渡效果的一流网站,并想知道它们是如何做到的。您可能听说过 WebGL,并知道可以使用一些简单的 THREE.js 代码来做一些了不起的事情。

  • 试图以引人注目的方式将数据可视化的开发人员。

  • 游戏开发人员,希望为 3D 物体表面添加一些自定义特效。


GLSL 是使用 OpenGL 显示曲面的方法。代码语法基于 C 语言,但不用担心,我们将假设您完全不懂这门语言,正如课程标题所述,我们将从头开始学习。GLSL 使用 GPU(图形处理器)同时处理多个程序,因此速度快得令人难以置信。

在课程中,我们将为浏览器编写代码,因为这样我们就可以专注于 GLSL,而无需担心安装任何其他软件。我们将使用 THREE.js WebGL 库和 CodePen,这样您就可以立即编辑源代码并查看结果,只需浏览器即可进行实验。我们只使用了少量的 Javascript,但我们会对其进行详细讲解。但你也可以在 C/C++/C# 程序或 Python 程序中使用所学的 GLSL。

我们将从非常简单的示例开始,在开发自定义着色器的每个阶段慢慢推进。您可以在 CodePen 上使用着色器代码,这样您就可以尝试使用不同的值来查看其对最终结果的影响。

GLSL 着色器分为顶点着色器和片段着色器,我们将首先关注片段着色器,基本上在 2d 环境中工作。课程资源中包含了数十种着色器,您将循序渐进地学习这门语言。

创建自己的着色器意味着理解 GLSL 语言,这也是本课程的目的所在。您可以在 ShaderToy、ShaderFrog 或 glslViewer 上搜索合适的着色器,然后尝试修改代码。但是,如果不了解这种语言,你会发现这很难做到。要想真正有效,您需要了解 GLSL 语言、塑形函数、平铺、极坐标和光照计算。为此,您需要跟上课程,完成课程中提出的许多挑战。最后,您将能够创建任何您能想象到的着色器。

展开更多
发布
头像

{{ item.user.nick_name }} {{ EROLE_NAME[item.user.identity] }}

置顶笔记
讨论图
{{ item.create_time }}回复
  • 删除

    是否确认删除?

    确认
    取消
  • {{ item.is_top == 1 ? '取消置顶' : '置顶'}}

    已有置顶的讨论,是否替换已有的置顶?

    确认
    取消
{{ tag.text}}
头像
{{ subitem.user.nick_name }}{{ EROLE_NAME[subitem.user.identity] }}
{{ subitem.create_time }}回复
删除

是否确认删除?

确认
取消
发布
{{pageType === 'video' ? '讨论区抢占沙发,可获得双倍学分' :'讨论区空空如也,你来讲两句~'}}
发布
{{tips.text}}
{{ noteHeaderTitle }} 笔记{{ hasMyNote ? '我的笔记' : '记笔记' }}
{{ hasMyNote ? '我的笔记' : '记笔记' }}
优质笔记
更新于:{{ $dayjs.formate('YYYY-MM-DD HH:mm:ss', item.last_uptime*1000) }}
头像
{{ detail.username }}

公开笔记对他人可见,有机会被管理员评为“优质笔记”

{{ noteEditor.content.length }}/2000

公开笔记
保存
提问

讲师收到你的提问会尽快为你解答。若选择公开提问,可以获得更多学员的帮助。

记录时间点
记录提问时视频播放的时间点,便于后续查看
公开提问
提交