这是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. 用Java实现向Cassandra数据库中插入和查询数据

    所用jar包: 其中jxl.jar和dom4j.jar,jaxen-1.1-beta-6.jar是解析XML文件用的jar包,如果不解析XML文件可以不用. 代码如下: package com.loc ...

  2. java中静态的代码块，静态变量，静态方法

    简单了解一下java虚拟机--jvm几个内存区域: 方法区:在java的虚拟机中有一块专门用来存放已经加载的类信息.常量.静态变量以及方法代码的内存区域, 常量池:常量池是方法区的一部分,主要用来存放 ...

  3. Debian中编译内核

    转载: http://blog.163.com/libo_5/blog/static/156968520101016102051580/ http://hi.baidu.com/wg_wang/ite ...

  4. 关于yarn的spark配置属性

    spark1.2.0 These are configs that are specific to Spark on YARN Property Name Default Meaning  spark ...

  5. mysql索引补充

    索引补充   1.索引 索引是表的目录,在查找内容之前可以先在目录中查找索引位置,以此快速定位查询数据.对于索引,会保存在额外的文件中. 2.索引种类 普通索引:仅加速查询 唯一索引:加速查询 + 列 ...

  6. 【Shell脚本学习3】什么时候使用Shell

    因为Shell似乎是各UNIX系统之间通用的功能,并且经过了POSIX的标准化.因此,Shell脚本只要“用心写”一次,即可应用到很多系统上.因此,之所以要使用Shell脚本是基于: 简单性:Shel ...

  7. oracle数据库例外处理与视图

    pl/sql例外处理 例 当输入编号没有时的例外处理 declare --定义 v_ename emp.ename%type; begin -- select ename into v_ename f ...

  8. iOS数据持久化存储:归档

    在平时的iOS开发中,我们经常用到的数据持久化存储方式大概主要有:NSUserDefaults(plist),文件,数据库,归档..前三种比较经常用到,第四种归档我个人感觉用的还是比较少的,恰恰因为用 ...

  9. Read / Write Excel file in Java using Apache POI

    Read / Write Excel file in Java using Apache POI 2014-04-18 BY DINESH LEAVE A COMMENT About a year o ...

  10. 【安卓面试题】Activity和Task的启动模式有哪些？每种含义是什么？举例说明各自的应用场景

    Activity和Task的启动模式有哪些?每种含义是什么?举例说明各自的应用场景 Activity的启动模式 (Launchmode) 有4种 1.standard 默认模式,不需要配置 含义: 启 ...