webgl shader 河水

2024-08-31

用shader实现流动的水面(webgl)

这段时间一直在看如何用shader绘制一个流动的水面,直接用贴图(高度图.法向贴图)实现的方法,这里就不讨论了. 搜了一大波博客资料,感觉存在如下一些问题: 1⃣️大多数资料都是基于opengl实现(或者是unity里的shader),过多关注点在渲染上面而不是水波的mesh实现上,让人没有看下去的欲望 2⃣️有的就直接是照搬别人的博客,公式大段大段地搬,却没有自己的一丝见解,太过敷衍 3⃣️代码不加注释,对前来学习者不太友好 4⃣️针对webgl的实现,网上的资料太少(虽然已经有了opengl

【WebGIS系列】Typescript+WebGL+Webpack开发环境搭建

目前Web实现矢量渲染的主流技术包括SVG.VML和WebGL.相对而言,VML是一种较古老的技术,虽然未成为W3C标准,但被早期的IE浏览器(IE9以下)和微软Office广泛使用,目前已经远离了浏览器战场.所以可供选择的仅剩SVG和WebGL.SVG是XML的一个子集,秉承了一个标签对应一条数据的原则,目前经常被使用于数据量较小的web项目,比如图表和地铁图.Web矢量地图的数据量非常庞大,举个例子,如下图所示的一个512px*512px的瓦片,其数据量是一个接近5位数的二维数组.而这个瓦片

关于 Unity WebGL 的探索（一）

到今天为止,项目已经上线一个多月了,目前稳定运行,各种 bug 也是有的.至少得到了苹果的两次推荐和 TapTap 一次首页推荐,也算是结项后第一时间对我们项目的一个肯定. 出于各种各样的可描述和不可描述之原因,我们现在需要把项目移植到 Web 端,第一次被告知这个需求时我直接给出了不可能的答复,之前从来没有考虑过这个平台的兼容性,现在项目算是做完了结果要这样折腾一番我觉得是需要消耗非常可怕的人力物力但未必能有很好的效果,性价比很低,但是最终我还是妥协了,硬着头皮接下来,也硬着头皮上,毕竟,技术

教你用webgl快速创建一个小世界

收录待用,修改转载已取得腾讯云授权作者:TAT.vorshen Webgl的魅力在于可以创造一个自己的3D世界,但相比较canvas2D来说,除了物体的移动旋转变换完全依赖矩阵增加了复杂度,就连生成一个物体都变得很复杂. 什么?!为什么不用Threejs?Threejs等库确实可以很大程度的提高开发效率,而且各方面封装的非常棒,但是不推荐初学者直接依赖Threejs,最好是把webgl各方面都学会,再去拥抱Three等相关库. 上篇矩阵入门中介绍了矩阵的基本知识,让大家了解到了基本的仿射变换矩

学废了系列 - WebGIS vs WebGL图形编程

目前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积攒了一些从零开始搭建 WebGL 地图引擎的微薄经验,虽然最终遗憾没有上线,但在其中学到的一些WebGL知识还是值得分享一下.WebGL 可以说是前端可视化技术领域难度最大的一项图形编程技术,所以今天就结合 WebGIS 这个话题顺带分享一些 WebGL 的相关知识,不会太深入,很细节的技术点在后续

JavaScript 移动和触摸框架

jQuery Mobile : 是 jQuery 在手机上和平板设备上的版本号. jQuery Mobile 不仅会给主流移动平台带来jQuery核心库.而且会公布一个完整统一的jQuery移动UI框架.支持全球主流的移动平台.jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋.移动Web太须要一个跨浏览器的框架,让开发者开发出真正的移动Web站点. 我们将尽全力去满足这种需求. Sources. Zepto.js Zepto.js 是支持移动WebKit浏览器的JavaScr

WebGL的shader

WebGL的shader(着色器)有2种:vertexShader(定点着色器)和 fragmentShader(片段着色器) 顶点着色器:定义点的位置.大小片元着色器:定义画出来的物体的材质(颜色.反光度等...) 着色器定义有自己的一套语言:GLSL(Graphics Library Shading Language) 推荐阅读:https://blog.csdn.net/qq_37338983/article/details/78556063http://www.alloyteam.co

数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT 构建例如电信网管 3D 机房应用.水务燃气 SCADA 监控应用及智能楼宇等应用场景. HT for Web 的 3D 是完全基于 WebGL 技术实现的渲染引擎,但开发者几乎不需要了解 3D 图形数学或 Shader 渲染的底层技术,只需要掌握基本的 3D 坐标系和相机 Camera 的概念,剩下需要掌

webgl动画小测试

// MultiPoint.js (c) 2012 matsuda // Vertex shader program var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'void main() {\n' + ' gl_Position = a_Position;\n' + ' gl_PointSize = 10.0;\n' + '}\n'; // Fragment shader program var FSHADER_SOURCE = '

多材质（Shader）实现

最近在cocos creator上打算写个U3D中shader功能的插件(能在属性面板调整shader属性). 对其中一个功能有点疑惑,就是U3D中一个渲染物体上可以挂多个材质,后来查询了下,一个物体上挂多个材质的时候,每个材质复杂渲染对应的子mesh,但如果一个object只有一个mesh时, 那么挂载在其下的所有材质都会作用在这个mesh上,达到了混合的作用. 但是在OpenGl渲染中,每次渲染只能用一个shader,而每个物体也只能挂一个shader被渲染. 因此不能直接给一个物体挂多个着

WebGL入门教程(一)-初识webgl

一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二.WebGL采用H5中的<canvas>元素来定义绘图区域,然后通过JavaScript内嵌GLSL ES在canvas中绘制三维图形. canvas可以同时支持二维图形和三维图形,它不直接提供绘图方法,而是提供一种叫上下文(context)机制来绘制图形, 2.1使用canvas绘制二维空间步骤:

Cesium原理篇：6 Render模块(3: Shader)

在介绍Renderer的第一篇,我就提到WebGL1.0对应的是OpenGL ES2.0,也就是可编程渲染管线.之所以单独强调这一点,算是为本篇埋下一个伏笔.通过前两篇,我们介绍了VBO和Texture两个比较核心的WebGL概念.假设生产一辆汽车,VBO就相当于这个车的骨架,纹理相当这个车漆,但有了骨架和车漆还不够,还需要一台机器人来加工,最终才能成产出这辆汽车.而Shader模块就是负责这个生产的过程,加工参数(VBO,Texture),执行渲染任务. 这里假设大家对Shader有一个基本的

突袭HTML5之WebGL 3D概述

WebGL开启了网页3D渲染的新时代,它允许在canvas中直接渲染3D的内容,而不借助任何插件.WebGL同canvas 2D的API一样,都是通过脚本操纵对象,所以步骤也是基本相似:准备工作上下文,准备数据,在canvas中绘制对象并渲染.与2D不同的就是3D涉及的知识更多了,例如世界.光线.纹理.相机.矩阵等专业知识.WebGL有一个很好的中文教程,就是下面使用参考中的第一个链接,所以这里不再班门弄斧,后面的内容只是简单的总结一下学习的内容. 浏览器的支持由于微软有自己的图形发展计划,一

Hello Point——WebGL

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>画一个点&

Professional.WebGL.Programming-Chapter 2（高级WebGL编程——第二章）

(目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/3508251.html) 这一章主要通过创建一个三角形的例子说明WebGL基本的用法,以下是书中例子的效果图: 创建一个基本的WebGL应用需要以下的步骤: 1.Write some basic HTML code that includes a <canvas> tag. The <canvas> tag provides the

【转】webGL与OpenGL的不同

原链接 http://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences WebGL and OpenGL Differences WebGL is based on the OpenGL ES 2.0 specification, and retains the semantics of OpenGL ES in order to maximize portability to mobile devices. There ar

Web3D编程入门总结——WebGL与Three.js基础介绍

/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识以后有机会再总结.*/ /*第一部分,webgl与three.js基础介绍,要求读者掌握JavaScript入门知识*/ //webgl原理:通过JavaScript语言在浏览器端生成glsl代码,把glsl代码送入显卡执行,把执行结果显示在浏览器中 //简单例程: //根据Tony Parisi著

分享我收集的引擎、图形学、WebGL方面的电子资料

本文分享我这一年以来收集的我认为比较经典的电子资料,希望能对大家有所帮助! 本文会不断更新! 目录 WebGL Insights OpenGL Insights Game Programming Patterns Design by Contract 原则与实践游戏引擎架构编程珠玑 <WebGL Insights> http://pan.baidu.com/s/1dF7ERG9 推荐度 5星内容概要说明相当于webgl的gems书,包括了介绍浏览器是怎么实现webgl的.一些图形渲染基

[WebGL入门]十四，绘制多边形

注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家指正. 这是本次的demo的运行结果绘制流程这次终于该绘制多边形了,之前的文章(十一,着色器的编译和连接)中介绍了HTML,顶点着色器和片段着色器,这次看一下javascript从開始到终于的所有处理. 假设前两篇文章介绍的内容全然理解的话,这次的内容也应该不难了.也许会有不easy理解的地方,

WEBGL 2D游戏引擎研发系列第一章 <新的开始>

WEBGL 2D游戏引擎研发系列第一章 <新的开始> ~\(≥▽≤)/~HTML5游戏开发者社区(群号:326492427) 转载请注明出处:http://html5gamedev.org/ 目录 HTML5 2D游戏引擎研发系列第一章 <一切的开始> HTML5 2D游戏引擎研发系列第二章 <磨剑> HTML5 2D游戏引擎研发系列第三章 <Canvas技术篇-画布技术-显示图片> HTML5 2D游戏引擎研发系列第四章 <Canvas技

webgl shader 河水

热门专题