前端智能化实践 ——从图片识别UI样式 发表于 2020-09-01 导语:前端智能化,就是通过AI/CV技术,使前端工具链具备理解能力,进而辅助开发提升研发效率,比如实现基于设计稿智能布局和组件智能识别等。 本文要介绍的是前端智能化的一类实践:通过计算机视觉和机器学习实现自动提取图片中的UI样式的能力。 具体效果如上图,当用户框选图片中包含组件的区域,算法能准确定 ... 阅读全文 »
WebGL进阶——走进图形噪声 发表于 2019-06-11 导语:大自然蕴含着各式各样的纹理,小到细胞菌落分布,大到宇宙星球表面。运用图形噪声,我们可以在3d场景中模拟它们,本文就带大家一起走进万能的图形噪声。 概述图形噪声,是计算机图形学中一类随机算法,经常用来模拟自然界中的各种纹理材质,如下图的云、山脉等,都是通过噪声算法模拟出来的。 通过不同的噪声算 ... 阅读全文 »
Web Audio实现3D音效 发表于 2019-06-11 在3d开发中,除了图形视觉渲染,音频处理是重要的一环,好的音频处理可以欺骗用户的听觉,达到身临其境的效果,本文主要介绍Web3D中沉浸式音频的实现。 3D Audio3d沉浸式场景音频的输出硬件主要是耳机,根据音频源与场景之间的关系,可将3d音频分为两类:静态音频和空间化音频(audio spat ... 阅读全文 »
写给前端的Python依赖管理指北 发表于 2019-06-11 概述在Python的项目中,我们可以通过pip来安装依赖包,但是不像npm install,pip默认安装的依赖包会挂在全局上,不利于项目工程协作。 这时候需要一款类似npm的工具记录我们的项目依赖Pipenv。 安装Pipenv我们通过pip安装Pipenv:1$ pip install pipe ... 阅读全文 »
WebVR教程--使用Gamepad API 发表于 2017-12-07 上期从头显和手柄两个层面对VR交互事件进行介绍,前者使用的是WebVR API,而后者则需用到Gamepad API,本期将对Gamepad API展开介绍。 Gamepad APIGamepad API是一个HTML5接口,让开发者可以通过js访问游戏手柄,使用Gamepad API的第一步是获取 ... 阅读全文 »
WebVR教程--交互事件 发表于 2017-12-07 前两期主要介绍了开发WebVR应用的基本套路,不过开发出来的场景还只是“可远观而不可亵玩”,缺乏交互性,本期将带大家走进VR交互世界,看看WebVR事件是如何开发的。 VR交互有哪些?在可交互的VR世界里,用户不再只是个观察者,而是虚拟世界中一个生命,可以与虚拟世界进行通信。这种通信应该是双向的: ... 阅读全文 »
WebVR教程--Cardboard与凝视事件 发表于 2017-09-16 Cardboard与gaze注视Cardboard可以说是手机VR头显的元老了,狭义上指的是Google推出的一个带有双凸透镜的盒子,广义上则表示智能手机+盒子的VR体验平台。 它的交互方式较为简单,利用了手机的陀螺仪,采用gaze注视行为来触发场景里的事件,比如用户在虚拟商店中注视一款商品时,弹 ... 阅读全文 »
WebVR工程搭建 发表于 2017-09-05 本文旨在介绍如何搭建WebVR工程以支持多场景开发。 首先,作为一个基本的前端工程来说,我们需要让代码“工程化”,不仅要提供编译构建、压缩打包功能,还要让每个页面模块化;延伸到WebVR工程,我们也需要考虑就必须考虑“多页面”模块化,即提供多个场景模块化开发,因为一个完整的WebVR App不仅 ... 阅读全文 »
WebVR教程--深度剖析 发表于 2017-08-15 最近WebVR API 1.1已经发布,2.0草案也在拟定中,在我看来,WebVR走向大众浏览器是早晚的事情了,今天本人将对WebVR开发环境和开发流程进行深入介绍。 WebVR与WebVR API首先,WebVR指的是使用浏览器体验VR的方式,如今已经成为了一种开放标准。它提供了JavaScrip ... 阅读全文 »
WebVR教程--标准入门 发表于 2017-07-05 WebVR即web + VR的体验方式,我们可以戴着头显享受沉浸式的网页,新的API标准让我们可以使用js语言来开发。本文将介绍如何快速开发一个WebVR网页,在此之前,我们有必要了解WebVR的体验方式。 WebVR体验模式 WebVR的体验方式可以分为VR模式和裸眼模式 VR模式1.Mobil ... 阅读全文 »