前端可视化入门与实战- 掘金小册课程推荐/优惠

前端可视化入门与实战--掘金小册课程推荐/优惠

从基础到高阶,全面掌握二维和三维的前端可视化开发
谦宇
41讲 | 1191人已学习
优惠价¥59.9
官网购买

版权声明

本站非掘金小册官网,与官方无任何关系。我们不提供课程下载或详细内容,仅作为课程分享和推荐平台。我们鼓励大家支持正版,尊重创作者的劳动成果,这样不仅能帮助创作者持续产出优质内容,也能让自己获得更好的学习体验。请通过官方渠道购买和学习课程,感谢您的理解与支持。

课程详情

课程介绍

作者介绍

谦宇,某金融公司资深前端开发工程师。公众号“谦宇的编程世界”作者,对前端可视化有多年的深入研究。

小册介绍

可视化是指通过图表、图形、地图等视觉元素来展示数据信息的过程。

随着信息技术的发展,我们面临着海量的数据和复杂的信息,这些数据和信息往往是抽象和难以理解的。而可视化技术的出现为我们提供了一种直观、清晰地呈现数据和信息的方式。

在商业领域,可视化被广泛应用于市场调研、销售分析、业务报告等方面。在科学研究领域,可视化被用于展示实验结果、模拟数据。另外,还有三维地图、编辑器等应用发展前景。

除此之外,新的技术也在不断涌现。比如,WebGPU 是作为 WebGL 继任者而出现的新一代 Web 图形编程接口,被设计用于解决 WebGL 在性能、功能和跨平台支持方面存在的一些限制和挑战。

在具体业务方面,估计你也曾经遇到过以下场景:

  • 你是否在平常的业务开发中为了实现图表需求,往往调库就草草收场,很多时候并没有深究其原理,或者并没有二次改造的能力?
  • 你是否对三维世界的可视化应用一脸茫然?
  • 你是否无法对可视化相关的开源源码深入理解?
  • 你是否无法根据需求做合理的可视化技术选型?
  • ……

可惜遗憾的是,解决该时代背景和业务要求的技术书籍是很缺失的。因此,这也是该小册的创作初衷,希望做一门“能快速让你掌握可视化的技术体系及实践”的课程。

小册优势

有小伙伴可能会问:与市面上其他可视化课程相比,我们小册有什么优势呢?

在做课程设计之前,作者大致调研并总结了市面上可视化方向课程存在的一些问题:

  • 针对某个面学习,缺乏前端可视化体系的构建;
  • 喜欢用高深的数学提高门槛,难以理解;
  • 缺乏实战应用。

正是汲取以上学习难点的经验,本小册会尽力帮助你构建前端可视化的体系基础,用通俗易懂的语言帮助你快速理解原理,并能理论结合实践,手把手带你开发出常用的图表、动画、特效、游戏、编辑器等

小册内容设置

本小册的技术方向是 Web 前端可视化开发领域,从简单的 CSS,到复杂的二维技术 SVG + Canvas,然后转变思维学习三维世界的 Three.js,最后深入图形原理的 WebGL + WebGPU

小册大纲如下:

就这样从简单到复杂,让你一步一步理解、应用,并最终搭建自己的可视化体系。这样每当遇到问题的时候,你都会停下来思考是不是用其他方案能更好,求得最优解。

你会学到什么?

所学内容及目标总览:

  1. 理解前端可视化理论基础、图表设计基础;
  2. 熟练掌握 CSS 可视化高级应用;
  3. 熟练掌握 SVGD3,并可以独立开发高级图表;
  4. 熟练掌握 Canvas,并可以独立开发高级图表、游戏开发;
  5. 熟练掌握 Three.js,理解源码,并可以独立开发 3D 图表、编辑器、游戏开发;
  6. 熟练掌握 WebGL,理解原理,并可以独立书写 GLSL、动效、建模;
  7. 熟悉 WebGPU,理解原理,并可以独立书写 WGSL、动效、建模;
  8. 前端可视化在不同业务场景的解决方案。

下面是本小册在实战环节做的部分效果展示:

适宜人群

  • 有 CSS、HTML、JavaScript 的前端基础;
  • 对可视化技术(如 CSS、Canvas、SVG、Three.js、WebGL、WebGPU 等)有浓厚兴趣的前端工程师;
  • 对可视化应用(如图形编辑器、模型编辑器、游戏开发、多维图表等)有实战想法的工程师。

课程目录

  • 开篇:可视化学习脉络
  • CSS:快速拿捏 2D、3D 图表
  • SVG:矢量化标记语言速学
  • 理论篇:一文聊懂可视化
  • 理论篇:图表设计的神奇法则
  • CSS:一文总结高阶技巧
  • Canvas:一文速学 HTML5 的画布
  • SVG:动效、编辑器、图表实战
  • SVG:从 0 到 1 实现思维导图
  • D3 高级图表实战:柱状图、折线图
  • Canvas 游戏篇:一文入门 H5 游戏开发
  • D3 高级图表实战:饼图、雷达图
  • Canvas 动效篇:实现粒子特效、曲线特效
  • Canvas 图表篇:从 0 到 1 实现金融图表 K 线图
  • Canvas 应用篇:实现 Konva 图形编辑器
  • Canvas 游戏篇:上手游戏引擎 Phaser.js
  • Three.js:一个简单的游戏案例带你入门
  • 源码篇:Three.js 源码剖析
  • Three.js:React Three Fiber 实践与原理
  • Three.js:实现三维建模软件
  • Three.js:实现 ECharts 官方示例 Bar3D 图表
  • Shader:一文速学 GLSL 语法
  • WebGL:一文速学 WebGL 基础
  • WebGL:光照模型 Phong 实现
  • WebGL:UV 纹理
  • WebGL:图表应用
  • WebGPU:面向未来的图形 API
  • WebGPU:构建模型与纹理
  • 结尾:路漫漫其修远兮
  • Canvas 游戏篇:从 0 到 1 开发横版卷轴游戏
  • Three.js:高级材质应用
  • Canvas 图表篇:从 0 到 1 实现柱状图、饼图
  • 源码篇:ZRender 源码解析
  • 源码篇:ECharts 架构分析
  • WebGL:向量与矩阵应用
  • Shader:理解图形和函数的关系
  • Shader:Ray Marching 光线追踪与 SDF
  • R3F 实战篇:多人联机社交游戏
  • Shader:模型动画的高阶技巧
  • WebGPU:一文速学 WGSL 语法
  • Shader:随机性算法

作者介绍

资深前端工程师
小册《前端可视化入门与实战》作者,公众号: 谦宇的编程世界

推荐

IntelliJ  IDE 插件开发指南 - 掘金小册课程推荐/分享/优惠/折扣
IntelliJ IDE 插件开发指南
搭建+开发+售卖,你的第一本商业化 IntelliJ IDE 插件开发 CookBook
洪进锋
1023人已学习
优惠价¥29.9
官网购买
技术人求职指南 - 掘金小册课程推荐/分享/优惠/折扣
技术人求职指南
从准备求职到拿下心动 Offer,一本职场的全方位攻略
竹子爱熊猫
1286人已学习
优惠价¥49.9
官网购买
Flutter 语言基础 - 梦始之地 - 掘金小册课程推荐/分享/优惠/折扣
Flutter 语言基础 - 梦始之地
从语法到思想,欢迎来到 Flutter 梦开始的地方 ~
张风捷特烈
2219人已学习
优惠价¥3.5
官网购买
Next.js 开发指南 - 掘金小册课程推荐/分享/优惠/折扣
Next.js 开发指南
基础篇、实战篇、源码篇、面试篇四大篇章带你系统掌握 Next.js!
冴羽
3446人已学习
优惠价¥99.9
官网购买
MySQL 是怎样使用的:从零蛋开始学习 MySQL - 掘金小册课程推荐/分享/优惠/折扣
MySQL 是怎样使用的:从零蛋开始学习 MySQL
来来来,你什么都不用会,真正的从零蛋开始系统又轻松地学习MySQL。
小孩子4919
5772人已学习
优惠价¥19.9
官网购买
RocketMQ 核心原理解析 - 掘金小册课程推荐/分享/优惠/折扣
RocketMQ 核心原理解析
生活场景驱动,由浅入深带你搞懂 RocketMQ
SH的全栈笔记
1484人已学习
优惠价¥39.9
官网购买