这是html5中WebGL的演示，让我们与他人分享爱您发送短消息。每次你进入它使用不同的位置，新的爱情点被添加到全球。让世界更明亮的地方与你的朋友分享！

源文件：
部分代码：
<!DOCTYPE html>
<html>
<head>
        <title>Geolocation love</title>
        <meta charset="utf-8">
        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="js/three.js"></script>

<script src="js/Detector.js"></script>
        <script src="js/Stats.js"></script>
        
        <script src="js/Tween.js"></script>
        
        <script src="js/ShaderExtras.js"></script>
        <script src="js/EffectComposer.js"></script>
        <script src="js/ShaderPass.js"></script>
        <script src="js/MaskPass.js"></script>
        <script src="js/RenderPass.js"></script>
        <script src="js/BloomPass.js"></script>
        <script src="js/FilmPass.js"></script>
        
        <script type="text/javascript" src="js/main.js"></script>
        
        <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container"></div>

<section class="box" id="messageBox">
                <div id="message">No matter where you are, always make the world brighter place</div>
                <div id="dist"></div>
                <div id="shareSwitcher"><a>Click to share your love with others!</a></div>
                <div id="likeIt"><a href="https://developer.mozilla.org/en-US/demos/detail/geolocation-love">Like this demo on DevDerby</a></div>
        </section>
        
        <section class="box" id="shareBox">
                <div id="form">
                        <h1>Type your message to the world</h1>
                        <textarea id="messageArea"> </textarea>
                        <input id="submitShare" type="button" value="get share link" />
                </div>
        </section>
</div>

</div>

<script type="x-shader/x-vertex" id="earthVertex">
varying vec3 vNormal;
varying vec2 vUv;
void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        vNormal = normalize( normalMatrix * normal );
        vUv = uv;
}
</script>
<script type="x-shader/x-fragment" id="earthFragment">
uniform sampler2D texture;
varying vec3 vNormal;
varying vec2 vUv;
void main() {
        vec3 diffuse = texture2D( texture, vUv ).xyz;
        float intensity = 1.15 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) );
        vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );
        gl_FragColor = vec4( diffuse + atmosphere, 1.0 );
}
</script>

<script type="x-shader/x-vertex" id="atmosphereVertex">
varying vec3 vNormal;
void main() {
        vNormal = normalize( normalMatrix * normal );
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>

<script type="x-shader/x-fragment" id="atmosphereFragment">
varying vec3 vNormal;
void main() {
        float intensity = pow( 0.8 - dot( vNormal, vec3( 0, 0, 1.0 ) ), 10.0 );
        gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * intensity;
}
</script>
</body>
</html>

详细说明：http://html5.662p.com/thread-9-1-1.html

这是html5中WebGL的演示的更多相关文章

  1. Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题

    Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致& ...

  2. HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系

    一.前面的所以然 技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了.新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全 ...

  3. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  4. 使用HTML5中postMessage实现Ajax中的POST跨域问题

    HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...

  5. HTML5 Canvas阴影用法演示

    HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = “red” 表示设置阴影颜色为红色 context.sh ...

  6. 基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控

    前言 智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前工业互联网大背景下受到很大关注.目前智慧楼宇可视化监控的主要优点包括: 智慧化 -- 智慧楼宇是一个生态 ...

  7. 基于 HTML5 的 WebGL 和 VR 技术的 3D 机房数据中心可视化

    前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...

  8. 基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型

    前言 随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问 ...

  9. 使用HTML5中postMessage 实现ajax中的POST跨域问题

    HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...

随机推荐

  1. iOS系统控件显示中文

    App中使用系统控件,一般默认会显示英文,即便系统的语言环境设置的是简体中文.这需要在App的工程中加入中文支持,这样在中文的系统环境下,调用的系统控件,比如“返回”而不是“Back”.步骤如下: 为 ...

  2. jquery冲突

    今天修改一个项目发现,前辈们自己写的一些方法和jquery冲突了,也就是$的冲突,以至于自己用jquery编写的新功能无法正常使用,细究后发现解决办法如下:使用 noConflict() 方法为 jQ ...

  3. 如何编写自己的Linux安全检查脚本？

    因为本人工作中要涉及到很多东西,审计(日志.数据神马的).源代码审计.渗透测试.开发一大堆东西,有些东西,越是深入去做,越会发现,没有工具或脚本,工作起来是有多么的坑. 工作的这段时间,自己写了几个工 ...

  4. WPF 之 文本框及密码框添加水印效果

    1.文本框添加水印效果 文本框水印相对简单,不需要重写模板,仅仅需要一个 VisualBrush 和触发器验证一下Text是否为空即可. <TextBox Name="txtSerac ...

  5. CSS 之 内层div填充margin,外层div的背景色不会覆盖该margin

    外层元素(如div)中只有一个非空子元素,此时margin是被折叠了.两者之间取最大的margin值,表现在外层父元素上,而不是内层子元素. 注意: (1)只有垂直方向上才会出现此现象,水平方向不会出 ...

  6. IIS 之 打开/关闭 Internet 信息服务

    由于建立测试网站测试代码,重装电脑后不知道IIS在哪打开.下面以windows7为例介绍,打开IIS管理器的简要步骤. 第一步.查找IIS 1.点击" 开始 "→" 控制 ...

  7. Oracle基础 exp/imp命令

    一.导出方式: 使用exp/imp方式导出数据分为四种方式: 1.表方式导出:一个或多个指定的表,包括表的定义.表数据.表的所有者授权.表索引.表约束,以及创建在该表上的触发器.也可以只导出结构,不导 ...

  8. Win10环境下使用VS2015编译PJProject

    一.pjproject源码下载 下载地址:http://www.pjsip.org/ 二.编译之前 1.pj配置,通常直接复制并重命名config_site_simple.h为config_site. ...

  9. 20145102 《Java程序设计》第5周学习总结

    20145102 <Java程序设计>第5周学习总结 教材学习内容总结 数组在内存中会是连续的线性空间,根据索引随机取回时速度快,如果操作上有这类需求时,像是排序,就可以使用;ArrayL ...

  10. POJ 2349 Arctic Network (最小生成树)

    Arctic Network Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Subm ...