March 2015

Three.js standard materials vertex and fragment shaders reference

When playing around and experimenting with Three.js ShaderMaterial I often want to take a look at how the standard Three.js materials are done. Looking through the code or constantly outputting the shaders in the javascript console is a pain in the arse. I though I would post them here for future reference and in case anyone else was interested. These were output from Three.js version 70.

MeshBasicMaterial Vertex Shader
 #if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_SPECULARMAP ) || defined( USE_ALPHAMAP ) 

varying vec2 vUv;
uniform vec4 offsetRepeat;

#endif

#ifdef USE_LIGHTMAP

varying vec2 vUv2;

#endif
#if defined( USE_ENVMAP ) && ! defined( USE_BUMPMAP ) && ! defined( USE_NORMALMAP ) && ! defined( PHONG )

varying vec3 vReflect;

uniform float refractionRatio;

#endif

#ifdef USE_COLOR

varying vec3 vColor;

#endif
#ifdef USE_MORPHTARGETS

#ifndef USE_MORPHNORMALS

uniform float morphTargetInfluences[ 8 ];

#else

uniform float morphTargetInfluences[ 4 ];

#endif

#endif
#ifdef USE_SKINNING

uniform mat4 bindMatrix;
uniform mat4 bindMatrixInverse;

#ifdef BONE_TEXTURE

uniform sampler2D boneTexture;
uniform int boneTextureWidth;
uniform int boneTextureHeight;

mat4 getBoneMatrix( const in float i ) {

float j = i * 4.0;
float x = mod( j, float( boneTextureWidth ) );
float y = floor( j / float( boneTextureWidth
...

Drupal views exposed form in a bootstrap modal

I am currently working on a site with the Bootstrap theme which has a fullscreen views map ( Goomap ) with exposed filters. As the map is full screen I want to have the exposed filters inside a bootstrap modal. Luckily it is quite easy to theme the views exposed filters form.

To do this you have to override the views exposed filters form theme file. Copy the views theme file (sites/all/modules/views/theme/views-exposed-form.tpl.php) and place the copy in your own theme folder. To get this to work you may have to click on "Rescan template files" under "theme" in the view. Your site should now be using the new template file and you can edit it as you please. You can get more specific with the naming of the template file to target a single exposed form, (views-exposed-form--VIEWNAME.tpl.php for example).

Below is the code that I am using in my views-exposed-form.tpl.php

 <a data-toggle="tooltip" title="<?php print t('Filter Results'); ?>"> 
<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#filterModal">
<i class="glyphicon glyphicon-cog"></i>
Filter
</button>
</a>

<div class="views-exposed-form">
<div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="filterLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="filterLabel">Filter</h4>
</div>
<div class="modal-body">

<div class="views-exposed-widgets clearfix">
<?php foreach ($widgets as $id => $widget): ?>
<div id="<?php print $widget->id; ?>-wrapper" class="views-exposed-widget views-widget-<?php print $id; ?>">
<?php if (!empty($widget->label)): ?>
<label for="<?php print $widget->id; ?>">
<?php print $widget->label; ?>
</label>
<?php endif; ?>
<?php if (!empty($widget->operator)): ?>
<div class="views-operator">
<?php print $widget->operator; ?>
...

Not another Drupal mapping module: Goomap

Yes, I have done it, created yet another Drupal mapping module. I call him Goomap .

The first thing you are probably going to ask is "why?". Well, here's why:

  • Complexity
    Most of the time when trying to use one of the other Drupal mapping modules I would find the process far too complex. Especially the last time I used the Openlayers module. I wont go into detail about this but if you have used it you will know what I mean. Every time I have needed maps on a drupal site over the past couple of years I have found it easier to just use the Google maps api itself and not even bother with a drupal mapping module.
  • Map provider support
    Many people may consider this a step backward as the Goomap module only supports Google maps where as other mapping modules support other map providers. But I have only ever used Google maps as it has always served my purpose and the documentation is fantastic. So why support other map providers if I (and probably many others) never use them?
  • Map color customization
    Now I'm not exactly sure on how to customize the colors on the other modules, but with the Goomap module it is quite easy because the goomap module gives you access to the mapOptions object that is send to the Map constructor. The mapOptions object has a "styles" property which accepts an array which represents the styles (colors etc.) that the map will have. This "styles" array can simply be pasted into the mapOpions textarea in the map settings. You can easily generate and copy this JSON array from sites such as https://snazzymaps.com/
  • ...

Experimenting with Three.js shaders and the ShaderMaterial

Lately when using Three.js I have needed some very specific material qualities that the built in Three.js materials did not allow for so I have started experimenting with the Three.ShaderMaterial . This material allows you to write you own GLSL shaders for Three.js. My hope is that I can get a good understanding of GLSL and implement some of my own shaders and materials in Three.js even with my limited math skills and no prior experience with GLSL.

On this page I will link to some of my own Three.ShaderMaterial experiments and try to update it as I learn more.

You may also want to take a look at my implementation of a three.js car paint shader (a recreartion of the Radeon 9700 demo).

NOTE: these examples are using R70 of THREE.js and material implementation seems to have changed a bit since the R70 release, so some of these may not work on the current release of THREE.js

Custom Mesh Shader Materials

On most of my experiments there are buttons under "Source" to view both the vertex shader source and the fragment shader source.

  • Basic color

    basic color shader

    This is the most basic of shaders, simple applying a color via the fragment shader.

  • Vertex position color

    Vertex position color shader

    Takes the fragment color from the vertex position. Simple experiment trying to understand how to send varyings from the vertex shader to the fragment shader

  • Uv position color

    Uv position color shader

    Takes the fragment color from the uv position. Again trying to understand how to send varyings from the vertex shader to the fragment shader

  • ...