WebGL 在线Demo

最新推荐文章于 2024-09-24 23:38:37 发布
最新推荐文章于 2024-09-24 23:38:37 发布
阅读量3.8k 收藏 4
点赞数
分类专栏： WebGL 文章标签： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaoyutian/article/details/74614641
版权
1. 

Aquarium www.webglsamples.org


2. 

Acko.net  www.acko.net



3. 

WebGL Terrain  www.alteredqualia.com



4 

WebGL Water  http://madebyevan.com/webgl-water/



5. 

Nouvelle Vague by ultranoir http://nouvellevague.ultranoir.com/

6.  vortexspheres   http://david.li/vortexspheres/ 
7. Spring  http://oos.moxiecode.com/js_webgl/spring/ 


Yew1168
关注
专栏目录
WebGL-Demo:WebGL 演示
07-06
WebGL-Demo WebGL-Demo PPT 是关于 WebGL 的教学，你可以创建一个服务器来使用 PPT 中的链接。
谷歌推出的基于WebGL下的鱼缸测试页面（用于网页速度测试）http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
热门推荐
devehe的山寨
10-22 1万+
* Copyright 2009, Google Inc.   * All rights reserved.   *   * Redistribution and use in source and binary forms, with or without   * modification, are permitted provided that
WebGL中光源的使用
最新发布
gghhb12的博客
09-24 646
WebGL中的光与现实世界中的光类似，是一种物理光线模拟。WebGL使用光线追踪算法来模拟光在3D场景中的反射、折射和散射等现象，以实现逼真的光影效果。在WebGL中，光源是光的来源，可以模拟不同类型的光源，如平行光、点光源、聚光灯等。光线从光源发出，经过场景中的各个物体后，被摄像机捕捉，生成最终的渲染图像。通过调整光源的位置、颜色、强度等参数，可以在WebGL中实现不同的光影效果，如明暗对比、高光反射、镜面反射等。这些光影效果可以增强3D场景的真实感和表现力。
WebGL：基础练习 / 简单学习 / demo / canvas3D
snowball的博客
11-03 1224
在绘制过程中，我们首先编译和链接了顶点着色器和片元着色器，并创建了一个着色器程序。在这个 Demo 中，我们首先创建了一个 WebGL 上下文，并定义了一个顶点着色器和一个片元着色器。接着，我们创建了一个着色器程序对象，并将顶点着色器和片元着色器附加到这个程序对象上，并进行链接。接着，我们创建了着色器程序对象，并将顶点着色器和片元着色器附加到这个程序对象上，并进行链接。需要注意的是，绘制图形时，我们使用的是 gl.TRIANGLE_FAN，它表示绘制一个三角形扇形，也就是一个由五个三角形组成的正方形。
使用webGL实现的全景图demo
蒙双眼看世界
03-12 765
也可以通过PhotoSphereViewer来实现。使用webGL实现的全景图demo。也可以通过Server启动。
WebGL自学课程(1)：原生WebGL简单Demo
孙群
06-26 8140
以下是一个原生WebGL简单Demo： World html,body,div{margin:0;padding:0} attribute vec3 aPosition; uniform mat4 uModelView
webgl教程DEMO
01-30
这个“webgl教程DEMO”很可能是为了教授和展示如何利用WebGL技术来创建交互式的网页图形。WebGL允许开发者在浏览器环境中无需插件就能直接绘制复杂的3D场景，极大地拓展了网页应用的视觉表现力。 在WebGL中，开发者...
webgl-demo
03-19
这个"webgl-demo"可能是一个示例项目，用于展示如何在网页中使用WebGL来创建图形和动画。 HTML（HyperText Markup Language）是构建网页内容的基础，通常与CSS（Cascading Style Sheets）和JavaScript一起使用，...
unity webgl js demo.zip
07-20
这个"unity webgl js demo.zip"文件很可能是包含了使用Unity WebGL技术制作的一个演示案例。 在Unity WebGL中，开发者可以利用C#编程语言编写游戏逻辑，然后通过Unity编译器将这些内容转换为可以在Web浏览器中运行...
20个不可思议的 WebGL 示例和演示
keebai的专栏
05-27 973
　　WebGL是一项在网页浏览器呈现3D画面的技术，有别于过去需要安装浏览器插件，通过WebGL的技术，只需要编写网页代码即可实现3D图像的展示。WebGL 可以为 Canvas 提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了。在这篇文章中20个不可思议的 WebGL 示例来增强你对于这个新技术的理解。 1. Aquarium Image Source:www.webglsamples.org Created by Greggman a...
webgl 基础渲染demo_简化封装threejs，让webgl可视化不再复杂
weixin_39520988的博客
11-24 487
　　在如今互联网爆炸式发展的时候，物联网也是扶摇直上，其中物联网可视化领域也崭露头角，而目前物联网中，threejs也是时下十分火热的一个3D的JavaScript库，在WebGL中文网中的介绍说threejs就是是使用JavaScript来编写3D程序，在webgl中文网中，有着对于threejs的讲解，和教程，当然，threejs官网上也有着十分详细的教程。什么是webgl?WebGL是在浏览...
一个简单的WebGL的demo，软件Chrome，硬件Google cardboard
08-28
This is a basic virtual reality experiment for Chrome, to be used with #Cardboard#. It uses WebGL and #Three.js# to handle the 3D graphics and camera controls. See inline comments for tips. This code is purely experimental, so please keep that in mind when developing. Want to create an Android app for Cardboard? #Learn how#. #Cardboard#:https://developers.google.com #Three.js#:http://threejs.org/ #Learn how#:https://developers.google.com/cardboard/overview
webgl 基础渲染demo_Webgl水平不能老停留十年之前
weixin_39737051的博客
11-25 250
前些日子客户都会转这个人工智能大会的webgl,老泪纵横，在webgl搞了那么多年之后，组织上终于想起这玩意了么？终于捡起来当噱头了么 https://ai.worldaic.com.cn/pre但翻了一下之后，脸色逐渐严肃，这个水平任重而道远啊，你基本可以一眼就看出来浓浓的国产气质，和十年前quest3d时代的水平近似。康托还是得从技术层面分析分析，啥是好的，啥是精致细腻，这东西还是有标准的，并...
WebGL基础教程：第一部分
前端达人
06-24 803
点击上方“前端达人” 可以订阅哦！WebGL是一种基于OpenGL的浏览器内置3D渲染器，它可以让你在HTML5页面中直接显示3维内容。 在本教程中，我会介绍你使用此框架所需的所有基础内容。 介绍 开始学习之前，有几件事你是需要了解的。 WebGL是将3D内容渲染到HTML5的canvas元素上的一种JavaScript API。 它是利用"3D世界"中称为着色器的两种脚本来实现这一点的。 这两种
linux下GPU性能测试
大猫的博客
05-08 5887
GPU 性能测试
webgl 基础渲染demo_WebGL 初印象
weixin_39527372的博客
11-23 690
最近由于工作需要，开始学习 WebGL 相关的知识。这篇文章的目的就是记录下学习过程中的一些知识概念，并实现一个简单的 demo，帮助大家快速理解 webgl 的概貌并上手开发。最后会分享自己对于 webgl 的几点想法，给有需要的人提供参考。WebGL 全称 Web Graphics Library，是一种支持 3D 的绘图技术，为 web 开发者提供了一套 3D 图形相关的接口。通过这些接口，...
webgl 基础渲染demo_最简WebGL教程
weixin_39752800的博客
11-25 585
现代 OpenGL(以及名为WebGL的扩展)与我过去学习的传统 OpenGL 有很大不同。我了解栅格化的工作原理，所以对这些概念很满意。但是我所阅读的每篇教程都介绍了抽象和辅助函数，这使我很难理解哪些部分是 OpenGL API 的真正核心。明确地说，在实际的应用程序中，把位置数据和渲染功能分离到单独的类这样的抽象很重要。但是，这些抽象把代码分布到了多个区域，并且由于模板的重复以及逻辑单元之间的...
webgl 基础渲染demo_简单入门webgl后处理
weixin_39935571的博客
11-25 917
大家好，在之前聊过shader后，相信大家对webgl的原生和底层渲染机制有了一些的了解，但是只是看概念，似乎很难加深印象。今天我们接着更进一步，聊下后处理。首先，我们来看看啥是后处理。threejs的官方示例里面，有个章节就叫后处理，里面有许多的后处理示例。其实后处理主要集中在一些效果展示上，例如下面的：bloom泛光godray体积光 outline描边 原理与基本概念在讲解源代码之前，我们还...
卜若的代码笔记-webgl系列-第二章：第一个webgl的demo
qq_37080133的博客
09-06 443
1.Webgl的组成： 1.1 canvas： canvas是啥玩意？它是就是你的html里面去用于渲染的一块地方。 在JS里面时一个DOM元素，就非常像我们的Unity里面的GameObject对象的子类Canvas对象 1.2 Objects: 一个渲染常见RenderScene里面的组成元素比如一个圆柱体，一个球体，这种体就是Objects。 1.3 Lighting： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值