webgl学习

SuperMap iClient3D for WebGL学习笔记（一）——加载三维场景

作者：赵爽使用产品：SuperMapiDesktop&SuperMapiServer产品下载地址：http://support.supermap.com.cn/DownloadCenter/ProductPlatform.aspx产品配置环境启动iServer（最后一行显示Serverstartupin***ms为启动成功）将webgl包放在iServer根目录下的webapps文件夹内操作步骤在
weixin_43565052·2023-11-20 14:45

WebGL学习笔记（二）：利用缓冲区动态绘制多个点

上一个程序中，只实现了静态的单点绘制的，点的位置和颜色都是写死在着色器中的。如果想要动态的显示点，将交互添加进去，我们就需要实现使用JavaScript向着色器中传值，这就需要使用到缓冲区。在上一个程序基础上，实现点击时生成随机颜色点的效果。一、修改着色器代码我们需要将着色器中创建几个变量。着色器中一共有三种变量类型attribute:只能在顶点着色器中声明和使用，常用来存放顶点坐标，顶点颜色，法
Qc1998·2023-10-26 05:16

WebGL学习笔记-使用3D引擎threeJS实现星空粒子移动

演示地址:http://creativejs.com/uploads/tutorials/three/Part1_particles/ThreeParticles.htmlthree.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js是一款运行在浏览器中的3D引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。下载地址:http://
weixin_30497527·2023-10-20 21:12

WebGL学习系列-多边形绘制原理

前言前面学习了通过缓冲区对象来绘制多个点的原理，在实际的3D世界里，有好多复杂的模型，但细化分解后又是由一个个基础的几何图形构成的，掌握了基础图形的绘制才能够理解更加复杂的模型。本节将会讲解三角形，矩形以及利用三角函数绘制圆。WebGL几何图形绘制之前的篇章我们通过drawArrays这个api绘制过单个点以及多个点，然而，它的功能不仅仅如此，它也是绘制多边形的基石。先来看下面这张熟悉的图：dra
那个天真的人·2023-09-26 02:39

WebGL

1.2WebGL学习基础物理知识、{HTML、CSS、JavaScript、计算机图形学}、数学基础1.3WebGL学习资料网站：WebGL中文网：WebGL中文网GAMES计算机
小白啥时候能进阶成功·2023-09-26 02:35

原生webgl学习（五） WebGL绘制矩形（二）：更简洁的代码

本专栏所有文章示例代码均可在我的gitee码云上获取，读者可自行下载：https://gitee.com/babyogl/learnWebGL；本文demo代码在chapter-03下的rectangle-01.html，读者可以自行下载查看；前面三节笔者分别实现了：用WebGL绘制一个三角形，WebGL中的矩阵运算：平移、旋转和缩放，WebGL绘制矩形等几个demo，也许细心的读者会发现代码很凌
coder_路远·2023-09-10 20:48

原生webgl学习（四） WebGL绘制矩形（一）

上节课笔者绘制了一个颜色随顶点位置变化的三角形，实现平移、旋转和缩放变换的矩阵计算，并提供了一个可供交互的菜单栏工具：原生webgl学习（三）WebGL中的矩阵运算：平
coder_路远·2023-09-10 20:18

WebGL学习之路

在这里记录一下个人的WebGL学习过程作为GIS开发工程师四年，技术栈和项目经验都有了一定积累，感觉到了一个瓶颈。经过一些讨论和思考，认为可以向两个方向发力，后端方向的空间大数据处理，前端方向的三维。
GIS小虫·2023-09-09 19:35

WebGL学习笔记——二维矩阵变换

平移二维平移矩阵WebGL学习笔记——二维矩阵变换说明：(x',y')是原坐标(x,y)分别在x轴方向移动tx，y轴方向移动ty之后得到的新坐标使用python的numpy矩阵处理模块、matplotlib
辣椒爸·2023-08-27 05:35

Webgl学习笔记 1 初始化shader

编译GLSLES代码,创建和初始化着色器供WebGL使用.1,创建着色器对象(gl.createShader());2,向着色器中填充着色器程序的源代码(gl.shaderSource())3,编译着色器(gl.compileShader())4,创建程序对象(gl.createPorgram())5,为程序对象分配着色器(gl.attachShader())6,连接程序对象(gl.linkPro
AlanFu·2023-08-02 16:52

WebGL学习(3) - 3D模型

  原文地址：WebGL学习(3)-3D模型  相信很多人是以创建逼真酷炫的三维效果为目标而学习webGL的吧，首先我就是?。
qq_45670012·2023-07-14 02:44

TS及webgl学习之路1。

123456TypeScriptHTMLApp789101112.showWindow{13width:400px;14height:400px;15background-color:silver;16}171819202122HTML部分，主要引入了逻辑代码块的TS代码及现成的矩阵JS库还有自己写的TS的JS声明文件d.ts1classGreeter{2element:HTMLElement;3
weixin_30827565·2023-06-13 14:48

webGL总结

WebGL学习汇报一、WebGL简介WebGL和3D图形规范OpenGL、OpenCL一样来自KhronosGroup，而且免费开放。
哟呼很多事·2023-02-01 13:36

WebGL-学习笔记（四）

WebGL学习笔记（四）.png最近学习构建三维图形的时候，深感几何功底不够，一个视图变化矩阵看了几天也没想过来，只勉强理解原理，细节部分自己还需要加强学习1.视图变换在二维图形绘制的时候，不用考虑z轴
Patrick浩·2023-01-31 18:42

WebGL学习笔记——顶点着色器和片元着色器

参考书籍：《WebGL编程指南》随着学习的逐步深入，对顶点着色器和片元着色器有了更进一步的理解，之前的文章WebGL学习笔记--绘制三角形由于还没有学习片元着色器的知识，因此直接忽略了片元着色器，本文仍以如何绘制三角形为例介绍顶点着色器
辣椒爸·2023-01-26 17:50

Unity关于webgl学习

打包后的文件：如何创建webgl模板？简单的方法：先用默认模板打包，然后复制TemplateData文件夹，复制到Assets/WebGLTemplates,比如叫Test,那么在ProjectSettings的WebGLTemplate地方就会看到一个叫Test名字的模板，选择即可。默认模板是Default。打包显示效果模板里边的样式，logo等资源，可以自定义，打包时勾选自定义模板即可。web
andy#wang·2022-12-19 22:51

WebGL学习记录(1)

WebGL（Web图形库）是一个JavaScriptAPI，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGLES2.0非常一致的API来做到这一点，该API可以在HTML5元素可被用来通过JavaScript（CanvasAPI或WebGLAPI）绘制图形及图形动画。")元素中使用。这种一致性使API可以利用用户设备提供的硬件图形加
ShineaSYR·2022-02-10 21:28

WebGL-学习笔记（五）

WebGL学习笔记（五).png1.光照和反射要知道看到的物体的颜色实际上是物体反射的光的颜色，物体吸收了部分频率的光，将不能吸收的光进行了反射，从而我们看到了对应物体呈现的颜色。
Patrick浩·2022-02-06 22:20

WebGL学习之HDR与Bloom

原文地址：WebGL学习之HDR与Bloom什么是HDRHDR(HighDynamicRange，高动态范围)，在摄影领域，指的是可以提供更多的动态范围和图像细节的一种技术手段。
jeffzhong·2021-12-26 15:39

WebGL学习(3) - 3D模型

原文地址：WebGL学习(3)-3D模型相信很多人是以创建逼真酷炫的三维效果为目标而学习webGL的吧，首先我就是。
jeffzhong·2021-05-19 23:04

WebGL学习(2) - 3D场景

原文地址：WebGL学习(2)-3D场景经过前面的学习，我们已经掌握了webGL的基础知识，也已经能够画出最基本的图形，比如点，线，三角形，矩形等。
jeffzhong·2021-05-08 14:27

WebGL学习笔记（一）

WebGL学习笔记（一）一个最简单的webgl程序*引入的js文件是简单的webgl辅助函数*canvas{margin:0auto;}//顶点着色器varVSHADER_SOURCE='voidmain
kael丶卡尔·2021-04-30 16:07

WebGL-学习笔记（一）

WebGL学习笔记（一）.png反正不管你信不信，我觉得WebGL是接下来一个时代的流量入口啦，谁不喜欢酷炫的东西，所以本着跟着时代步伐的精神，终于开始进行WebGL的学习啦（饶过我JS的学习还没有结束
Patrick浩·2021-04-24 09:36

WebGL学习笔记--WebGL入门

什么是WebGL?全称是WebGraphicsLibrary，是一个javascriptAPI，用于在支持的浏览器中呈现高性能的交互式2D和3D图形，而不需要依赖任何插件。使用WebGL有几大优势：1.只需要一个文本编辑器和一个浏览器，就可以编写三维程序了。2.你可以使用通用的Web技术发布3D应用，非常容易地在互联网上发布和分享。所谓通用的Web技术就是HTML、javascript，任何一位w
辣椒爸·2020-11-23 22:02

WEBGL学习【十五】利用WEBGL实现三维场景的一般思路总结

实现三维场景载入操作的实现步骤：主要知识点：着色器，纹理贴图，文件载入实现思路：获取canvas，初始化WEBGL上下文信息。主要是实现WEBGL上下文的获取，设置视的大小，此时gl存储了WEBGL的上下文信息初始化着色器初始化的过程中也在这里获得了顶点着色器和片元着色器中的变量存储的地址信息。主要是实现：创建着色器对象gl.CreateShader();获取顶点着色器和片元着色器源码gl.Sha
weixin_30726161·2020-09-17 00:15

WEBGL学习【十四】利用HUD技术在网页上方显示三维物体

关键点：Pleaseuseabrowserthatsupports"canvas"js核心代码：//VertexshaderprogramvarVSHADER_SOURCE='attributevec4a_Position;\n'+'attributevec4a_Color;\n'+'uniformmat4u_MvpMatrix;\n'+'uniformboolu_Clicked;\n'+//Mo
小牛itbull·2020-09-16 22:56

webgl学习笔记-从画点开始

前言作者本人为webgl初学者，并没有什么高深内容，本系列为初学webgl的过程记录文章，欢迎大牛多多指点，本系列掺杂作者本人个人理解绝对会存在错误，会出现不定期勘误。如果对webgl有兴趣可以一起学习！作者文笔有限，主要以代码为主，见谅～什么是webgl简单来说webgl为浏览器提供了渲染复杂三维图形的能力，不了解的可以自行搜索，这里不在赘述。canvas创建webgl上下文html复制代码js
weixin_34301132·2020-09-12 11:53

我的webgl学习之路（五）用webgl画彩色三角形

要想做彩色三角线必须知道uniform、attribute、varying这三个声明；uniform表示一次渲染过程中保存不变的attribute表示是实时在改变的varying用来着色器之间的通讯,也就是顶点着色器和片段着色去之间的桥梁还需要注意的是varying在顶点和片元着色器两个中都声明一个一样的变量;那么它就会自动默认，两个有关系，但并不是相同的；片元着色器中得到的varying是经过插
那年我七岁·2020-09-12 11:48

[WebGL学习笔记]1.使用绘制点做一个简单的画板

1.一个简单的画板最近开始学习WebGL,把学到的很多东西做一下记录很多基础知识就不分享了，主要分享一些小demo效果图:点击鼠标并在画布上移动，可以根据你的鼠标移动路径画出一条简单的点路径过程如下：创建顶点着色器与片元着色器//顶点着色器varVSHADER_SOURCE="\n"+"attributevec4a_Position;\n"+"voidmain(){\n"+"gl_Position
幻梦往昔·2020-09-12 10:00

webgl学习路线总结

API：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_APIWebGL3DPerspective：https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-3d-orthographic.html#tochttps://webglfundamentals.org/webgl/les
dexia7362·2020-09-10 13:39

HTML5 WEBGL学习1 3D基础知识

本系列学习资源来自《HTML5与WebGL编程》中国工信出版集团人民邮电出版社3D图形的基础知识在计算机里显示3d图形,就是说在平面里显示三维图形。三维坐标系面对计算机在坐标系没有旋转的情况下，z轴实际上垂直屏幕向里的。另外，WEBGL的y轴正方向是由窗口的下方向上，而2DCanvasAPI和CSS变化中的y轴正方向则是由上而下的。网格、多边形与顶点绘制3D图形的方法有很多种。到目前为止，最常用的
谢厂节_编程圈·2020-08-24 18:51

我的webgl学习之路（一）

我的webgl学习之路（一）做项目中偶然需要移动端3d展示，所以学习了threejs;但是有着各种限制，还有就是项目要达到好的效果肯定是需要后期处理等等，所以展开了我学习webgl之路，我刚开始毫无目的的看了很多关于
那年我七岁·2020-08-22 13:41

WebGL学习之法线贴图

原文地址：WebGL学习之法线贴图实际效果请看demo：纹理贴图法线贴图为了增加额外细节，提升真实感，我们使用了漫反射贴图和高光贴图，它们都是向三角形进行附加纹理。
jeffzhong·2020-08-20 12:57

使用three.js画的简单的墙壁 在墙上挖了个门，做纪念

项目要用到web3d但是webgl学习起来太麻烦，先用three.js库写这点，初期做个记录。
dragonrxl·2020-08-01 12:16

[webGL学习]基于three.js构建WebGL实例第一讲

我们主要做些的基本功能：创建一个场景，相机，渲染器，控制器（OrbitControls）。我们也将创建简单的定向光，加上一些对象（不同的几何形状）的阴影。为了使事情更快，我们决定采取一个最流行的WebGL框架——three.js。为什么使用three.js？事实上，它是开源的JavaScript框架，它也是增长最迅速的和讨论很热烈的引擎。在这里，已经准备了很多会用到的东西，从基本的点和向量，到做准
刘玉刚·2020-08-01 09:51

WebGL学习系列-基础矩阵变换

前言在图形学中，特别是涉及到3D的时候，矩阵变换起着非常重要的作用。在实际使用的过程当中，通常每一帧画面可能都会涉及到成千上万个顶点的坐标变换，如果没有矩阵变换计算，一个是计算复杂，一个是难以达到我们想要的计算效率。本小节将介绍通过矩阵计算来实现基本的图形变换。矩阵矩阵是一种多个数据集合的表示方式，定义为：由m×n个数aij排成的m行n列的数表称为m行n列的矩阵，简称m×n矩阵。记作：矩阵的存在主
那个天真的人·2020-08-01 07:35

WEBGL学习【十五】利用WEBGL实现三维场景的一般思路总结

实现三维场景载入操作的实现步骤：主要知识点：着色器，纹理贴图，文件载入实现思路：获取canvas，初始化WEBGL上下文信息。主要是实现WEBGL上下文的获取，设置视的大小，此时gl存储了WEBGL的上下文信息初始化着色器初始化的过程中也在这里获得了顶点着色器和片元着色器中的变量存储的地址信息。主要是实现：创建着色器对象gl.CreateShader();获取顶点着色器和片元着色器源码gl.Sha
小牛itbull·2020-07-30 19:37

WebGL学习之纹理贴图

原文地址：WebGL学习之纹理贴图为了使图形能获得接近于真实物体的材质效果，一般会使用贴图，贴图类型主要包括两种：漫反射贴图和镜面高光贴图。其中漫反射贴图可以同时实现漫反射光和环境光的效果。
jeffzhong·2020-07-29 19:05

WebGL学习笔记1

Webgl介绍：WebGLisacross-platform,royalty-freewebstandardforalow-level3DgraphicsAPIbasedonOpenGLES2.0,exposedthroughtheHTML5CanvaselementasDocumentObjectModelinterfaces.DevelopersfamiliarwithOpenGLES2.0w
vincentff7·2020-07-29 11:07

Threejs Bloom(`UnrealBloomPass`通道)

OpenGLBloomWebGL学习之HDR与BloomOpenGL-HDR和Bloom
郭隆邦技术博客·2020-07-29 11:25

Threejs HDR

OpenGLHDRWebGL学习之HDR与BloomOpenGLBloomOpenGL-HDR和Bloomexamples相关案例如果你想了解Threejs关于HDR的资料或说threejs加载HDR贴图的资料
郭隆邦技术博客·2020-07-29 11:25

webGL总结

WebGL学习汇报一、WebGL简介WebGL和3D图形规范OpenGL、OpenCL一样来自KhronosGroup，而且免费开放。
naooomi·2020-07-29 10:23

[webGL学习]基于three.js构建WebGL实例第五讲

今天，我们将继续学习webgl（three.js）这门课程，今天我们将向您展示如何以三种不同的方式为您的场景创建一个美丽的环境（天空立体景象）：立方天空盒侧面），球形天空盒（单周围纹理）和球形着色器天空盒（无纹理）。我们会用到下面一些比较特殊的属性：反射，折射和类似soapbubble的对象。#一般结构现在我们可以开始，首先，定义一般结构：varlesson5={scene:null,camera
刘玉刚·2020-07-29 09:22

WebGL学习笔记（三）坐标系的秘密

three.js使用的是右手坐标系如图所示：关于旋转方向的问题：图上是围绕y轴+a的旋转方向。cube.rotation.y+=0.10.1的意义：旋转一圈为2π2π≈2*3.14=6.28加的值小的话旋转的就会慢打印值console.log(cube.rotation.y)画坐标系：varaxisHelper=newTHREE.AxisHelper(5);scene.add(axisHelper
一个阳光帅气的小伙子啊·2020-07-14 06:31

WebGl学习入门心得

原文章发布在自己博客：http://aircloud.10000h.top/45写在前面想写这篇文章想好久了，这半年在学校的课程中，自己最认真学习的就是图形学这门课程的内容，当然主要是因为自己想要研究一下WebGl，最终课程部分也取得了5.0的满绩,也算是对自己一个小小的认可。WebGl和OpenGL关于WebGl的学习，虽然有Web也有Gl，但是说实话，首先要懂OpenGl(3.0+)，会Ope
我们认识么·2020-07-12 04:10

WEBGL学习【九】立方体贴不同的纹理

NeHeWebGL----环境光（光照模型）precisionmediumpfloat;varyingvec2vTextureCoord;varyingvec3vLightWeighting;uniformsampler2DuSampler;voidmain(void){vec4textureColor=texture2D(uSampler,vec2(vTextureCoord.s,vTextur
小牛itbull·2020-07-11 12:43

webgl学习笔记五-纹理

webgl学习笔记一-绘图单点webgl学习笔记二-绘图多点webgl学习笔记三-平移旋转缩放术语：纹理：图像图形装配区域：顶点着色器顶点坐标信息装配图形：片元着色器装配光栅化：显示在屏幕上的三角形是由片元
weixin_33805743·2020-07-10 19:15

WEBGL学习【一】初识WEBGL

NeHe'sWebGLprecisionmediumpfloat;voidmain(void){gl_FragColor=vec4(1.0,1.0,1.0,1.0);}attributevec3aVertexPosition;uniformmat4uMVMatrix;uniformmat4uPMatrix;voidmain(void){gl_Position=uPMatrix*uMVMatrix*
小牛itbull·2020-07-07 16:12

webgl学习（一）

第一次知道webgl是因为项目需要，老板让我去看看webgl。打开网站一堆英文表示看不懂，心累。意外发现了threejs，它是一个基于webgl的库，封装了一些3D渲染需求中重要的工具方法与渲染循环。这都没啥，重要的是他太炫了。在浏览器上直接搞3d，不需要你搭建什么环境也不需要你引入什么库。只要你的浏览器支持webgl就行。这要求很低了吧，感觉瞬间上来了。真香~上网买了一本《webgl编程指南》开
雨中飞蛾·2020-07-06 13:06

webgl学习（二）

跟着书走，今天该画点了。1、html就不说了，直接把js代码放上来，然后慢慢分析。//HelloPint2.js(c)2012matsuda//顶点着色器varVSHADER_SOURCE='attributevec4a_Position;\n'+//attributevariable'voidmain(){\n'+'gl_Position=a_Position;\n'+'gl_PointSize
雨中飞蛾·2020-07-06 13:35
上一页 1 2 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他