WebGL - 收藏集 - 掘金

图解 WebGL&Three.js 工作原理 - 前端 - 掘金
“哥，你又来啦？”“是啊，我随便逛逛。” “别介啊……给我20分钟，成不？”“5分钟吧，我很忙的。”“不行，20分钟，不然我真很难跟你讲清楚。”“好吧……”“行，那进来吧，咱好好聊聊”   一、我们讲什么？ 我们讲两个东西：1、WebGL背后的工作原...

H5 动画开发快车道 - 前端 - 掘金
janilychen ...

Threejs之二:相机详解 - 掘金
透视投影相机(THREE.PerspectiveCamera) 所谓透视投影相机(PerspectiveCamera),基本等同于人的眼睛,意思就是:离的远的物体会显得比较小,近处的物体会比较大.透视投影相机的构造函数: PerspectiveCamera...

近期项目中用到的一些自己写的或者整理而成的前端效果干货 - 前端 - 掘金
PUI总目录 想查看源代码，可以自行F12，或在github中直接查看源码，或者欢迎直接留言。 一、jQuery上下滚动抽奖效果 这jQuery插件主要是被使用到一些抽奖页面。效果如下： 点击查看 在线演示   二、JQ...

Threejs 入门教程 - 前端 - 掘金
简介: Three.js是一个伟大的webGL开源库,它简化了浏览器3D编程,对webGL进行了封装,使得开发者可以直接使用JavaScript在浏览器中创建复杂多变的全景3D场景. Three.js官网:https://threejs.org/; Three...

HT for Web 自定义 3D 模型的 WebGL 应用 - 前端 - 掘金
有不少朋友询问《HTML5 Web 客户端五种离线存储方式汇总》文章例子的3D表计模型是如何生成的，这个例子是通过导入3dmax设计好的表计模型，然后通过obj格式导入到HT for Web系统中进行控制，这种方式特别适合复杂模型的应用场景，但对于监控系统的很...

《穿越宇宙的邀请函》没你想得那么难 - 前端 - 掘金
前几天天猫双十一预热页面——《穿越宇宙的邀请函》，几乎是迄今为止移动端大型活动运营页面中最炫酷的一个，狠狠地刷了一波朋友圈。如果还没看过，可以在移动端打开这个链接欣赏一下。这里从技术角度对它进行一些比较详细的分析。先上结论，这个页面在实现上并不复杂，不管是技术...

Two.js - 前端 - 掘金
一个前端绘图的工具，用统一的 API 来绘制 SVG / Canvas / WebGL 等图像画面。...

WebGL 实现雨水特效实验 - 前端 - 掘金
示例 下载源码 今天我们将要和大家分享一些 WebGL 实验，在这个实验中我们将创建一个非常逼真的雨滴效果，并把它放到不同的场景中去。在这篇文章中，我们将给出制作这种效果所用到的一些一般性技术和技巧的概览。 请注意：文中制作的效果还处于试验阶段，可能无法在所有...

Sigma.js - 前端画 Graph 工具 - 前端 - 掘金
一个基于 Canvas，WebGL 优化的前端画图工具，可以展示 Graph 各种形态及交互动作...

超酷的 WebGL 水母动画 - 前端 - 掘金
可以旋转视图、放大缩小...

WebGL技术储备指南 - 前端 - 掘金
WebGL 是 HTML 5 草案的一部分，可以驱动 Canvas 渲染三维场景。WebGL 虽然还未有广泛应用，但极具潜力和想象空间。本文是我学习 WebGL 时梳理知识脉络的产物，花点时间整理出来与大家分享。 示例WebGL 很酷，有以下 demos 为证...

HTML5, CSS3, WebGL, SVG 动效库 - 前端 - 掘金
一个 HTML5, CSS3, WebGL, SVG 动效库...

[[翻译] 图形学秘籍的目录 Real-Time Rendering3-- 图像渲染管线 - 前端 - 掘金](https://juejin.im/entry/57844...
实现渲染最核心的组件是图像渲染管线，也简单的称为管线。它最主要的功能是在指定的虚拟摄像头，3d对象，光源，阴影方程式，纹理等里，生成或渲染出一张2d图片。在这张生成图里，所有对象的坐标和形状都会受到它们自身几何形状，摄像头摆放的位置，以及周围环境的影响。而它们...

WebGL 绘制三角形 - 前端 - 掘金
在上一篇文章WebGL 初探中，我们熟悉了 WebGL 的简单背景以及如何绘制一个简单的点。但是只绘制点我们是无法进入三维世界的，本篇章将讲解如何使用 WebGL 绘制三角形，因为很多 3D 图形都是使用三角形为基础进行渲染的，所以有些对 GPU 性能指标的评...

一个采用 Three.js 的 3D 动画场景制作：飞行者 - 前端 - 掘金
翻译了这么久～含泪终于！终于！终于！翻译完人生第一篇译文了.. 本文译自：The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js 一篇关于探讨使用 Three.js 创建 3D...

WebGL 初探 - 前端 - 掘金
目前，我们有很多方案可以快速的接触到 WebGL 并绘制复杂的图形，但最后发现我们忽视了很多细节性的东西。当然，这对初学 WebGL 是有必要的，它能迅速提起我们对 WebGL 的学习兴趣。当学习到更加深入的阶段时，我们更想了解 WebGL 的工作机制，这也将...

数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇 - 前端 - 掘金
《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》一文让读者了解了 HT 的 2D 拓扑图组件使用，本文将对 HT 的 3D 功能做个综合性的介绍，以便初学者可快速上手使用 HT 构建例如电信网管 3D 机房应用、水务燃气 SCADA 监控应用及智...

用 WebGl 加速 2D 渲染 - 前端 - 掘金
Introduction This is a library targets 2D hardware-acclerated graphic rendering. This is useful in data presentation scenario In...

WebGL - 片元着色器 0. 模板准备 - 前端 - 掘金
前面一段时间写了三篇关于webgl入门的文章，先是讲了下计算机图形学简介，再是成像原理，以及几何对象和坐标变换，感觉自己讲的不好，讲的不够入门。所以暂时组织一下文章节奏，比如几何对象和坐标转换完全可以拆分下。成像原理完全可以讲一下着色器。 在这个调整的...

WebGL - 片元着色器 1.Bloom 特效实现 - 前端 - 掘金
第一件事先上demo吧     Bloom特效 demo下载地址 ...

WebGL - 片元着色器 2. 灰度图实现 - 前端 - 掘金
灰度图 老规矩第一步上 demo demo下载地址 灰度图定义 首先我们看看什么叫做灰度图。可能大家会混淆一些东西，比如我们以前的黑白电视机，实际上不是黑白的，而是有灰度的。 灰度图： 灰度图...

HTML5 的 WebGL 实现的 3D 和 2D 拓扑树 - 前端 - 掘金
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合HT for Web的弹力布局组件会显得比较直观，...