WebGL共0篇 第2页
WebGL
排序
手把手带你入门 Three.js Shader 系列（二）
又是时隔两个月才更新这第二篇教程，原本以为最多一个星期就能更新出来，但写着写着总觉得有些地方解释的不够清楚，于是写到一半就放在一边，终于觉得不能再拖下去才找出来花两天继续写下去。可...
2年前
基于three.js实现第一人称的碰撞检测
简介 通过three.js我们可以在网站中实现比较不错的3D效果，但three.js仅仅只是一个渲染库，如果想要做碰撞检测的话，通常情况会加上物理系统。 但今天，我想聊的是通过three.js的内置模块Octree...
2年前
前端进阶WebGL中数学知识(二)——向量
前言 本文将讲解网页3D开发中,大量使用的向量方面的知识内容,比如点乘叉乘的意义和作用。 将主要会围绕着什么是向量,作用,运算规则,几何意义和数学推导等几个方面展开。 什么是向量 向量是既有...
2年前
WebGL学习（十八）加载三维模型
1. 概述 之前学习了这么多计算机图形的知识，但是我们使用的图形都只是简单的立方体，如果我们想要画一个复杂的图形那将需要定义非常多的顶点数据，还要微调很多细节曲面。全部手工绘制确实很麻...
2年前
椰子树
YouTube 又可以用了，我就捡起了好久没搞的shader（数学）绘图 。 看视频还是有不便之处的（代码不太容易看清），幸好站上也有代码。 本文，跟着视频,看着代码，一起来绘制一棵椰子树。 准备好s...
2年前
上车WebGL——走进奇妙的3D世界，绘制第一个立方体
哈喽大家好啊，我是广州小井。在学习和铺垫了很多枯燥无味的基础知识后，我们终于要开始接触到 WebGL 神奇的另外一面——三维图形了！于是乎，当我们学成以后，那种炫酷网页上面的 3D 效果对于...
2年前
上车WebGL——图形2D动画
哈喽大家好啊，我是广州小井。经过上两个小节的学习，我们基本掌握了矩阵在 WebGL 中的应用，2D的图形变换实现也不在话下了。那么这一小节，我们接着以上学习的变换效果，来实战图形动画，让图...
2年前
WebGL+Three.js—第二章 多图形绘制和动画
2.1 使用缓冲区对象 2.1.1 什么是缓冲区对象 缓冲区对象是WebGL系统中的一块内存区域，可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。 ...
2年前上车WebGL——图形的复合变换
哈喽大家好啊，我是广州小井。上一小节我们初步用矩阵实战了图形平移，但它的应用远不如此！本文，我们将继续深入矩阵，看看它是如何在复合变换中发光发热的吧～ 因为要更好的学习 WebGL 就需要...
2年前
WebGL学习（十七）阴影
1. 简介 之前我们使用光照让物体表面有不同的颜色，看起来更加立体逼真。但是没有影子还是缺了点真实感，这里我们用到上一节的帧缓冲，通过阴影贴图shadow map或称深度贴图depth map技巧，实现...
2年前上车WebGL——用矩阵实战图形变换
哈喽大家好啊，我是广州小井。上一小节我们初步接触了矩阵的数学基础，但我们还不知道学来干嘛？那这一节我们马不停蹄的来应用矩阵进行实战！ 因为要更好的学习 WebGL 就需要更多的上手敲代码，...
2年前
WebGL+Three.js—第一章 WebGL简单应用
1.1 canvas和webgl的区别 1.1.1 <canvas>画布 <canvas>是HTML5新增的一个DOM元素 用途：显示二维和三维的图像。 绘制：二维图形可以使用（Canvas API 或 W...
2年前上车WebGL——初探图形学的数学基础
哈喽大家好啊，我是广州小井。上一小节我们初步接触了图形的二维变换，但每一个变换我们都是通过不同的数学公式计算顶点坐标实现的，那有没有统一的计算方式呢?不急，我们先来学点数学知识吧！ ...
2年前
Threejs 让人眼前一亮的隧道穿越 ???
心里装着小星星生活才能亮晶晶。 写在最前 相信6月14号 Uzi 复出首场的比赛大伙都赶上了吧，看完感觉和上次复出的状态完全不一样，这一次像是来真的了，发挥的还算不错，对线打团丝毫没有掉链子...
2年前
WebGL学习（十六）渲染到纹理（帧缓冲）
1.介绍 之前章节学习纹理的时候，我们是将外部现成的图片作为纹理，渲染到图像上。 而这里我们将要使用自己渲染的图像，作为纹理，渲染到另外一个图像上。也就是可以动态生成纹理。 2. 帧缓冲Fr...
2年前
一起学 WebGL：纹理对象学习
大家好，我是前端西瓜哥，今天我们来了解 WebGL 的纹理对象（Texture） 纹理对象，是将像素（texels）以数组方式传给 GPU 的对象，常见场景是贴图，就是将图片的数据应用到 3D 物体上。 纹理对...
2年前上车WebGL系列——图形的平移、缩放、旋转
哈喽大家好啊，我是广州小井。继上一章节了解 WebGL 颜色和纹理后，接着来学习图形的二维变换。从本文开始我们将逐步了解 WebGL 中的图形二维变换、动画的实现。文中附有大量实战案例在线演示，...
2年前
尝鲜：antd的G6v5的alpha版本发布了
antd得G6v5的alpha版本发布了 总的来说对性能有了质的提升，搓搓手期待！基于v5版本的demo,发布会demo、视频我放下面了： v5demo地址： G6 5.0：优雅 & 专业的图可视化引擎 v5发布会视频地...
2年前
一起来探索 WebGL 的魅力吧！?
WebGL 是一项令人兴奋的技术，它赋予了网页浏览器强大的3D图形绘制能力。通过 WebGL，我们可以在浏览器中创建逼真的3D场景、动画和交互体验。本文将带你深入了解 WebGL 的基础知识，并通过简单...
2年前上车WebGL系列——深入 WRAP 和多纹理
哈喽大家好啊，我是广州小井。继上节实现了深入纹理 FILTER 后，本文将继续深入WRAP和多纹理的细节，探讨各种配置参数的效果，多纹理实战。文中附有大量实战案例在线演示，通俗易懂～ 因为要更...
2年前