WEBGL演示

简介: WebGL是一项在网页浏览器体现3D画面的技术,有别于过往需加装浏览器插件,通过WebGL的技术,只需要编写网页代码即可实现3D图像的展示。WebGL的规格尚在发展中,由非营利的Khronos Group管理。

WebGL是一项在网页浏览器体现3D画面的技术,有别于过往需加装浏览器插件,通过WebGL的技术,只需要编写网页代码即可实现3D图像的展示。WebGL的规格尚在发展中,由非营利的Khronos Group管理。

WebGL的工作成员包括Mozilla、Opera、苹果公司,Mozilla的Arun Ranganathan担任主席。

浏览以下WebGL演示页面请使用 Mozilla Firefox、Google Chrome、Opera 12(目前的正式版11.52不支持)、Safari 浏览器,IE支持不能。由于部分WebGL Demo页面需调用GAE中JS文件,若无法展示,请开启代理。请勿同时打开过多WebGL页面,后果自负。

返回诡异实验室

canvas_camera_orthographic

 

canvas_camera_orthographic2

 

canvas_geometry_birds

 

canvas_geometry_cube

 

canvas_geometry_earth

 

canvas_geometry_hierarchy

 

canvas_geometry_panorama

 

canvas_geometry_panorama_fisheye

 

canvas_geometry_terrain

 

canvas_geometry_text

 

canvas_interactive_cubes

 

canvas_interactive_cubes_tween

 

canvas_interactive_particles

 

canvas_interactive_voxelpainter

 

canvas_lights_pointlights

 

canvas_lights_pointlights_smooth

 

canvas_lines

 

canvas_lines_sphere

 

canvas_materials

 

canvas_materials_depth

 

canvas_materials_normal

 

canvas_materials_reflection

 

canvas_materials_video

 

canvas_particles_floor

 

canvas_particles_random

 

canvas_particles_shapes

 

canvas_particles_sprites

 

canvas_particles_waves

 

canvas_performance

 

canvas_sandbox

 

misc_camera_path

 

misc_camera_roll

 

misc_camera_trackball

 

misc_lights_test

 

misc_lookat

 

misc_materials_multimaterials

 

misc_sound

 

misc_ubiquity_test

 

webgl_animation_skinning

 

webgl_collada

 

webgl_collisions_box

 

webgl_collisions_mesh

 

webgl_collisions_normal

 

webgl_collisions_primitives

 

webgl_collisions_reaction

 

webgl_collisions_terrain

 

webgl_collisions_trigger

 

webgl_custom_attributes

 

webgl_custom_attributes_particles

 

webgl_custom_attributes_particles2

 

webgl_custom_attributes_particles3

 

webgl_flycamera_earth

 

webgl_geometries

 

webgl_geometry_blenderexport_colors

 

webgl_geometry_colors

 

webgl_geometry_dynamic

 

webgl_geometry_hierarchy

 

webgl_geometry_hierarchy2

 

webgl_geometry_large_mesh

 

webgl_geometry_minecraft

 

webgl_geometry_minecraft_ao

 

webgl_geometry_shapes

 

webgl_geometry_subdivison

 

webgl_geometry_terrain

 

webgl_geometry_terrain_fog

 

webgl_geometry_text

 

webgl_hdr

 

webgl_interactive_cubes

 

webgl_interactive_draggablecubes

 

webgl_interactive_voxelpainter

 

webgl_lights_pointlights

 

webgl_lines_colors

 

webgl_lines_cubes

 

webgl_lines_sphere

 

webgl_lines_splines

 

webgl_lod

 

webgl_lod_text

 

webgl_materials

 

webgl_materials_cars

 

webgl_materials_cars_anaglyph

 

webgl_materials_cars_camaro

 

webgl_materials_cars_camaro_crosseyed

 

webgl_materials_cubemap

 

webgl_materials_cubemap_balls_reflection

 

webgl_materials_cubemap_balls_reflection_anaglyph

 

webgl_materials_cubemap_balls_refraction

 

webgl_materials_cubemap_balls_refraction_crosseyed

 

webgl_materials_cubemap_dynamic

 

webgl_materials_cubemap_escher

 

webgl_materials_cubemap_refraction

 

webgl_materials_grass

 

webgl_materials_normalmap

 

webgl_materials_normalmap2

 

webgl_materials_shaders

 

webgl_materials_shaders_fresnel

 

webgl_materials_skin

 

webgl_materials_texture_filters

 

webgl_materials_video

 

webgl_morphtargets

 

webgl_morphtargets_horse

 

webgl_multiple_canvases_complex

 

webgl_multiple_canvases_grid

 

webgl_objconvert_test

 

webgl_panorama_equirectangular

 

webgl_particles_billboards

 

webgl_particles_billboards_colors

 

webgl_particles_dynamic

 

webgl_particles_random

 

webgl_particles_shapes

 

webgl_particles_sprites

 

webgl_performance

 

webgl_postprocessing

 

webgl_postprocessing_dof

 

webgl_ribbons

 

webgl_rtt

 

webgl_sandbox

 

webgl_scene_test

 

webgl_scene_test_blender

 

webgl_shader

 

webgl_shader2

 

webgl_shader_lava

 

webgl_shadowmap

 

webgl_sprites

 

webgl_test_memory

 

webgl_trackballcamera_earth

 

webgl_trails

 

webgl_utf8loader

目录
相关文章
|
7月前
|
JavaScript 数据可视化
基于fabric.js的图片编辑器, 画布背景实现原理
基于vue3 + fabric.js + vite + element-plus + typescript等技术,画布背景原理分析
基于fabric.js的图片编辑器, 画布背景实现原理
|
4月前
|
Apache 图形学
WebGL☀️Unity WebGL适配到各平台的教程
WebGL☀️Unity WebGL适配到各平台的教程
|
图形学 开发者
Unity——各种特效的基本使用方法
Unity——各种特效的基本使用方法
395 0
|
7月前
|
移动开发 前端开发 JavaScript
游戏开发技术- 请谈谈WebGL与Canvas的区别,以及在什么情况下更适合使用WebGL。
WebGL和Canvas都是网页游戏开发的关键技术。Canvas是2D绘图API,适合初学者和简单的2D游戏,而WebGL是基于OpenGL的3D渲染标准,用于复杂3D图形和游戏,提供GPU硬件加速。当涉及3D渲染、高级视觉效果或高性能需求时,WebGL是更好的选择。对于轻量级2D应用,Canvas就足够了。某些游戏引擎支持两者自动切换,以实现最佳性能和兼容性。
560 4
|
7月前
|
前端开发 JavaScript 程序员
webgl学习笔记1_创建场景
webgl学习笔记1_创建场景
50 0
|
存储 缓存 前端开发
WebGL简介
WebGL简介
132 0
WebGL简介
|
Web App开发 前端开发 JavaScript
如何设计动效图——前端SVG JavaScript库Raphaël介绍
如何设计动效图——前端SVG JavaScript库Raphaël介绍
236 0
如何设计动效图——前端SVG JavaScript库Raphaël介绍
|
前端开发 JavaScript 异构计算
WebGL基础笔记
WebGL基础笔记
197 0
|
JavaScript HTML5 移动开发
带你读《Three. js开发指南: 基于WebGL和HTML5在网页上渲染 3D图形和动画(原书第3版)》之二:构建Three.js应用的基本组件
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画,并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件,然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画,甚至还会涉及在场景中使用物理模拟的方法,例如重力、碰撞检测等等。
|
JavaScript HTML5 移动开发
带你读《Three. js开发指南: 基于WebGL和HTML5在网页上渲染 3D图形和动画(原书第3版)》之三:学习使用Three.js中的光源
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画,并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件,然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画,甚至还会涉及在场景中使用物理模拟的方法,例如重力、碰撞检测等等。