<!DOCTYPE html>

<html lang="en">

	<head>

		<title>three.js webgl - buffer geometry custom attributes - particles</title>

		<meta charset="utf-8">

		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

		<style>

			body {

				color: #ffffff;

				background-color: #000000;

				margin: 0px;

				overflow: hidden;

			}

			#info {

				position: absolute;

				top: 0px;

				width: 100%;

				padding: 5px;

				font-family: Monospace;

				font-size: 13px;

				text-align: center;

				font-weight: bold;

			}

			a {

				color: #fff;

			}

		</style>

	</head>

	<body>

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

		<script src="../build/three.js"></script>

		<script src="js/Detector.js"></script>

		<script type="x-shader/x-vertex" id="vertexshader">

			attribute float size;

			attribute vec3 customColor;

			varying vec3 vColor;

			void main() {

				vColor = customColor;

				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

				gl_PointSize = size * ( 300.0 / mvPosition.x );

				gl_Position = projectionMatrix * mvPosition;

			}

		</script>

		<script type="x-shader/x-fragment" id="fragmentshader">

			uniform sampler2D texture;

			varying vec3 vColor;

			void main() {

				gl_FragColor = vec4( vColor, 1.0 );

				gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );

			}

		</script>

		<script>

		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

		var renderer, scene, camera, stats;

		var particleSystem, uniforms, geometry;

		var particles = 200;

		var WIDTH = window.innerWidth;

		var HEIGHT = window.innerHeight;

		init();

		animate();

		function init() {

			camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );

			camera.position.z = 500;

			scene = new THREE.Scene();

			uniforms = {

				texture:   { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }

			};

			var shaderMaterial = new THREE.ShaderMaterial( {

				uniforms:       uniforms,

				vertexShader:   document.getElementById( 'vertexshader' ).textContent,

				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,

				transparent:    true

			});

			var radius = 400;

			var geometry = new THREE.BufferGeometry();

			var positions = new Float32Array( particles * 3 );

			var colors = new Float32Array( particles * 3 );

			var sizes = new Float32Array( particles );

			for ( var i = 0, i3 = 0; i < particles; i ++, i3 += 3 ) {

				positions[ i3 + 0 ] = ( Math.random() * 2 - 1 ) * radius;

				positions[ i3 + 1 ] = ( Math.random() * 2 - 1 ) * radius;

				positions[ i3 + 2 ] = 0;

				colors[ i3 + 0 ] = 1;

				colors[ i3 + 1 ] = 1;

				colors[ i3 + 2 ] = 1;

				sizes[ i ] = 10;

			}

			geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

			geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );

			geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );

			particleSystem = new THREE.Points( geometry, shaderMaterial );

			scene.add( particleSystem );

			renderer = new THREE.WebGLRenderer();

			renderer.setPixelRatio( window.devicePixelRatio );

			renderer.setSize( WIDTH, HEIGHT );

			var container = document.getElementById( 'container' );

			container.appendChild( renderer.domElement );

			window.addEventListener( 'resize', onWindowResize, false );

		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;

			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

		}

		function animate() {

			requestAnimationFrame( animate );

			renderer.render( scene, camera );

		}

	</script>

</body>

</html>

　　

Threejs着色器基本使用样例改造的更多相关文章

  1. DirectX11 With Windows SDK--02 顶点/像素着色器的创建、顶点缓冲区

    前言 由于在Direct3D 11中取消了固定管线,要想绘制图形必须要了解可编程渲染管线的流程,一个能绘制出图形的渲染管线最少需要有这两个可编程着色器:顶点着色器和像素着色器. 本章会直接跳过渲染管线 ...

  2. Cocos2d-x 3.2 Lua演示样例 AssetsManagerTest(资源管理器）

    Cocos2d-x 3.2 Lua演示样例 AssetsManagerTest(资源管理器) 本篇博客介绍Cocos2d-x 为我们提供的一个类--AssetsManager在Lua中的使用样例,效果 ...

  3. TreeSet排序，存储自己定义对象，自己定义比較器演示样例

    Set:无序.不能够反复元素. |--HashSet:数据结构是哈希表.线程是非同步的. 保证元素唯一性的原理:推断元素的hashCode值是否同样. 假设同样,还会继续推断元素的equals方法.是 ...

  4. 最简单的基于FFmpeg的移动端样例附件：Android 自带播放器

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  5. 最简单的基于FFmpeg的移动端样例：IOS 视频转码器

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  6. 最简单的基于FFmpeg的移动端样例：IOS 推流器

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  7. 最简单的基于FFmpeg的移动端样例：Android 视频转码器

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  8. ThreeJS 物理材质shader源码分析(顶点着色器)

    再此之前推荐一款GLTF物理材质在线编辑器https://tinygltf.xyz/ ThreeJS 物理材质shader源码分析(顶点着色器) Threejs将shader代码分为ShaderLib ...

  9. Qt 鼠标样式特效探索样例（一）——利用时间器调用QWidget.move()函数

    Qt 鼠标样式特效探索样例(一)       心血来潮,突然想在Qt里玩一把鼠标样式,想到在浏览网页时,经常看到漂亮的鼠标动画,于是今天摸索着乱写个粗糙的demo,来满足自己的好奇心. 效果图 方案要 ...

随机推荐

  1. [hdu 6191] Query on A Tree

    Query on A Tree Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Othe ...

  2. ISO/OSI七层网络参考模型、TCP/IP四层网络模型和教学五层网络模型

    一.说明 直接的原因是昨晚<计算机网络(自顶向下方法)>到货了,以为能讲得有些不一样,但看完整本也就是老调地讲过来讲应用层.传输层.网络层.网络接口层.感觉比之谢希仁的<计算机网络& ...

  3. PyCharm+QTDesigner+PyUIC使用教程

    我们在PyCharm安装配置Qt Designer+PyUIC教程中已配置好了PyCharm+QTDesigner+PyUIC环境 这里在此基上我们演示如何使用这些工具,编写一个图形界面程序: 程序主 ...

  4. JAVA的SPI简单应用

    最近在研究dubbo时,发现了JAVA的SPI特性.SPI的全名为Service Provider Interface,是JDK内置的一种服务发现机制. 具体实现: 1.定义一个接口 public i ...

  5. gradle set

    gradle安装   1◆ gradle下载 http://services.gradle.org/distributions/       2◆ 配置环境 =====>D:\envs\grad ...

  6. unity中让物体移动到鼠标点击地面任一点的位置（单击移动和双击暂停移动）并生成图标

    using UnityEngine; using System.Collections.Generic; using UnityEngine.EventSystems; using UnityEngi ...

  7. leetcode python 003

    ## 给定一个字符串,求其最长无重复的子字符串##给定“abcabcbb”,答案是“abc”,长度为3.##给定“bbbbb”,答案是“b”,长度为1.##鉴于“pwwkew”,答案是“wke”,长度 ...

  8. vuesheng生命周期

    对着官网的demo写例子,碰到了生命周期钩子方法,之前只是根据官网的图,了解了大概, 现在忍不住想去深扒一下,因此找了几个博客看了下,受益匪浅,故此笔记: 参考:http://www.cnblogs. ...

  9. Java集合(续)

    java学习笔记 --- 集合 1.定义:集合是一种容器,专门用来存储对象 数组和集合的区别?   A:长度区别  数组的长度固定    集合长度可变         B:内容不同  数组存储的是同一 ...

  10. 一个在linxu自动切换ip的脚本

    最近的爬虫是在linux下运行的,使用的是云立方的代理服务器,需要自动切换一下ip. #!/bin/bash# coding:utf8 aa="sources.list" #主流程 ...